CityLights - San Francisco Video Game
UX/UI Design, Visual Design
"CityLights - San Francisco" is an original mobile puzzle game that I created and designed, blending intricate puzzles with the vibrant atmosphere of San Francisco’s unique streets and neighborhoods.
Overview
"CityLights - San Francisco" represents a pivotal project in my career, where I significantly advanced my expertise in UX/UI design, animation, and mobile game development. The project entailed the conceptualization and execution of a mobile puzzle game, focusing on the technical aspects of user interface design, user experience optimization, and the integration of engaging animations that complement gameplay. This comprehensive approach ensured that each game element was not only visually appealing but also enhanced the overall user interaction and satisfaction.
Context
Over the course of four years, from 2014 to 2018, I worked closely with software engineer Tiziano Pigliucci to bring "CityLights - San Francisco" from concept to reality. My role involved guiding the game through its early UX studies, designing the visuals and animations, and overseeing the game mechanics and level design. This process allowed me to address and overcome numerous design challenges, applying effective project management techniques to enhance the game's development and ensure a cohesive player experience. Our collaborative efforts culminated in the successful launch of the game on both the App Store and Google Play Store, where it received a warm reception from the gaming community.
Role
UX/UI Designer
Visual Designer
Illustrator
Animator
Video Game Designer
Tools
Adobe Illustrator
Adobe Photoshop
Adobe After Effects
Unity
Inspiration
Storytelling
"CityLights - San Francisco" was designed as a fun, original game set in the vibrant city of San Francisco. Inspired by the simple yet engaging concept of "crossing the road," the game targets a young audience and aims to educate players about the city's key landmarks and attractions. This educational element is woven into the gameplay to enrich the gaming experience while introducing players to the cultural and historical essence of San Francisco.
//Inspiration
Competitors
A comprehensive study of other mobile puzzle games was conducted to understand their design approaches, game mechanics, market positioning, and target demographics. This research helped in identifying industry trends and opportunities for innovation, ensuring "CityLights - San Francisco" could offer a unique value proposition to its players.
//Inspiration
Game Mechanics and Dynamics
The development of "CityLights - San Francisco" involved crafting a game that was both fun and challenging, leveraging the capabilities of smartphones, such as touch screen functionality and portability. The core game mechanics revolve around the use of swiping actions to manipulate the main character, guiding them to cross roads in any direction to reach their final destination. This intuitive swiping mechanism allows for fluid, dynamic gameplay that players can easily engage with on their mobile devices.
As players navigate through the city, they encounter surprising elements along the way; these can either aid or hinder their progress, adding layers of strategy and unpredictability to each level. Additionally, each journey is timed, creating a sense of urgency and excitement as players strive to complete objectives within the allotted timeframe, further enhancing the interactive and immersive experience of the game.
//Inspiration
Conceptualization
Wireframes
The wireframing stage involved sketching out the basic layout and structure of the game interfaces. This preliminary visualization helped clarify the flow of the game and the placement of interactive elements, providing a clear roadmap for further development and refinement of the game’s design.
//Conceptualization
Brand and Look & Feel
The branding for "CityLights - San Francisco" was crafted to reflect the game's dynamic and engaging nature. The visual identity and overall aesthetic were designed to convey a sense of fun and challenge, aligning with the happy and vibrant tone of the game, while also appealing to a youthful, energetic audience.
//Conceptualization
Illustration
The illustrations for "CityLights - San Francisco" were created to provide a visually impactful and enjoyable experience. Each illustration captures the iconic aspects of San Francisco, offering players a visually immersive journey through the city. The artistic style was chosen to complement the game’s theme and enhance the overall player engagement.
//Conceptualization
Animation
Every visual element within "CityLights - San Francisco" was animated to create an interactive and lively gaming experience. These animations were meticulously designed to support the game's functionality and storytelling, enhancing the immersive experience without overwhelming the gameplay.
//Conceptualization
Iteration
Mockups
During the mockups phase of the project, I translated our low-fidelity wireframes into high-fidelity mockups that incorporated the established design system. This phase allowed me to refine visual details and interactions, ensuring that each element aligns with the overall aesthetic and functional goals. The mockups provided a realistic preview of the final product, facilitating feedback and enabling adjustments before moving into prototyping.
