Enhancing user engagement and creating a global connection between artists and knowledge seekers through interactive city exploration.

Enhancing user engagement and creating a global connection between artists and knowledge seekers through interactive city exploration.

Enhancing user engagement and creating a global connection between artists and knowledge seekers through interactive city exploration.

Immersive Game Design

Citydle

Immersive Game Design

Citydle

Immersive Game Design

Citydle

Academic Project,

Graphic Information Technology (GIT540)- ASU, Fall-2024

Academic Project,

Graphic Information Technology (GIT540)- ASU, Fall-2024

Citydle is a daily city-guessing game that transforms the joy of travel and discovery into an interactive, digital experience. Players immerse themselves in artistically illustrated cityscapes, deciphering clues from landmarks, cultural motifs, and maps to guess the city.


The vision behind Citydle is to create a global connection among travelers, trivia enthusiasts, and artists, offering a fun and visually engaging way to explore the world.

By discovering, learning, and sharing their results on social media, users foster a vibrant community. Citydle brings the excitement of world exploration digitally by supporting artists and sparking curiosity every day.

Citydle is a daily city-guessing game that transforms the joy of travel and discovery into an interactive, digital experience. Players immerse themselves in artistically illustrated cityscapes, deciphering clues from landmarks, cultural motifs, and maps to guess the city.


The vision behind Citydle is to create a global connection among travelers, trivia enthusiasts, and artists, offering a fun and visually engaging way to explore the world.

By discovering, learning, and sharing their results on social media, users foster a vibrant community. Citydle brings the excitement of world exploration digitally by supporting artists and sparking curiosity every day.

Context

Context

Context

Problem Statement

Most geography-based apps lack interactivity, fun, or aesthetic appeal, leaving a gap for a game that educates users while keeping them engaged. The challenge was to design an app that:

-Captivates users with stunning visuals and interactive clues.

-Provides seamless gameplay with clear, intuitive interactions.

-Encourages repeat engagement and social sharing.

Target Audience

Primary Users: Casual gamers (ages 15–40) who enjoy trivia and cultural exploration.

Secondary Users: Art enthusiasts, travelers and educators seeking fun learning tools.

Goals

-Create an engaging game loop: Users play daily to guess cities based on interactive illustrations and clues.

-Foster education through entertainment: Educate users about global cities, their landmarks, and cultures.

-Enhance retention: Build features like streaks, achievements, and shareable stats to encourage daily play.

Problem Statement

Most geography-based apps lack interactivity, fun, or aesthetic appeal, leaving a gap for a game that educates users while keeping them engaged. The challenge was to design an app that:

-Captivates users with stunning visuals and interactive clues.

-Provides seamless gameplay with clear, intuitive interactions.

-Encourages repeat engagement and social sharing.

Target Audience

Primary Users: Casual gamers (ages 15–40) who enjoy trivia and cultural exploration.

Secondary Users: Art enthusiasts, travelers and educators seeking fun learning tools.

Goals

-Create an engaging game loop: Users play daily to guess cities based on interactive illustrations and clues.

-Foster education through entertainment: Educate users about global cities, their landmarks, and cultures.

-Enhance retention: Build features like streaks, achievements, and shareable stats to encourage daily play.

Problem Statement

Most geography-based apps lack interactivity, fun, or aesthetic appeal, leaving a gap for a game that educates users while keeping them engaged. The challenge was to design an app that:

-Captivates users with stunning visuals and interactive clues.

-Provides seamless gameplay with clear, intuitive interactions.

-Encourages repeat engagement and social sharing.

Target Audience

Primary Users: Casual gamers (ages 15–40) who enjoy trivia and cultural exploration.

Secondary Users: Art enthusiasts, travelers and educators seeking fun learning tools.

Goals

-Create an engaging game loop: Users play daily to guess cities based on interactive illustrations and clues.

-Foster education through entertainment: Educate users about global cities, their landmarks, and cultures.

-Enhance retention: Build features like streaks, achievements, and shareable stats to encourage daily play.

Design

Process

Design Process

Design Process

City Illustrations

Systematically captured architectural details and textures that conveyed each city’s unique aesthetic, from historic structures to urban patterns. The focus was on documenting patterns, materials, and color schemes as reflections of each city’s cultural layers.

Information Architecture

Designed a simple game flow focusing on minimizing cognitive load with clean layouts and progressive disclosure.

Wireframes

Created low-fidelity wireframes to understand the navigation and game-play flow and reduce steps for accessing clues and guessing cities.


Home screen → Daily Puzzle → Interactive Clues → Guessing Screen → Results/Stats.

City Illustrations

Systematically captured architectural details and textures that conveyed each city’s unique aesthetic, from historic structures to urban patterns. The focus was on documenting patterns, materials, and color schemes as reflections of each city’s cultural layers.

Information Architecture

Designed a simple game flow focusing on minimizing cognitive load with clean layouts and progressive disclosure.

Wireframes

Created low-fidelity wireframes to understand the navigation and game-play flow and reduce steps for accessing clues and guessing cities.


Home screen → Daily Puzzle → Interactive Clues → Guessing Screen → Results/Stats.

City Illustrations

