Water Flow: A UI/UX Transformation Journey
My Role
UI/UX Designer, Graphic Designer
Tools
Photoshop, Figma
Year
2024
Overview
Water Flow is a hyper-casual mobile game that challenges players to manage water flow through various obstacles. Designed for quick and enjoyable gaming sessions, it provides a relaxing yet stimulating experience.
The studio was stuck at the UI part of the game development. They didn’t know what players would like and needed help creating an engaging interface and a logo to represent their game.
I was brought on board as a UI/UX designer and UI artist to redesign the game’s user interface and create a cohesive and attractive brand identity, including the logo.
Features that I've designed
- Rich and Playful Interface: Crafted a vibrant and dynamic UI to make the game visually engaging and enjoyable.
- Logo Design: Created a unique and recognizable logo to strengthen the game’s branding.
- Visual Appeal: Enhanced the overall look and feel with colorful and captivating graphics.
Challenges
- Optimizing User Interface: The studio’s initial interface was cluttered and confusing. I streamlined the design, making it more intuitive and user-friendly.
- Impact: Players found the game easier to navigate and more enjoyable.
- Enhancing Visual Appeal: The original design lacked excitement. I introduced playful and vibrant graphics to capture and hold players’ attention.
Lessons Learned
- Understanding Player Preferences: Analyzing similar games helped me understand what players like and dislike, guiding my design decisions.
- Simplify to Enhance UX: A clean and intuitive design can significantly improve user experience.
- Strong Visuals Matter: Engaging visuals are crucial in capturing user interest and improving overall game appeal.
User Persona
Meet Alex Martinez
Meet Alex Martinez, a 28-year-old marketing manager from Barcelona. With a bustling career and an active lifestyle, Alex finds quick relaxation in casual mobile games. He values games that are easy to pick up, visually appealing, and perfect for short breaks during his busy day.
Needs and Goals
- To find quick and enjoyable ways to relax during short breaks.
- To play games that are easy to pick up and put down without needing a significant time commitment.
- To engage with games that have visually appealing designs and intuitive interfaces.
Behaviour
- Enjoys playing mobile games, especially hyper-casual and puzzle genres.
- Passionate about technology and stays updated with the latest mobile apps and games.
- Likes to spend time with friends, travel, and explore new places.
User Flow
A user flow is a visual representation of the steps that a user takes to complete a task on a game. It is a way of understanding how users interact with your product and identifying any areas that may be causing problems.
Wireframes
A wireframe is a low-fidelity, visual representation of the layout of a website or app. It is a quick and easy way to sketch out the basic structure of a page without worrying about the details of the design. Wireframes are often used in the early stages of the design process to help designers and stakeholders collaborate and get feedback on the layout of a page.
I received the mid-fidelity wireframes from the studio, which provided a solid foundation for the game’s structure and functionality. These wireframes guided my redesign process, allowing me to focus on enhancing the visual design and user experience while ensuring consistency with the initial vision.
Logo Design
A logo is a visual symbol that represents a game’s identity and brand. It’s often the first thing players see and can leave a lasting impression. A well-designed logo captures the essence of the game, making it memorable and instantly recognizable.
Utility of a Logo in Gaming:
- Brand Identity: Establishes a strong brand presence and helps differentiate the game in a crowded market.
- Recognition: Makes the game easily identifiable across various platforms and marketing materials.
- Marketing: Enhances promotional efforts by providing a visual focal point that attracts potential players.
For Water Flow, I designed a logo that reflects the game’s core theme of water and fluidity. The design features smooth, flowing lines and vibrant colors to convey a sense of movement and energy. This logo not only strengthens the game’s brand identity but also captures the attention of players, inviting them to explore the game’s engaging and dynamic experience.
The logo design was a crucial element in the overall redesign, contributing to the game’s visual appeal and marketability.
Typography
Colors
Mockups
Prototype
A prototype is a functional model of a product used to demonstrate and test its functionality and user interface.
For Water Flow, the prototype showcases the various features and interactions of the game, allowing users to experience its look and feel in action. The animations I created in the prototype will serve as a reference for animating the UI elements in Godot. This tangible representation of the design helps communicate the project’s vision and provides valuable feedback for further development.
