UI / UX Case Study: Keep Fitness App

Keep: Workout & Fitness Trainer is a fitness app which this project rethink to a new concept, by providing the personalized meal plan and healthy meal delivery to users. Users will get their meal plans based on their fitness status. They can also order the meal from this app, and the meal will send to their doorstep.

For users, it is a convenient fitness app that provides personalized fitness & meal plans and healthy meal delivery for the user to order their healthy meals and do workouts just in one app.

Project Request:

In this project, I am required to rethink the existing fitness app and identify the user pain point and develop corresponding creative solutions to meet both user and business needs.

Result:

A healthy meal delivery feature was added to this fitness app so that users got no worries about their diet meal preparation.

Project Duration: Sep 2021~ Dec 2021 (3 months)

Target Audience: College students (18~25 years old)

The project will divide into 4 sprints

  1. Research Sprint
  2. Concept Sprint
  3. Usability Sprint
  4. Handover Sprint

Research Sprint

Problem Statement

For: Jason, a college student

Who: Have difficulties and no time on preparing diet meal

Our Service is: Fitness App x Meal delivery App

That could: Deliver pre-packaged diet meal to user doorstep

Unlike: MyFitnessPal, HealthifyMe

Our Solution: Cross-over with Akly — a healthy food delivery platform, where users can order diet meals personalized to their fitness status in simple steps

User Persona

User Persona

Research Objective

  1. To know user behavior & goal currently
  2. Understand more about the difficulties & problems they encounter when using the fitness app on the market
  3. To know more about their need in user experience
  4. Find out whether they are eating diet meals to help them reach their fitness goal faster

Research Procedures

  1. Research basic info about Fitness App
  2. Make a list of questions for an interview in the google form
  3. Schedule a meeting, confirm the timing
  4. Check and refine the interview
  5. Arrange interview and meet with the user to collect info
  6. Sort out relevant data & check whether there is any missing opinion in the user’s interview
  7. Generate info results & insight from the interview

User Interview

For the first round of interviews, I find out 5 young people who have experience using the fitness app and 1 young person who has no experience using the fitness app but has experienced a workout with a diet meal.

Interview question: https://forms.gle/MJFiAmZsq5bptUZW8

Interviewees Schedule List

Insight

  • 50% of interviewee doesn’t work out with diet meal, they feel that is very troublesome to make the diet meal. The other 50% of interviewees get benefit from diet meals.
  • 50% of the interviewee feel that it is not necessary to eat diet meals, but they will do some adjustments to the eating habit.
  • 1 out of 3 interviewees who prepare her diet meal feels that sometimes is hard to get the same ingredient as the online recipe.
  • 66.7% of interviewees have no personal trainer. 33.3% of interviewees would feel that personal trainer is redundant after MCO.
  • 66.7% of interviewees have different reasons that lead them to do exercises. ( Better body shape, gain weight, be healthy) They are more self-aware that they should start exercising instead of someone telling them that they are in an unhealthy state and should start exercising.
  • 16.7% of interviewees search workout tutorials through Youtube, 83.3% of interviewees download a fitness app to help them reach their fitness goal.
  • 83.3% of interviewees did not have a personal coach, as they think it is expensive. 16.7% of interviewees spend RM150 for a personal coach per session.
  • 83.3% of the interviewee will face issues such as no motivation, forgetting to work out, and eating everything without counting the calories without a fitness app.

User Journey Map

This hypothesized user journey map is showing Jason as a fitness app user for maintaining a healthy life encountered problems and his experience process.

User Persona (hypothesized)
User Journey (hypothesized)

Competitor Analysis Research

Based on the targeted app that I research, I’ve taken 4 different apps and listed down some of the features as a comparison between them. Look for differences and pros and cons between applications.

Product Competitor Board

Full Research Sprint Link:

https://www.canva.com/design/DAEyS_S8ACs/ko5d7nM2bvwJC8I9Rq128g/viewutm_content=DAEyS_S8ACs&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton

Concept Sprint

UI/UX Audit

According to the app I research to craft a UI/UX audit, from various aspects of the detailed assessment and summary of the app usability and functionality.

