UX-research: Fitness app

I have done some research and created information architecture and a small prototype on three sites from a fitness app that should work great for people who are travelling a lot, and need help with fitness programs.

Design thinking: A non-linear process

Design thinking is a framework that UX-designers can use in order to tackle big, complicated or even largely unknown problems in product development. It is an important thing to be aware of before starting the process of a new product. You can look at it as a research plan.

  1. Empathise

The first thing I began with was conducting secondary research by reading and searching around after other websites that focused on fitness on travel. And I did find some apps that really would be at good help - but i think a lot of people would love to have these apps combined. You will most probably have to have more than just one of the apps.

Fitbod
Fitbod create workout plans for you that includes exercises, sets, and repetitions based on your abilities, goals, and available gym equipment. But the dumb thing here is that it is mainly based on your tracking and goals. The app will not help you find a gym, or create workouts fit for outside the gym or where you are.

Strava
Strava is a very well-known fitness app that a lot of people use. But the app focuses on tracking your workouts, rather than giving you workouts. BUT! A very good thing with Strava is that the app gives you routes you can jog, cycle, ski, or swim nearby. Therefore, it will give you help, and information based on where you are. But you will not be provided with workout routines or anything when it comes to other forms of training.

Nike training club
The Nike app is what you can see as a digital personal trainer. It is a good app if you have availability to a decent gym. So, if you have a gym available, you will access a ton of different workout routines. But the app does not adapt to where you are in the world.

2. Define

When defining I wanted to get a clear view on an assumption persona. Who is going to use this site?  The good thing here is that I already have some information about my users. The app/site is going to be created for people who like to keep in shape, even though they travel a lot. My user will most probably stay at a hotel that has a gym available but would need quick and easy routines as well as hard ones. 

When defining I wanted to get a clear view on an assumption persona. Who is going to use this site? And why do they want to use it? So, I created an Empathy map. This will help me understand the user’s mindset, and then also help me understand a assumption persona. 

The empathy map is about when a person decides on a workout right before having to go to a different location:

Brainstorming

After conducting the secondary research and creating the empathy map, i also decided to do a brainstorming session. This is to get more information/assumptions on my primary persona. To do this I asked myself a few questions to answer, using the 5w’s technique:

Who will be using the website?
People who are on travel a lot, but finds it important to stay in shape and workout - even if they are on the go.

Why will the user use the website?
Because the app will provide them information and help, to make workout on the go more efficient and also better!

Where will the user use the website?
All over the world, where eveer they are.

When will the user use the website?
When they are traveling. So probably on a hotel or another place to sleep on travel.

What device will the user use?
They will be using mostly a mobile, but it should be available on tablet an computer as well.

Information architecture

Information architecture, or IA, is the structure for the website, app or product that allows the user to understand how to use the product and where they can find the information they are looking for. It dictates the user flow and user experience. (I have been told to create IA for the different devices but in my opinion the IA can be the same here. I want the devices to look as similar as possible).

The main purpose of creating an information architecture before starting to wireframe is to organise and label your information into a structure that will help users find it quickly.

The key things that i find important that this app contains, which will be included in the IA are:
- Running tracs (such as in Strava)
- Training programs
     + Strength, Cardio, Yoga
- My page
     + Settings, My stats, Saved programs
- Planned workouts

I have also created a user flow to show the stages a user might go thorugh when deciding for a ­p­­rogram to use:

3. Wireframe Ideation stage

The goals of the ideation stage is to generate ideas, that potentially inspires newer and better ideas to solving the challenge. I start with Sketchstorming; creating low-fidelity designlayouts that are quick to make and cheap to make. For creating wireframes for the app, i need to make atleast 3 to 5 different wireframes. I have choosen to create them by the mobile first thought in mind, so the wireframes will be for the mobile view.

Sketch storming
I set the timer for 45 minutes, to skecth different wireframes for the website. My sketches where very rough, just to try out different scenarios and ways the site would move.

4. High-fidelity-Prototype

Afterwards i created three screens with high-fidelity-prototype of the wireframes.

5. Visual design

Colors
The colour pattern is very low key and simple. The app it self only has greyscale + one bold color that stands out when needed. This way it is easy to mark important elements on the site. The colors are also very digital colors, that looks good on screens. The grayscale is also used to create shadows in the UI, which creates depth to the site.