Amazing design story of My Workouts app

Some people like to keep track of their workouts and some don’t. I love keeping track of mine. Nowadays there are tons of workout diary apps out there. One more would not hurt anyone, right? So I decided to go ahead and design my own to train my UI design muscles. These are the breath-taking steps of My Workouts app -design project:

1. Users and user goals
2. Design inspiration
3. User flow diagram
4. Initial wireframes
5. Usability test
6. Realistic mockups
7. Prototype

My Fitbit was not happy with the number of steps

 

Step 1: Users and user goals

All designs should always start with knowing who the target users are and what are their main goals. For this project the target user was me and the main three things I wanted to do with My Workouts app were:

1. Record workouts: to log them manually or to get the data from a wearable device
2. View and edit workouts: the activity type, date and duration
3. See stats: weekly, monthly, yearly

As a nice to have I also wanted to include a “Share my year in workouts” – feature. That’s something I’m always missing at the turn of the year. And I haven’t seen that in other workout apps that I’m familiar with.

 

Step 2: Design inspiration for an workout app

To gather some inspiration and common design patterns, I took a look at couple of workout apps in the market: HeiaHeia, Fitbit app, Sports tracker and Twiik. These apps offer similar functionalities I wanted to include in my practice project. So I was able to identify some common design patterns.

Color palettes of these apps varied. Some preferred blue tones, which can evoke feelings of stability and trust. Some preferred red tones, which can evoke feelings of energy and intensity. I wanted to do something energetic as well, but with a personal touch. So my color palette would include PINK.

I also checked pttrns.com for more design pattern inspiration. And Material Design Guidelines to see some of the design principles I should keep in mind.

 

Step 3: User flow diagram

Now it was time to draft a user flow diagram including my main user goals. For this task I used Miro online whiteboard.

User flow diagram

 

Step 3: Initial wireframes

Next I used pen and paper to draw initial wireframes for each step in the user journey. I used Marvel App to create a clickable prototype of the hand-drawn screens. This tool was new to me, and I was happy to find out it was quick and easy to use.

Initial wireframes for My Workouts app

 

Step 4: Usability test

Before moving further I wanted to test the initial wireframes. So I did a quick usability test with one test user. I found couple of improvement needs and included them in the next step.

Usability testing

 

Step 5: Realistic mockups

The next step was to create realistic mockups. I did it with Sketch. I designed and used symbols for my commonly used UI elements. To pick pinkish but still professional color palette, I utilized material palette. Common icons I got from material icon resources.

Realistic mockups

 

Step 6: A prototype of My Workouts app

As soon as I had couple of screens ready, I started to create a clickable prototype out of them. For this I used InVision. In this step I also revisited the page flows I made in step 3, and made sure they flowed naturally. The aim, as always, was to let the user reach her goal as directly as possible.

Check out the end-result in the video below:

Cool-down

As a conclusion, these are the main take aways from this design project:

• It’s important to use existing design guidelines, color palettes and icon libraries
• It’s essential to usability test as early as possible
• It’s awesome train your UI design muscles in the domain that really interests you. THAT is what made this project it so amazing! :-)