SportFit

Tools / Adobe Xd
Roles / UI & UX
Durations / 3 Weeks
Years / August 2020

 

About Project

“SportFit” is an App that can help people keep doing sportIt can planning personalize exercises for the user but also help the user do perfect form.

The Problem

A lot of sports Apps help people to do exercise, but they can’t keep using those Apps for a long time. I find out that the user has no flexibility with their planning workout, but also they don’t know if they do their form correctly. Therefore, I reimagine the sport’s App that can be more flexible and considerate for the user.

Design Challenge

I ran 3 weeks of the design process based on the design thinking methodology, which includes 5 stages: empathize, define, ideate, prototype, and test. I created a sports App that offers workout and training organization, also it helps the user to perfect their form.

Design Process

design_process@3x.png

I use the design thinking methodology to go through all design processes.

  • First, in Empathize stape, I did user interviews to understand the user's experiences and their motivation.

  • Second, in Define stape, I arranged all information from the interviews and created a Persona that is base on it. And I created a Customer Journey Map which is base on this Persona and made the User flow.

  • Third, I use Brainstorm to create different ideas and drew some sketches in the Ideate stape.

  • Fourth, I did the wireframes and the Low-Fidelity prototype to do usability testing to improve my project. Finally, I came out with a high-fidelity prototype.

 
User Interview

The goal of the interview is to find out about their habits and motivation

for the sport and understand what is their matter for keeping doing sport.

Interview Type

Questionnaire and note-taking

Number of Interviewees

5 People interviewed

Durations

25-30 Minutes each

 
Zoey

Administrative Assistant

27, Female

Zoey has already worked for 4 years. Because her work is always busy, she likes to do sport to reduce her stress. Also, she finds out her body starts to appear some health problems, such as backache and neck pain. She wants to use sport to keep healthy but also maintains her figure.

Frustration

  • It is difficult to keep doing exercise because she feels tired after work.

  • She doesn’t know which exercise is fit for her.

  • She doesn’t know if she does exercise correctly.

Goal

  • Keep doing exercise regularly.

  • Someone can plan exercise for her.

  • Helps her perfect her form, whilst she does the exercise.

When I do exercise,

I don’t know if I do it correctly.

Competitive Analysis
30dayworkout_edited.png

30DayWorkOut

Strengths

  • The structure of categories and the information are clear and ordered.

  • Information with icons helps people understand easily.

  • Put the most important information on the main page to avoid the user to get too much information at once.

  • Explicate the exercise with text, animation, and video.

  • Each exercise can replace with different levels of exercise.
     

​Weakness

  • Limit the number of exercises.

  • Can not use our personal music.

Keep%20trainer_edited.png

Keep Trainer

Strengths

  • The structure of the section and the information are clear, except for the workout page.

  • Sharing and communicate experiences with other users.

  • Having various exercises the user can choose.

  • Clearly divide the 5 main functions in the menu button.
     

Weakness

  • Image and context do not fit with each other.

  •  Get confused with the icon without explication.

  • Too much information at once

  • The picture is more dominant than the text, but the text is more important for the user.

 
 

Customer Journey Map

Zoey has a lot of work have to do every day, sometimes she feels stressed

Every day she sits in the office, she finds out her body starts to appear some health problems. 

She wants to do some sport but she does not know what kind of exercise she should start, but also it's difficult to keep doing exercise regularly for her.

She wants to find an App that can guide her doing exercise and makes her wants to continue doing it.

Most of the exercises need to take around 30 minutes. Sometimes she wants to change to others exercise that is less than 30 minutes.

Whilst she is doing exercises, she does not know if her form is correct.

 
Brainstorm_edited_edited.png
Brainstorm

After I defined the problems, I use the brainstorming method to develop my thinking and create some ideas. There are 3 main problems. First, the user can't keep doing exercise regularly. Plans always fall behind changes. Second, the user would like someone can correct their form when they are doing the sport. Third, there are many different exercises. They don't know which exercise is fit for them.

