Home Fitness Mobile Apps
by Raudina Asrining Putri

Fit Me: Stay fit in anywhere

Project Overview

This project is to create a design of home fitness mobile apps for those who can't manage their exercise routine on a several situations.

This project is guided by The Interaction Design Foundation as an individual project in Design Thinking class.

Timeline

August 2020 - October 2020

My Role

UI / UX Designer

Problem Statement

People can't manage their exercise routine because of their busy schedule and they need something to keep them stay motivated to exercise.

Goals

- Create design of home fitness  mobile apps   to help people    manage their    exercise   routine
- Make people stay motivated to  exercise to    achieve their own    goals
- Provide an effective, simple and   non-time    consuming exercise for    a busy    workers

Target Group

People who want to exercise more, but for various reason, they don't get around to it.

Constraints

- Limited budget
- Limited resource

Home Menu
User Research

I used 2 methods in this research, user interview & probes for context mapping. I conducted user interviews with 6 participants (on their 20s) who don't exercise as much as they would like to, and also who are smartphone users.

I tried to figured out why my participants want to exercise, what concretely happens when they do manage to exercise and what concretely happens when something prevents them from exercising.

Probes for context mapping

On the user interview, I learned and tried to find out my participant's habits and their motivation to exercise. Otherwise, on the probes method, I tried to get my participants to reflect differently on the way they exercise. I give them task for a week based on their interviews.

Define Problem

I collect the information that gathered in the user research. I made a synthesis and developed the understanding about my user's need. Then, I started to create an affinity diagram to analyze and identify the major themes in my data

Affinity Diagram

Affinity diagram provides a clearer overview of the most important themes in my collected data. After that, I drew an Empathy Map to chart how user's talk, act, think and feel.

Empathy Map

After reviewed each theme in my affinity diagram, I wrote down significant quotes and keywords in the relevant quadrant. I looked at each quadrant and translate it into user needs related to that quadrant.

By using affinity diagram and empathy map, I developed user personas to define the type of person that I am designing for.

User Personas

I defined the stories about 3 main characters for user personas to gather the major motivation, needs, goals and their pain points.

User Needs, POV and "How Might We"

Based on the personas, I wrote down the needs and defined a POV to crystallize their needs by selected 3 key user needs. Then, I convert the key points into actionable prompts by asking "How Might We" question.

After all the define methods I created, I made a synthesis of my participant's problems which I will turn into design challenges in this project.

1. They can't manage their exercise routine because of busy schedule
Most of my participants are an office workers. During an interview, they said that they rarely exercising because they do not have much time. On the weekdays, they have to get up early in the morning and go back to home at night. When they were going back from office, they were already exhausted because of the long trip or they had to get stuck in the traffic for an hours.

2. They don't feel motivated because they are alone
People are feel more motivated to exercise when they are accompanied by friends. When they are exercising with friends, they feel less bored and spend much time to exercise. My participants said that they can chatting with each other during exercise and feel more energized, so that they can exercise longer than when they are alone. They also said it's good to have someone that always remind them to exercise

3. They start to exercise because they influenced by others
Another reason that make they decided to start exercise is because they see people's achievement. When they see someone's achievement, like their body goals or healthy lifestyle, it makes them want to try it too. they are feel more motivated because they are triggered by other's succeed.
Ideation
I tried to visualize user's journey or how users would experience a problem or product by drew a storyboards that I would captured it in a series of sketches later.
Storyboards

After I faced user's problems, I tried to find the solutions and came out with some ideas that might be added into this apps, including:

1. Quick workouts
Because most of people feels like they do not have much time to exercise, I tried to figured out a kind of non-time consuming exercise. Then, I came for some quick workouts which is less than 7 minutes with several difficulties.

Quick Workouts Menu

2. Exercise with friends
Since there are a lot of people feel more motivated if they are exercising with friends, I came up with an idea to added video call feature while exercising, so that they can do the exercise together.

Workout Overview and Main Screen

3. Feeds
Some of my participants said that they feel triggered by others and started to do the same things. So I added a feeds or timeline that consist of people's updates every time they finished their exercise.

Feeds of people's updates

4. Leader board
Most of people feels happy and try to do better if they receive the rewards. So I tried to give a points every time they finished the exercise and rank them on a leader board like a game.

Leader Board

Prototype and Testing
I started to make a prototype by creating a user flow, and then I drew the design sketch into a paper. After that, I made a low-fidelity prototype which will be used in user testing with 9 participants before I turned it into a final design.

User Flow
Before I drew some sketches, I map out the elements of the app and connect them as a user flow. It shows the paths where user can navigate the app and to get to the specific elements. I created a simple flowchart to show the flow.

Flowchart

Prototype
I drew the design sketch into a paper. I drew all the main menus to present my earliest design ideas. On the paper, I saw many ineffective elements for the apps. After several improvements, I decided to turned the design sketch into low-fidelity prototype.

Design Sketch

Low-fidelity prototype

Usability Test
Before I turn the prototype into a final design, I did a usability test twice, to get a quick feedback with total 9 participants using low-fidelity prototype.

I prepared some tasks for the user testing. So they can operated the application based on the task that I given. On the first test, 4 of 5 people were confused of the challenges menu. They can't find where the challenge menu is.

Move the challenges into main menu

So, I decided to separate the workouts and challenges option and move them into Home menu. Besides that, 3 of 5 people can not found the My Progress menu. I made My Progress menu inside the user profile. They did not expect that profile icon can be clicked.

Move My Profile into the navigation bar

Then, I decided to change the navigation bar into icons and move My Profile menu into it. I also gave the task to user to join the challenge. User only can join challenge once at time. So I made a kind of condition in which user already joined one challenge, and a warning notification will be appeared on screen. It notify the user to reset the progress first, on My Progress menu, before join another challenge. Users found it ineffective because they have to go back to home and then go to My Profile menu.
Join challenge notification warning

On the 2nd test with 4 people, everything was cleared. They gave me advice to added notes and exercise rate for ourselves. So I decided to add notes and effort rate at the end of the exercise in the final design, and display it on the My Progress details.

Exercise End, My Progress and details

With a home-workout application with video-call feature, user feels like a real exercising with friends. Although users can not look at the phone all the time while they are exercising, but the presence of other people with their voices, will give them more spirit. People's face on a screen also make the user feels like being watched. So that, they will exercise longer than usual.
Main Screen
Style guide
Click Here to The Interactive Prototype
Lessons Learned

This is my first project of designing a user interface for mobile application. Therefore, I was in doubt and not sure that I can completed this project all by myself. Although I am completely new in UI and UX design, and also I am not skilled yet on several design tools, but I was trying to do it step-by-step. Because I have a strong will to become an UI and UX designer. I trust myself if other people can make it, then I can make it too. I told myself that it is okay to make a mistake, because I am still learning and will always learning to become a better designer.

The first thing that I learned in this course is how to empathize to other people. How to understand people, how they feel and how they interact with something. What I think is good, is not necessarily good to other people too. In this course I have learned how to lay aside my egos and tried to look on the other people insights.

I feel so happy to be a part of this project. Although I am not perfectly skilled yet, I will try my best into a better designer. Finally I can found something that I loved to do. I would like to thank IDF, my participants and all of the people that always supporting me until now :)