FITFLOW: UI/UX Case study

Case Study for a Workout App

An app created to provide users with achievable fitness goals and meal plans.

FitFlow aims to make the experience for staying fit “flowy”, without pressuring oneself into impossible to follow workout regimes and strict diets.

How many times have you given up on working out just because you don’t know:

1. HOW to start?
2. WHAT to do?
3. WHAT to eat?

Pandemic has forced us all to stay at home and find alternatives to stay fit without going to the gym and it comes with its own set of problems which FITFLOW tries to solve.

Interviewed six individuals, to empathize and understand what the major pain points are, and to gauge the level of problems faced.

Performed competitor analysis to understand the user pain points.

Insights:

• Majority of users lie in the age of 15 to 55 years old.
• They generally workout by going to the gym, or going for walks, home, etc.
• Most of the apps available in the market provide a generic plan for all its users.
• There is little or no incentive to keep going in the program.
• Around 60% people find it hard to follow diets and workout regimes.
• Around 50% people find it hard to get back on track once having fallen off.

Pain points:

• Workouts are not catered to different body types’ needs.
• Hard to track progress in workout programs.
• Difficulty in deciding workouts for each day.
• Hard to follow diet plans.
• Lack of information about dietary content and calorie intake.

FITFLOW solves the hurdle of selecting workouts and meal plans for everyday by providing a customized plan suited for individual body types and goals.

Information Architecture

Designed an Information Architecture to lay out the initial flow of the app. The main focus is to provide the users with clear solutions with maximum ease and minimum cognitive effort.

Wire-framing

Sketched wireframes to structure the initial ideas and implement the iterative process of ideation with possible design solutions.

| Welcome Screen

Objective: Clear, Concise and Creative way of explaining the functionality of the app with a distinct call-to-action button.

| Setting Up

Objective: To collect user information to cater the workout and meal plans accordingly.

Behind the Screens:

1. Progress bar: to indicate the progress and state of setting up; Zeigarnik Effect
2. Added more graphic options to reduce cognitive load

| Today

Objective: Displays the curated workout and meal plan of the day.

Behind the Screens:

1. Highlighted the premium feature to attract user’s attention and
2. Workout and Meal completion indicators; Goal Gradient Effect.
3. Know your recipe at a glance, making it easier for the user to choose a meal of their choice.

| Progress

Objective: Provides the overall progress in the ongoing workout program along with personal bests and achievements.

Behind the Screens:

1. Includes a calendar to show progress and keep you going; Goal Gradient Effect.
2. Shareable badges earned by different activities.

| Community

Objective: Provides the sense of community by giving a space to share workouts, recipes and tips!

Behind the Screens:

1. Includes challenge section where users can sign up for multiple challenges.
2. Familiar UI (like, comment, save) for the social feature; Jakob’s Law.
3. Quick call-to-action buttons to invite friends and family onboard.

| Profile

Objective: Provides all the essential features related to personal information, preferences, payments and support.

Behind the Screens:

1. All crucial features included as a main settings; Hick’s Law.

FITFLOW aims to ease the whole process of selecting a workout on the mornings you are lazy and the evenings you are tired. It also saves you from that extra burden of following through an impossible meal plan.