FitFave (Case Study)

The end-to-end design process for the FitFave mobile app

FitFave

The ultimate choice for your personalized fitness experience at the best price.

THE PROBLEM

Hard to find effective and affordable fitness options that offers a personalized experience.

THE AUDIENCE

16 – 60 year olds who love to keep fit and have a healthy lifestyle.

THE IDEA

A personalized and affordable app for fitness lovers to keep fit with their favorites (e.g athletes, trainers).

My Role

I was the product manager and UI/UX designer in the lean start-up environment. I worked on the product from the discovery to the delivery stage, and supported the designs. I also collaborated with another  PM to make some decisions.

design process

My Process

Research

Gain knowledge of the context, technologies, competitive products. Gather user data, conduct interviews and field studies.

Synthesise & Define

Use affinity mapping to find actionable insights and build personas. Define the problem, user goals and needs.

Hypothesise & Explore

Formulate the hypothesis and ideate the possible solutions. Build user profiles on gathered data, produce materials that will aid the outlining of the project, site maps, content inventories, screen flows, navigation models, task flows, user journeys, and scenarios. Test and revise the hypothesis.

Prototype

Start with low fidelity prototype, iterate and then build an interactive hi-fi prototype.

Test & Measure

Evaluate design with stakeholders to obtain feedback and conduct usability testing.

Deliver

Complete design and produce deliverables. Work with the PM, BA and developers closely.

RESEARCH

Discovery Interviews

I conducted open-ended user interviews to explore people’s challenges, their motivations and habits in the area of fitness.

Through the interviews, I was able to find out the common pain points and the differences in people’s habits.

Two important responses that formed the user personas are highlighted.

Competitive Landscape

I also did a more detailed research to understand exactly what the competition was doing. Here is a summary of findings.

SYNTHESIZE AND DEFINE

Needs and Painpoints

I used data from the discovery research to analyze the user’s behaviors, needs and pain points.

Needs and pains

Personas

To help me focus on the target users throughout the entire product design process, I worked on the personas based on the discovery research.

Jenny
Johnson

HYPOTHESIZE AND EXPLORE

Problem Statement

Johnson needs a better way get effective fitness routines he can engage in from home, because he doesn’t want to go to the gym and feels unmotivated most times while using other fitness apps.

Hypothesis​

I believe that developing a mobile app that allows users to access fitness routines of favorite athletes, trainers etc, will solve the problem.

Measurement

We will know it’s succeeded based on the number of users actively using it and the number of transactions through the app monthly.

Feature Prioritization

I prioritized the features based on business goals and users goals. The MoSCoW method is an effective and easy way to priorities the features.

Business Goal: Have a large number of transactions going through the app monthly.

Users Goal: Having a personalized and effective fitness experience that keeps them motivated.

features

Information Architecture

I created the sitemap using FigJam to show the hierarchical structure of all pages available in the app.

architecture

User Flow

User flow is the path taken by a prototypical user on a website or an app to complete a task. This user flow shows from the start through a set of steps towards finding and engaging in fitness routines.

userflow

PROTOTYPE AND TESTING

Low-Fi Prototype

I used a low fidelity prototype to mock up the product quickly and tested the ideas as early as possible.

I analysed the details of the testing result and observed that the users were ready for the hi-fi designs.

Low-Fi

Hi-Fi Prototype

I used the high fidelity prototype for more usability and design testing.

Hi-Fi

Clickable Prototype

I created the clickable prototype with Figma to show the final product experience.

I tested this prototype with users (usability testing), so as to approve a hand-off to the developers.