The end-to-end design process for the FitFave mobile app
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.
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.
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.
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.
Information Architecture
I created the sitemap using FigJam to show the hierarchical structure of all pages available in the app.
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.
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.
Hi-Fi Prototype
I used the high fidelity prototype for more usability and design testing.
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.