GoFitness
Find Workouts That Work For You
Gofitness
GoFitness is a responsive web app designed to help in your fitness journey.
.png)
My role
UX/UI designer
​
Tools
Figma
Marvel
Miro
​
​
​
Contribution
User Flows
Ideation
Wireframes
Style Guide
Prototype
Hight-fidelity UI
​
Challenge
New or returning fitness enthusiasts want to discover activities they enjoy and establish a routine that works for them. Finding enjoyable exercise routines, however, can be challenging when you first begin, particularly if you want to try something new.
Opportunity
Create a responsive web app that allows users to discover the best workout for their skill level. From energizing bodyweight workouts to yoga flow sessions. For motivation, users are able to track their progression, plan workouts, and share favourites routines. Encourage individuals to stick to a fitness regimen that fits their abilities, schedules, and interests.
User stories
"I love the thought of having something that could really work with my schedule. Being as busy as I am, makes it tough to exercise otherwise."
--Participant
​
User Flows
As a new user, I want to learn about different exercises, so that I can figure out what is best for me.
"
As a new user, I want to be shown how the exercises are done so I know I'm doing them correctly.
​
"
Key Findings
People feel intimidated to start working out if they don't know how to do exercises correctly.
​
People think they need to dedicate lots of time at the gym to see fitness gains.
People would stick to a routine if they could track their improvement.
​
Design iteration
Wireframes
Taking in the key findings and needs of our users, I brainstormed and decided that we need to have three key components as part of our overall solution:
​
01
A personalized section with a daily workout video removes the burden of finding a workout that suits the user.
02
Tracking progress and celebrating accomplishments. The activity page records achievements so users stay motivated.
03
A workout planner that allows users to set their optimal training times.
Style Guide
I created a mood board to get inspiration, determine the tone, and set the overall look and feel of the project. Based on the mood board, I defined the colour pallet, typography, iconography, logo, UI elements, and grid system.
Visual Design
Having developed the app's core functions, I moved to digital design to match the branding. I used a progressive disclosure approach to the overall design.
Home Screen
The user-specific information, including daily challenges, weekly objectives, programs, and workouts, are displayed on the home screen.​
Workout Preview
By selecting the drop-down arrow on the intended workout, users can view more details for each exercise. They receive a thorough explanation of the drill. Users can acquire the correct technique with greater assurance.
Browse & Search
Users can browse workouts based on muscle groups and popular drills. The search page shows top suggestions from previous searches and professional coaches. For the search result page, I added Autocomplete function. ​
Schedule workouts
Users can plan and add workouts to their calendars to build their ideal training schedule. They can personalize their training to match their lifestyle.
Responsive Design
To create a responsive web application, I had to define different breakpoints so that the product looks aesthetically pleasing on all devices and is accessible to all users.
.jpg)
Prototype
I built a prototype using Figma to test the general navigation, gestures, and interactions. I limited my attention to a few essential screens because of the project's limitations.
.png)