Case Study

bFit Mobile App & Responsive Website

cs_bfit_1_2

Project Overview

The Problem

More than a quarter of the world’s adult population (1.4 billion adults) are insufficiently active;

Worldwide, around 1 in 3 women and 1 in 4 men do not do enough physical activity to stay healthy.

Levels of inactivity are twice as high in high-income countries compared to low-income countries;

There has been no improvement in global levels of physical activity since 2001;

Insufficient activity increased by 5% (from 31.6% to 36.8%) in high-income countries between 2001 and 2016.

The Goal

Create a mobile and web app that improves people’s lifestyle by engaging them in fitness activities that help them reduce the risk of chronic diseases or improve their overall health.

The Product

bFit is part of a health system owned by a European organization that aims to learn people from all categories to have a healthy lifestyle sustained by a fitness schedule,  healthy meals, and a better connection with nature.

My Role

UX designer leading the app and responsive website design from conception to delivery

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.

Project Duration

October 15th to November 10th, 2021

Understanding the User

I have used the data available World Health Organization’s reports to conduct user interviews. Most interview participants know that they should make more physical activities to sustain a healthier lifestyle, but didn’t actively try to do something about it because they either don’t know where to start, or don’t know what exercises to do.
The feedback received through research made it very clear that users would be open to engage in more physical activities, mostly into a fitness schedule, to improve their overall health and sustain a healthy lifestyle if they had access to an easy-to-use tool to guide them through their daily workouts.

Personas & Problem Statements

Joan

Joan is a teacher who needs to find good workouts based on their daily schedule because they need to take care of their health and raise energy levels

Sean

Sean is a business owner who needs to make a workout routine that combines with their busy schedule because they like to stay in good shape and healthy.

Competitive Audit

An audit of a few competitors’ products provided direction on gaps and opportunities to address with the bFit app.

Ideation

I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on workout plan scheduling and easy to take workouts.

Starting the design

Digital Wireframes

After ideating and drafting some paper wireframes, I created the initial designs for the bFit app. These designs focused on delivering personalized guidance to users to help them create a workout schedule and workout even more when possible.

Usability study findings

To prepare for testing, I created a low-fidelity prototype. I used this prototype to conduct an unmoderated usability study with 7 participants. Here are the main findings uncovered by the usability study:

Create

People want easy access to create personalised workouts that follows their schedule.

Schedule

Most people wanted to change the date and time of some specific workouts from their plan.

Workout

People with visual impairment wanted to be able to broadcast the workout session on their TV to be able to see the exercises better.

Refining the design

Mockups

Based on the insights from the usability studies, I applied design changes like providing a clear section from the home screen to create a personalised workout plan or take a recommended challenge.

Additional design changes included adding options to broadcast the workout to smart TVs or to put it on fullscreen to help people with visual impairments see the exercises better.

Accessibility Considerations​

1. Added options to broadcast the workout to smart TVs or to put it on fullscreen to help people with visual impairments see the exercises better.

2. Clear labels for interactive elements that can be read by screen readers.

3. Initial focus of the home screen on personalized recommendations help define the primary task or action for the user.

Refined Designs

High-Fidelity Prototype

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.

Responsive Website Design

Sitemap

With the app designs completed, I started work on designing the responsive website. I used the bFit sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.

Responsive Designs

With the app designs completed, I started work on designing the responsive website. I used the bFit sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.

Going Forward

The Goal

Impact

Clear labels for interactive elements that can be read by screen readers. Users shared that the app makes them workout more. One quote from peer feedback was that “the bFit app can help me get stronger and improve my lifestyle.”

What I learned:

I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.

Next Steps

1. Research

Conduct research on how successful the app is in reaching the goal to help people make more physical activity.

2. Features

Add more educational resources for users to learn about the benefits of having a good fitness schedule.

3. Rewards

Provide incentives and rewards to users for doing more workout or if they keep their schedule. 

Let's Connect

Thank you for your time reviewing my work!

If you’d like to discuss more please contact me