UX Scorecard_analysis
UX scorecard_form

Feature Matrix

By listing down the existing features and new features, using the matrix way to get the result that best addresses the current user’s needs.

Features Matrix

New Feature Proposal

  1. Healthy meal delivery
  2. Journal
  3. Payment screen
New feature proposal _ Healthy Meal delivery
New feature proposal _ Journal
New feature proposal _ Payment Screen

First Wireframe Prototype

1st Wireframe design
1st Wireframe prototype

Concept Test of prototype

Interview Question Link: https://forms.gle/sETPTQAWuwZrVJ8f8

AB Test Question Link: https://forms.gle/fLMfeRXgpzmvraA37

XD Prototype Link: https://xd.adobe.com/view/e820389a-d5c2-4b57-9072-c365a39223de-bd73/?fullscreen&hints=off

Concept Test Result

AB Test Result

Full Concept Sprint Link: https://www.canva.com/design/DAEyhbAXZIU/2KEpdpSy-0rT_wvs3q5Vtg/view?utm_content=DAEyhbAXZIU&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton

Usability Sprint

Moodboard

As a fitness app positioned to let users feel comfortable with energy in daily life. The appearance plan is to use a modern yet minimalist design to increase user engagement.

Design Keyword

  • Sporty
  • Minimalist
  • Glowing / Illuminating
Overall Artstyle
Layout
UI Design
Icon Design
Chosen Typography — Axiforma
Workout Image style
Meal Image style

New Sitemap

User Flow

Hi-Fidelity Screen

Usability Test

Interview Question Link: https://forms.gle/yNFjpL9zeLapFXcD7

XD Prototype Link: https://xd.adobe.com/view/d5e54d13-fcbd-4a7d-8aa3-8b7526d56d2e-80b6/?fullscreen&hints=off

Hi-fidelity screen design
Hi-fidelity prototype

Full Usability Sprint Link:

https://www.canva.com/design/DAEyY4WiHhQ/X-mpetXLBh7KR22U-lx4Og/view?utm_content=DAEyY4WiHhQ&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton

Handover Sprint

Final UI Screen

Onboarding screen
Assessment Screen
Home Page
Personal Fitness Plan Page
Meal Ordering Page

Style Guide

Screen Mockup

Key Learnings

  1. Conduct user interviews by crafting questionnaires that can know the user’s pain point.
  2. Keep asking “why” to the user, to dig the reason behind the answer they give.
  3. Do consider the developer. The idea can be very “wow” but always need to check back the cost of adding this feature into the app. Can the developer afford it? Will the added feature bring money for the developer?

Final Thoughts

UI/UX design seems easy to achieve, but the workload behind a nice UI design is beyond my imagination. Designing a nice UI/UX, not only the design but also includes understanding the users’ needs and their pain points. From their feedback collected, still need to analyze them and think of a creative solution to help user to solve their pain point. After a long time of surveying and analyzing, it comes to the design part. After the design, it needs to come across a few rounds of refinement to improve the design. Finally, the whole UI/UX design is done!

The workload of this UI/UX design is huge, but the whole process was fun and enjoyable. The fun part was the user interview. Although it is part of the project, I see it as relax section in this project. Chatting with friends and part of my project is done.

Doing this assignment make me understand how the workflow in this industry. Special thanks to my lecturer, Din, who taught me the skill sets of designing UI/UX. And my fellow friends who participate in my user interview. Thank you!

--

--

--

Digital Media Student, Study in The One Academy

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Systems thinking & chess: When the iceberg model has 64 squares

Image of a queen chess piece on a chessboard.

Bbq Baby Shower Invitations Templates

Bbq Baby Shower Invitations Templates

7 Steps to Building your Dream Home

Role of Culture in design research and process though dance

Agency Work: It Takes a Village

Duck Art

Building the Metaverse

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
See Fang

See Fang

Digital Media Student, Study in The One Academy

More from Medium

UX Case Study Mixcloud App

T-savari — The Mobile app redesign — UI/UX Case Study!

Case study: Opulence, an expense tracker

A thumbnail for the application, Opulence: An Expense Tracker

Ledge— Money management app | UI UX Case study