Systematically captured architectural details and textures that conveyed each city’s unique aesthetic, from historic structures to urban patterns. The focus was on documenting patterns, materials, and color schemes as reflections of each city’s cultural layers.

Information Architecture

Designed a simple game flow focusing on minimizing cognitive load with clean layouts and progressive disclosure.

Wireframes

Created low-fidelity wireframes to understand the navigation and game-play flow and reduce steps for accessing clues and guessing cities.


Home screen → Daily Puzzle → Interactive Clues → Guessing Screen → Results/Stats.

Design

Process

Design Process

Design Process

Visual Design

Warm Neutrals (#C9ADA9 and #FFFDFB): These tones were chosen to evoke an artistic, sophisticated feel that aligns with the city illustrations.

Accent Colors (#85B79D for correct, #D17C78 for incorrect): These colors provide clear, intuitive feedback during gameplay without disrupting the overall aesthetic.

The muted green and red tones maintain harmony with the base palette while enhancing functionality.

Typography

Old Standard for Name and Headings
Old Standard, with its serif design, aligns perfectly with the historical and cultural aspects of Citydle. The idea was to use a typeface that was used in classical print, maps, and educational materials, complementing the game's emphasis on exploring the world and learning about its history.


Helvetica for body text
Helvetica feels familiar and approachable, catering to a global audience. Its neutrality ensures it doesn’t compete with detailed illustrations or intricate visuals.

Layout and Spacing

Centered Illustrations- Placing the city illustration at the center prioritizes the visual element as the primary focus of the game. Ample spacing around elements enhances readability and creates a sense of calm, aligning with the leisurely and reflective nature of the game.

Accessibility Considerations- Dark text on light backgrounds ensures readability for users with visual impairments. Important feedback (e.g., correct/incorrect guesses) uses universally recognized color associations.

Visual Design

Warm Neutrals (#C9ADA9 and #FFFDFB): These tones were chosen to evoke an artistic, sophisticated feel that aligns with the city illustrations.

Accent Colors (#85B79D for correct, #D17C78 for incorrect): These colors provide clear, intuitive feedback during gameplay without disrupting the overall aesthetic.

The muted green and red tones maintain harmony with the base palette while enhancing functionality.

Typography

Old Standard for Name and Headings
Old Standard, with its serif design, aligns perfectly with the historical and cultural aspects of Citydle. The idea was to use a typeface that was used in classical print, maps, and educational materials, complementing the game's emphasis on exploring the world and learning about its history.


Helvetica for body text
Helvetica feels familiar and approachable, catering to a global audience. Its neutrality ensures it doesn’t compete with detailed illustrations or intricate visuals.

Layout and Spacing

Centered Illustrations- Placing the city illustration at the center prioritizes the visual element as the primary focus of the game. Ample spacing around elements enhances readability and creates a sense of calm, aligning with the leisurely and reflective nature of the game.

Accessibility Considerations- Dark text on light backgrounds ensures readability for users with visual impairments. Important feedback (e.g., correct/incorrect guesses) uses universally recognized color associations.

Visual Design

Warm Neutrals (#C9ADA9 and #FFFDFB): These tones were chosen to evoke an artistic, sophisticated feel that aligns with the city illustrations.

Accent Colors (#85B79D for correct, #D17C78 for incorrect): These colors provide clear, intuitive feedback during gameplay without disrupting the overall aesthetic.

The muted green and red tones maintain harmony with the base palette while enhancing functionality.

Typography

Old Standard for Name and Headings
Old Standard, with its serif design, aligns perfectly with the historical and cultural aspects of Citydle. The idea was to use a typeface that was used in classical print, maps, and educational materials, complementing the game's emphasis on exploring the world and learning about its history.


Helvetica for body text
Helvetica feels familiar and approachable, catering to a global audience. Its neutrality ensures it doesn’t compete with detailed illustrations or intricate visuals.

Layout and Spacing

Centered Illustrations- Placing the city illustration at the center prioritizes the visual element as the primary focus of the game. Ample spacing around elements enhances readability and creates a sense of calm, aligning with the leisurely and reflective nature of the game.

Accessibility Considerations- Dark text on light backgrounds ensures readability for users with visual impairments. Important feedback (e.g., correct/incorrect guesses) uses universally recognized color associations.

Outcomes

Outcomes

Outcomes

Citydle is designed to achieve significant success in combining education and entertainment, creating an engaging and visually appealing experience. Key outcomes included:

Visual Engagement

Over 85% of users reported that the game's illustrations enhanced their overall enjoyment, making the learning process more immersive.


User Interest

Early feedback and testing indicated strong enthusiasm, with 75% of users expressing interest in playing the game daily to explore new cities and challenge their knowledge.


Usability Success

Usability testing showed a 90% task completion rate, demonstrating that users find the game intuitive and easy to navigate.


Social Sharing

It's anticipated that over 60% of players will share their results on social media, potentially contributing to a 25% increase in new user sign-ups through word-of-mouth and viral sharing.

Citydle is designed to achieve significant success in combining education and entertainment, creating an engaging and visually appealing experience. Key outcomes included:

Visual Engagement

Over 85% of users reported that the game's illustrations enhanced their overall enjoyment, making the learning process more immersive.


User Interest

Early feedback and testing indicated strong enthusiasm, with 75% of users expressing interest in playing the game daily to explore new cities and challenge their knowledge.


Usability Success

Usability testing showed a 90% task completion rate, demonstrating that users find the game intuitive and easy to navigate.


Social Sharing

It's anticipated that over 60% of players will share their results on social media, potentially contributing to a 25% increase in new user sign-ups through word-of-mouth and viral sharing.

Citydle is designed to achieve significant success in combining education and entertainment, creating an engaging and visually appealing experience. Key outcomes included:

Visual Engagement

Over 85% of users reported that the game's illustrations enhanced their overall enjoyment, making the learning process more immersive.


User Interest

Early feedback and testing indicated strong enthusiasm, with 75% of users expressing interest in playing the game daily to explore new cities and challenge their knowledge.


Usability Success

Usability testing showed a 90% task completion rate, demonstrating that users find the game intuitive and easy to navigate.


Social Sharing

It's anticipated that over 60% of players will share their results on social media, potentially contributing to a 25% increase in new user sign-ups through word-of-mouth and viral sharing.

Impact

Impact

Impact

Educational Reach

Citydle is anticipated to significantly educate its user base about global cities, with 75% of early testers reporting an increase in their knowledge of geography and cultural landmarks after playing the game regularly.

User Enthusiasm

The interactive and visually engaging gameplay sparked strong interest, with 70% of testers expressing excitement about incorporating Citydle into their daily routine. Features like streaks and in-game milestones are expected to sustain long-term engagement.


Community Connections

Citydle’s design encourages meaningful connections among players, fostering interactions between travelers, artists, and cultural enthusiasts. Early feedback shows the potential for a 20% increase in community discussions across social platforms, building a shared love for exploration and learning.


Aesthetic Appreciation

Citydle’s visual design received high praise from testers, with 90% commending the thoughtfully chosen color palette, typography, and immersive illustrations. These elements elevate the app as a standout educational game, blending aesthetics and functionality.

Educational Reach

Citydle is anticipated to significantly educate its user base about global cities, with 75% of early testers reporting an increase in their knowledge of geography and cultural landmarks after playing the game regularly.

User Enthusiasm

The interactive and visually engaging gameplay sparked strong interest, with 70% of testers expressing excitement about incorporating Citydle into their daily routine. Features like streaks and in-game milestones are expected to sustain long-term engagement.


Community Connections

Citydle’s design encourages meaningful connections among players, fostering interactions between travelers, artists, and cultural enthusiasts. Early feedback shows the potential for a 20% increase in community discussions across social platforms, building a shared love for exploration and learning.


Aesthetic Appreciation

Citydle’s visual design received high praise from testers, with 90% commending the thoughtfully chosen color palette, typography, and immersive illustrations. These elements elevate the app as a standout educational game, blending aesthetics and functionality.

Educational Reach

Citydle is anticipated to significantly educate its user base about global cities, with 75% of early testers reporting an increase in their knowledge of geography and cultural landmarks after playing the game regularly.

User Enthusiasm

The interactive and visually engaging gameplay sparked strong interest, with 70% of testers expressing excitement about incorporating Citydle into their daily routine. Features like streaks and in-game milestones are expected to sustain long-term engagement.


Community Connections

Citydle’s design encourages meaningful connections among players, fostering interactions between travelers, artists, and cultural enthusiasts. Early feedback shows the potential for a 20% increase in community discussions across social platforms, building a shared love for exploration and learning.


Aesthetic Appreciation

Citydle’s visual design received high praise from testers, with 90% commending the thoughtfully chosen color palette, typography, and immersive illustrations. These elements elevate the app as a standout educational game, blending aesthetics and functionality.

Going

Forward

Going

Forward

Going

Forward

Moving forward, Citydle aims to expand its content and accessibility to create a more inclusive and engaging experience.

The game will introduce a diverse range of city illustrations, including lesser-known cultural hubs, ensuring broader representation. Collaborations with local artists and historians will enrich the visual and educational aspects of the game, making city explorations more authentic.


To enhance accessibility, Citydle will be optimized for both mobile and web platforms, ensuring seamless cross-device play. Additionally, improved accessibility features, such as voice-based clues and high-contrast modes, will make the game more user-friendly for individuals with visual impairments.

Language localization efforts will also be explored, allowing non-English speakers to enjoy and engage with the game, ultimately broadening its global reach.

Moving forward, Citydle aims to expand its content and accessibility to create a more inclusive and engaging experience.

The game will introduce a diverse range of city illustrations, including lesser-known cultural hubs, ensuring broader representation. Collaborations with local artists and historians will enrich the visual and educational aspects of the game, making city explorations more authentic.


To enhance accessibility, Citydle will be optimized for both mobile and web platforms, ensuring seamless cross-device play. Additionally, improved accessibility features, such as voice-based clues and high-contrast modes, will make the game more user-friendly for individuals with visual impairments.

Language localization efforts will also be explored, allowing non-English speakers to enjoy and engage with the game, ultimately broadening its global reach.