Overview
This responsive web app aims to help people get into an exercise of their choice by holding their hand a bit and providing routines, guides, interactive examples, and info.
Timeline
4 weeks
My Role
Sole Student Project as UI designer for CareerFoundry
Tools
Figma
Lucid Chart
Objective
Motivate people into an exercise routine that suits their level, schedule, and interests.
DEFINE
After defining the scope of the app, the next step was creating user stories and a proto persona to better understand my users’ needs and goals.
Persona
Meet our persona, Rebecca. She is a beginner for workout, her primary need is to incorporate workout habit into her busy life.
User Flows
I created a user flow diagram to map out these features and see what kind of steps would be necessary for the app.
Prototype
Paper Prototype
Keeping Rebecca’s experience in mind, I started sketching the main functionalities of the app with paper and pen. Some considerations for my paper prototypes were;
Basic flows to complete tasks
What makes users motivated, and navigate to choose exercise
Which elements (text, icon, picture, or card) needed for each screens
Mid-Fidelity Wireframes
After testing out the paper prototype and confirmed flows, I recreated my designs on Figma to start adding more details and hierarchy. I decided to implement a fluid grid layout (using 4-column grid), so content stretches to fit the screen, before snapping to the next breakpoint.
VISUAL DESIGN
Moodboard
In this step, I created a mood board to help me to gather ideas and set a tone for the project.
Primary orange represents joyful, optimism and bright which encourage exercise habit, secondary green represents freshness for starting something new. By creating a board, I found the best word to describe My Fitness were: happy, fun, energetic, and minimal.
Style Guide
I made a style guide to show and instruct others on the final choices for all visual aspects, including colors, icons, and typefaces. I created UI components that give users feedback to their actions so that users have intuitive and smooth experience.
THE OUTCOME
Final Screens
I continued to use Figma to create my high-fidelity wireframes and an interactive prototype. Some considerations at this stage were;
If the color contrast meets WCAG AA standards
All clickable components adhere to 40 by 40 px minimum
Consistency in all screens
Interface in Action
REFLECTION
Next Steps
1. Add new features
More features, such as registering user’s goal and preference, can be considered to be implemented for satisfying users’ needs. I’d like to conduct user research and rapid prototype first before proceeding further.
2. Validate design with usability tests
I would like to test the design with users to validate the concept so far. It would be important to find out if there is any flows, as well as areas of improvement because continuous iterations are an integral part of the design process.
Thank you for scrolling! ✨
User Stories
Different Breakpoints
Based on the mobile wireframes, I generated additional breakpoints for tablet and desktop. The challenging point was to use space efficiently in bigger screens as keeping simple and intuitive design. On the workout added screen, the key points that I want to make sure users know is that “workout was added to schedule” and “elicit next action (see more exercises) “. Though I added similar workouts on desktop, whereas users can access from CTA button on smaller screens.
Share Exercise
I implemented modal window on the share screen. It enables users to go back to the previous screen (exercise page) easily.
Account Screen
I implemented icons along with each texts (menu) so that it helps users to recognize what they can do on this screen intuitively.
Home Screen
Since our persona, Rebecca, is a beginner who wants to explore different types of exercises, I created the home screen with variety of ways to find exercises. It has Daily Challenge, Top Rated, Events, and users are able to find exercises by selecting categories.