"How Might We" Question
hmw_question.png

After the Brainstorm method, I use the "How Might We" question to deeper my idea thinking and define the main feature of this App.

  • Firstly. there are many things to prevent the user from keep doing sport regularly, such as they are tired after work, they have another appointment on the workout day. Therefore, I find out if I reduce the duration of the workout, and the user can have a few times of quota to change the workout day on their workout plan. That both can encourage the user to keeps doing exercise.

  • Secondly, the users don't know if their form is correct when they are doing the exercises because they follow the video. The video doesn't help them.
     

Therefore, I find out 2 ways that can improve this situation.

  • The first way is what if the App can help them do perfect form, such as do a recording when they are doing the exercise. The user can compare their video with the video from the App.

  • And the second way is the user can use this App that links with the gym to find a trainer to correct their form face to face.

User Flow

Flowchart.png

When the user registers an account first time, SportFit will help the user to create a personal sport plan. Therefore, the user will have to fill out some questions to let "SpotFit" can set up the sports program for the user, such as what is the user goal, what kind of exercise they prefer, which level of exercise they are, etc.


After the user sets up everything, they will land on the "Plan" page. We can see the everyday workout on this page. There are another three buttons, daily activity, categories of exercise, and account page. We can see our everyday activity on the daily activity page, such as how many steps we walked, how many calories we burned, etc. On the categories page, we can search all exercises on this page. 

 

We can modify our profile information and modify our sports program on the account page.

 

User Flow 1

( Zoey does exercises )

After she finished her work, she gets home and checks out the exercises for today. She finds out there are some exercises she doesn't know how to do.

User Flow 2

( Zoey doesn't have time to do exercises today )

Today she suddenly has an appointment with her friends, but she was planning to do the workout tonight.

Low-Fidelity Prototype

I create the low-fidelity prototype to do usability testing. The goal is that find out the problems that I didn't consider before. After I did the usability testing, I find out the three main problems.

  • First, the app should allow the user can modify the sport plan easily because the user might change their environment. For example, they get a new job, so they have to reset their sports program to fit it. Also, the user could progress fast than other users. Therefore, the user could change to the next level by themselves.

  • Second, when the users do the exercises, the users could choose the function that they prefer, such as pause/no-pause between each exercise, video explication/speak explication, or playing/no-playing music during the exercises. However, it's important that gives flexibility to the user and allows the user to choose what they want.

  • Third, using achievement goals to encourage the user to keep doing exercises. For example, the user can earn a special theme of interface, after they keep doing exercise for 1 month.

Check out the workout plan. 

The user can see the exercise each day.

 

I use 2 different colors to divide workout day and no-workout day.

 

When we scroll to other days, the "Today" button will appear, therefore we can press the button to back to today's workout. 

choose-day-mockup.gif
 
 
replace-workout.gif

Choose an exercise fit for you.

The user can replace other exercises with the default exercise.

 

I use the human center design and considers the user. The user can take the exercise that takes less time but burns the same calories. It also suggests extra workouts for the user.

Elastic day for your workout plan.

Plans always fall behind changes. The user has a chance to change today's workout to other days. The goal is to help the user keep doing exercise regularly.

 

We always have an unexpected appointment to interrupt our plan. This feature is a solution that the user has few times chances to change workout days to other days per week.

change-day.gif
exercise-detail.gif

Detailed analysis of each exercise.

The user can check out the instruction of exercise with images and videos. After the user checks out all information, they can click "Correct My Form" to recording their form and doing comparing.

Helps the user perfect their form.

Using recording to help the user correct their form by themselves.

Correct the form by yourself.

The user can compare their recording video with the professional video from the app. Below those videos, there are tips and a demo of the exercise to support the user to understand the exercise.

check form result.png

Multi-setting to satisfy the user's desire.

The user can set the option they prefer when they are doing the workout. For example, the user can choose the tip explication by text or by voice, the exercises automatically continue or manually change by the user.