Competitive analysis

I compared 3 of the top fitness apps on the market that provide users with workout programs, meal plans and progress tracking.

It was clear that FitNation needed to provide customers with a generous amount of features and content before they would consider subscribing to any in-app services or add-ons.

Interviews & Affinity Mapping

I conducted 7 interviews consisting of 19 questions and 1 usability test of the existing FitNation app. I used an affinity map to gather insights and categorise them into groups.

WHAT DO USERS REALLY WANT?

I identified that users wanted personalised plans, information from health and fitness professionals, easy methods of tracking progress and affordable meal and exercise plans.

Personalised & tailored plans

Advice from qualified coaches

Easy goal & progress tracking

Affordability

IDEATION

I collated the findings and insights from the user interviews to create user personas, a problem statement and hypothesis to validate the app and features.

USER PERSONA

Based on the insights, data and findings gathered from the user interviews, user personas were developed to identify potential users of the FitNation app.

Selecting a USER PERSONA

I focused on the goals and needs of one primary user persona.

Addressing the goals and needs of one goal-directed persona allowed me to examine the process and workflow that this user would undertake in order to achieve their objectives when interacting with the FitNation app.

Creating a Story for my persona

I developed a user story for my persona, giving her an end goal and motivation to use the app.

The user story was a short abstract that consisted of a problem, my hypothesis and an assumption on how they would use the app to reach their goal and measure their success.

FEATURE DEVELOPMENT

To prioritise the features needed for the product MVP, I conducted a card sort and matrix prioritisation. This allowed me to create a sitemap of the app and it's features.

Card sort

I gathered needs, pain points and important insights from the affinity map and interviews to create a list of features.

I conducted an open card sort with 4 participants. Using OptimalSort, each feature was placed on a ‘card’ and the participants were required to categorise them into categories to assist in the organisation of the app and it’s features.

Matrix Prioritisation

I created a matrix prioritisation from the card sort results, which revealed valuable insights and statistics.

We were able to identify what features we needed to prioritise and explore how participants grouped cards and created labels, revealing similarities and patterns and general information.

Analysis

I organised the features into groups and begin the information architecture of the app.

We can observe 6 groups that were created from the card sort process which would ultimately lead to them becoming main features and functions in the FitNation app, found on either the Home screen or bottom navigation bar.

Sitemap

I created a sitemap using the groups and features obtained from the card sort.

The Home Dashboard would be at the top of the hierarchy and all the main categories and features would be accessible from this screen.

JOURNEY DEFINITION

With the user story in mind, I developed 2 task scenarios for my user persona to undertake in order to reach her goal.

user story RECAP

Alyssa has a summer tropical getaway in 12 weeks and needs to tone up and lose as much body fat before she leaves.

The scenarios I developed required my persona to:
1. Choose a personalised meal plan
2. Choose a personalised workout program

These scenarios allowed me to develop a user flow to track the user's movement through the app, mapping out each and every step the user takes—from entry point right through to the final interaction.

user flow

I created wireframes of each screen Alyssa would interact with to reach her end goal.

This is the user flow she would take to select a meal or workout plan to reach her goal. The red arrows mapping how she would select a meal plan and the green arrows mapping the flow to select a workout program.

PROTOTYPing, testing & Design

The final phase consisted of the prototyping process and interface design. Every prototype was tested and iterated upon until the final user interface was developed and approved.

Low-Fidelity prototype

I conducted a low-fidelity prototype test with 2 users using the wireframes from the user flow diagram.

I started off by defining the scenario and introducing the persona Alyssa, her goal and my hypothesis. I then defined the task ahead for the user to complete.

Low-Fidelity Test

I observed how the users interacted with each screen and noted down any questions, comments, actions and hesitations for later analysis.

I conducted a post test questionnaire with each person for any additional comments, ideas, or elements that were unclear or confusing.

low-FiDelity observations

Overall, both users found the prototype straight forward navigating through the flow, but I observed 4 pain points.

Observation #1

The plan descriptions were too long and too much information for the user to comprehend.

Observation #2

The user wasn’t aware this was a form to fill out and in what order it had to be filled out.

Observation #3

The goal descriptions were too short and not enough information.

Observation #4

Both users were not aware of the ‘Next’ in the top right corner.

Mid-fidelity prototype

I reviewed the user test feedback and implemented changes to the low-fidelity designs.

I introduced new design elements such as buttons, numbers and headings to reach the mid-fidelity designs. Once these changes were made, I conducted another user test using Invision to obtain more feedback and to observe if there were any pain points in the updated design.

Revision #1

I added a 'Start Plan' button to guide the user to select a plan. The second was a 'question mark' button for more information. I also needed to revise the text in the description.

Revision #2

I added a heading instruct the user to complete form with numbers to guide them through it.

Revision #3

I revised the goal description and added a 'Select' button to guide the user to select a program, as well as a 'question mark' button for more information.

Revision #4

I implemented a large 'Next' button so users would know how to proceed to the next screen.

High-fidelity prototype

I tested the mid-fidelity prototype for any pain points and reviewed the feedback I received.

There weren't too many problem areas or major changes I had to make due to the constant revisions and user testing. I started to focus on introducing visual details such as images, fonts, colour and iconography. The Invision prototype was highly functional and interactive at this stage.