Transform your fitness journey with the Become fitness web app, an all-in-one platform designed to motivate and guide you towards a healthier lifestyle. Discover personalized workouts, track progress, and connect with a supportive community, making fitness a fun and achievable goal.
My Role
I played a crucial role as the UI designer in creating a motivating and inclusive exercise experience for all fitness levels.
Key Objective
My objective was to make exercise feel accessible and enjoyable by fostering a fun and friendly environment.
Target Persona
Rebecca is a busy software engineer seeking quick and fun ways to incorporate movement into her day. She desires motivation through gamification and social connections.
All for the Experience
User Flows
These user flows were designed to address the specific needs and goals of new and frequent users of the Become fitness web app. By incorporating features such as exercise routine tutorials, scheduling, and daily challenges, the app aims to provide a comprehensive and engaging experience that caters to users at different stages of their fitness journey.
Low-Fidelity Wireframes
The low-fidelity wireframes were intentionally kept simple and uncluttered, prioritizing a clear user flow and highlighting tasks that encourage users to incorporate activity into their daily routines.
These wireframes were focused on guiding users towards desired actions and providing essential information to support their fitness goals.
Usability testing was conducted using the Maze platform with six participants. The feedback received revealed that the form for scheduling a workout had excessive options without clear differentiation between sections.
Mid-Fidelity Wireframes
The mid-fidelity wireframes were designed using a layout grid system to ensure consistency and alignment across different screens and devices.
These wireframes expanded on the low-fidelity versions by incorporating more detailed design patterns and considering the app’s responsive design principles.
High-Fidelity Prototype
The high-fidelity mockups of the Become fitness web app showcased the visual aesthetic and branding elements, ensuring a consistent user interface.
In the upcoming sections, we will explore the mood board, style guide, and visual elements that influenced the high-fidelity wireframes, demonstrating how they created an engaging user interface for the Become fitness web app.
Fun, but Simple
Mood Board
Inspire and motivate users to enjoy their workouts by promoting a sense of fun and playfulness. The use of vibrant orange, coral, and teal tones adds energy and excitement to the design, while the inclusion of photos of people having fun while working out reinforces the idea that exercise can be enjoyable. The retro type fonts add a nostalgic touch, evoking a sense of familiarity and warmth. Overall, this dynamic and engaging visual experience encourages users to stay active and have fun while doing it.
The Style Guide
The style guide for the Become fitness web app not only establishes consistency but also incorporates current design trends to create a visually engaging and contemporary user.
Colors
The vibrant and energetic hues evoke a sense of motivation, enthusiasm, and playfulness.
The light mode offers a bright and crisp design that’s perfect for daytime use, while the dark mode is easy on the eyes and provides a more comfortable experience for nighttime use.
Having both light and dark modes offers a flexible and accessible design that’s tailored to the user’s preferences.
Typography
The combination of bold and sleek fonts aimed to convey a modern and fun aesthetic while ensuring readability and accessibility.
Iconography
The clean and minimalist icons were simple and intuitive, enhancing the user experience and visual appeal.
Imagery
DO:
- Use photos depict individuals working out in real workout settings
- Apply natural lighting to give a fresh and authentic feel
Don't:
- Use photos where the focus is not on an individual
- Break the authentic vibe of the app by including images that do not show someone actively working out
Key Takeaways
Through user-centered design and meticulous attention to detail, the app is designed to inspire individuals like Rebecca to adopt a healthier lifestyle.
By incorporating current design trends and utilizing a mood board, style guide, and UI prototype, the app boasts a cohesive and visually appealing interface. I am passionate about crafting user-centered solutions that make a positive impact, and this case study exemplifies my dedication.
If you are seeking a UX designer with a creative and empathetic approach, I would be delighted to discuss potential collaborations or opportunities.