Elevate- A Fitness App. Case Study

Mehek Maini
7 min readMar 25, 2021

--

Overview

Change is hard. Sometimes we lack information. Other times, our routines and habits are persistent, even if we wish they weren’t.

Eating healthy food and working out might seem like a hassle sometimes because of a lack of results or simply because one doesn’t find all the necessary tools under one platform. The main goal of this app is to provide its users with all the necessary tools needed to adapt to a healthy lifestyle from the comfort of their homes.

The Process

We already know that design processes don’t generally follow a linear path, however, for the sake of maintaining some structure, I’ll be breaking the process down into the following steps:​

  • Research
  • Ideate
  • Create
  • Test
  • Develop

Research

Target Audience

The target audience can be everyday users, extreme users, and other stakeholders.​

  • People with health issues.
  • People who want to maintain their weight.
  • Someone motivated to look good for a special occasion.
  • Someone trying to make a lifestyle change.
  • Someone who wants to exercise at home.

Observation & Interview

I observed and interviewed three people who have made changes in their life for the betterment of their health.

The main goal was to observe the successes, breakdowns, and latent opportunities to get a better understanding of their lifestyle, the difficulties they go through to keep themselves fit, and what motivates them to be consistent.

Interview Questions

  • How often do you exercise in a week?
  • Have you ever used an app to exercise?
  • What type of app did you use to exercise?
  • Have you ever faced any difficulty with your app?
  • What did you do to overcome these difficulties?
  • Were you able to achieve the desired result?
  • How often in a week do you cook at home?
  • What do you do to know about the right diet for you?
  • Which app (if any) do you use to get your recipes?
  • How do you measure your progress?
  • If you had the opportunity to create an app for fitness what would you include in that?
  • How do you keep yourself motivated to achieve your goal?

User Personas

Ideate

Empathy Map

Brainstorm User Needs

  • Needs a way to track the progress of their workout.
  • Needs to be able to have a personalized diet plan.
  • Needs to be able to have a personalized workout plan.
  • Needs to be able to lose weight without dieting.
  • Needs a way to be motivated
  • Needs to be able to monitor progress in the weight loss journey
  • Needs to be able to know the calories consumed and remaining.
  • Needs a way to build healthier habits.

Inspiration Board

  1. Noom -https://www.noom.com/#/: Noom is a health app that provides a personalized plan that uses psychology and small goals to lose weight for good. This app inspired me because it not only helps you to achieve your goal but also gives scientific explanations as to why eating a particular food item is good/bad for you and what effect it has on your body.

2. Fit On-​ https://fitonapp.com/: Fit On is a free app that focuses more on workouts. What I like about this app is that the workouts can last anywhere between 5–20mins, they are easy to follow. Having used the app myself I can say that they are really effective too. Even though workout videos are their focus they have a section for advice as well as meal plans. Another thing I like about this app is that you can invite your friends and compete with each other which might motivate a lot of users.

3. My Fitness Pal — https://www.myfitnesspal.com/: My Fitness Pal is a free online calorie counter and diet plan. It provides you with the total calories you can consume in a day, what I like about this is when you enter the exercise you did, it will minus that calorie count and show you the net calorie count that you can still consume.

Create

Storyboard 1

Storyboard 2

Prototype Option A

Prototype Option B

Interactive Prototype

I used Figma to create an interactive prototype.

Prototype Link: https://www.figma.com/proto/ker1sgd4qnhYTUj3GQj4TX/Portfolio-revised?node-id=2%3A83&scaling=scale-down

Test

In-Person Usability Test

To evaluate my design, I decided to go back to the users I had recruited during the research phase. Due to the limited number of participants, I could not get into much depth with the evaluation, however, I was still able to run a quick test of my design. I came up with a few tasks for the user to perform, such as:​

  1. Sign up for the app and browse the workout library and look for a medium-intensity workout.
  2. Look for stress-free meditation.
  3. Find a guilt-free dessert recipe.
  4. Go to your account page and logout.​

Throughout the session, I encouraged the users to think out loud as I took their feedback, this gave me a better understanding of what the user liked, disliked, breakdowns, and opportunities.​

Things to keep an eye out for:​

  • How is the user interacting with the navigation?
  • Does the user click the logo icon to go to the homepage?
  • How often do they click the back button?
  • Does the user seem confused at any point?
  • Does the user feel uninterested?
  • What do they care about?
  • What information helps them navigate?
  • What do they not care about, what are some extraneous steps or information?

List of Changes

Here is a list of changes I came up with after conducting in-person usability tests.​

  • Changing the homepage to make it more interactive and suggestive for the user.
  • Adding a few suggestions and trending videos to the homepage.
  • Adding more suggestive and trending videos for workouts and recipes.
  • Adding live session and upcoming events tab to the homepage as well as workout, recipes, and meditation page.
  • Removing hamburger navigation from Prototype A and maintaining the bottom navigation as shown in Prototype B.

Online Usability Test

After making the changes from the feedback provided during in-person testing I conducted an online usability test with the help of www.usertesting.com, here is a summary of what I found:​

  • The top navigation on the homepage seemed flat and looked like a wireframe, needed more element to pop.
  • The frame borders had a black color which seemed too harsh on the eye.
  • The overall flow was good, users didn’t have difficulty moving around in the app.
  • Images should have been clickable.

List of Changes

Here is a list of changes I came up with after conducting online usability tests.​

  • Adding more graphic representation near recipes, workout, and account details.
  • Playing with line weights around the app.
  • Removing harsh dark lines and replacing them with light grey borders.
  • Making sure that all the texts are properly aligned.
  • Making sure that all the frames have the same padding.
  • Matching all corner radius of buttons.

Develop

Once all the tests were completed and changes were incorporated, I finally had a product that the user was happy to use on a daily basis.

--

--