Fittr | Mobile Web App

Encouraging people to get into a exercise routine that works for them.

Mona Yang
Dec 27, 2018 · Unlisted

Introduction

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

Process

Discovery & Define
User Persona
User Stories
Task Flows

Develop
Sitemap
Paper Sketches
Usability Testing
Clickable Prototype (Marvel App)
Mid fidelity Wireframes (Adobe XD)

Deliver
Design documentation: Style guide
Final UI Designs
Responsive design


Discovery

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.


Feature requirements

  • 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

Key messaging:

“Exercise is something anyone can pick up, find something they love, and fit it into their daily schedule”

Style:

  • Easy, informative and fun
  • Orange and black as primary colours

User persona

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.
User persona

User stories


Exploration

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.


Develop

Sitemap

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.

Paper sketches

User testing

I used Marvel app for the prototype and tested it with users to gather user feedback on the prototype’s usability and navigation.

Flow map of prototype

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.

Mid-fidelity wireframes
User flows

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.

Moodboard

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.


Deliver

Documentation: Style Guide


Final UI Designs


Responsive Designs


Thank you for reading my work! If you would like to talk about UX or just say hi, feel free to connect with me on LinkedIn or Twitter.

Unlisted

Mona Yang

Written by

Mona Yang

UX Designer at OneDegree. Previously at MeeTwo, Intuit, QuickBooks. www.mona-yang.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade