Fittr | Mobile Web App
Encouraging people to get into a exercise routine that works for them.
The objective of this project is to design a web app that encourages people who want to exercise to get into a exercise routine that works for them. This project was completed as part of the CareerFoundry UX Design course.
Much of the user research the project had already been done, so my primary focus was the UI design.
Duration: March to May 2018
Discovery & Define
Clickable Prototype (Marvel App)
Mid fidelity Wireframes (Adobe XD)
Design documentation: Style guide
Final UI Designs
Defining the Problem
Exercise should be fun and suited to the individual needs and schedules of each person. For busy people, finding exercise routines that fits into their schedules is not easy. For people who are new to exercise, finding exercise routines that suit their levels of fitness can be difficult.
- Search and filter exercise videos
- Exercise scheduler
- Option to add sessions to calendar
- Create user accounts
- Tracking and charting of users’ progression over time
- A game layer with daily challenges, achievements, and/or rewards
- Social sharing for routines or favourite exercises
Partial branding guidelines
“Exercise is something anyone can pick up, find something they love, and fit it into their daily schedule”
- Easy, informative and fun
- Orange and black as primary colours
The persona Rebecca, is someone who wants:
- To lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.
- To find a tool that will help her fit exercise routines into her busy schedule.
- Something that will help her learn how to properly exercise as she is a beginner.
- Help finding routines she can enjoy.
I translated the user stories into task 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 that I know I’m doing them correctly.
As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.
As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.
As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.
As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.
As a frequent user, I want to be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier.
I created a sitemap based on the task flows. During this process, it was important to keep in mind that I was designing a web app, not a native mobile app. This meant that the navigation of the app would not happen from the bottom of the screen which is typically seen in native apps. It also meant that each page would include a footer, as the user would be using their mobile phone’s browser.
Sketching solutions onto paper
Once I had created a sitemap, I sketched out lots of low fidelity designs on paper in order to explore as many solutions as possible.
I used Marvel app for the prototype and tested it with users to gather user feedback on the prototype’s usability and navigation.
The key findings from the feedback I received were:
• It wasn’t clear what the progress bars showed.
• The sharing feature wasn’t intuitive.
• The equipment toggle on the filter page was clumsy.
• After saving an exercise into calendar, the app should direct the user back to their current exercise instead of staying in calendar.
Based on the feedback, I iterated the designs. The updated prototype was less clumsy and caused less confusion. I then created mid-fidelity wireframes.
Bringing the Designs to Life
At this point, I began thinking about how I would bring the design to life by using the app’s style ‘easy, informative and fun’ as a starting point. Using orange and black as the primary colours, I wanted the visual design of the app to be appealing and emotional.
Orange is a bright and warm colour that evokes feelings of optimism, energy, positivity and passion. Black is a shade that is strong, determined and bold. I researched images with orange and black colour combinations and created a moodboard for inspiration.
The moodboard is fun, bright, energetic and encouraging — appropriate for someone who is a beginner to working out and would want to enjoy working out as they use the App. I experimented by using a gradient for a strong orange to make the visual design of the app really stand out.