Fitness-Live: Innovating
at-home fitness

Dear Reader

Thanks for stopping by. Before jumping in, may I suggest getting cozy with your favorite hot drink?
tl;dr? Vision / Discovery / Define / Ideate / Prototype / Conclusion


Note:

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. From here on, the company will be referred to as Fitness-Live. All information in this case study is my own and does not necessarily reflect the views of Fitness-Live.


Objective

Fitness-Live’s founder asked our team to explore ways to increase the number of booking sessions between trainers & trainees.

The Challenge

Ensuring that the app's social features are discoverable and intuitive

The first of its kind, Fitness-Live serves as an innovative two-sided marketplace that connects Certified Fitness Professionals with their Trainees through live, on-demand workouts. What truly separates this young start-up from the pack is the social training & monetization features built into the app’s live-streamed sessions. Think "Uber meets Twitch.tv."

The app has three core, yet highly differentiated users each with their own drivers and unique needs (trainers, trainees, & watchers).

Trainer

Certified fitness professionals selling their services through virtual Private or Social sessions

Trainee

Active users that book fitness sessions either privately or to monetize their social media following

Watcher

Passive users that drive engagement by cheering on those working out via live commentary and donations.

In the era of Snapchat, IGTV, and Twitch, public personas are earning hundreds of thousands showcasing their video gaming, DJing, and other talents online. Isn’t it time that fitness got in on the trend?

It was vital that our team explore why new users were disengaging from the app before understanding its social & monetization features.

Project Timeline

1 Month

My role

UX Researcher & Workshop Facilitator


The Vision

Alright, let's get started!
/ Discovery / Define / Ideate / Prototype / Conclusion


The Problem

Fitness-Live's users were dropping off from the app before entering the payment flow and converting.

The Solution

The research and design recommendations aimed to resolve this by improving:

User-Friendliness

Features are better understood, align with user mental models, and follow accessibility design standards

Sense of Trust

Improved trainer profile content and consistency in design layout throughout the app establish a sense of professionalism

Transparency

A clear structure and navigation creates recognizable design patterns and facilitates quick access to information

fitness app

Figure 1: Design Recommendations Prototype
UI Designs by Alex Jimenez

Discovery: Research & Planning

Thoughts so far?
Vision / / Define / Ideate / Prototype / Conclusion


Initial Research Phase

Planning Ahead

Before beginning our research phase, it was important that our team plan and organize how we would navigate through the design thinking process. I created a brief research plan to serve as our north star and to prevent the project from veering off track.

Acting as a sandbox for our initial thinking, the research plan introduced project scope and shaped our path forward through the following questions:

  1. Do users understand how to book a session?
  2. What motivates a user to book a 1-on-1 session?
  3. What do users really need in order to book a 1-on-1 session?
  4. Should Fitness-Live’s booking sessions follow existing design patterns or should we rethink the layout and flow?
  5. Are users aware of the social and streaming features of the app?

For the full plan, please see my Research Plan.



Industry Research

Exploring present and future trends of the fitness industry allowed the team to better design for the future states of the app.

Observed trends include:

  • Meteoric rise of virtual individual & group training exacerbated by the current global health crisis
  • The popularity of holistic lifestyles along with the increased awareness of mental health issues has caused a coalescence of the Fitness and the Wellness spaces
  • Apps that offer nutritional advice and meal plans must accommodate for variations in dietary preference if they want to compete for active users (vegan, ketogenic, etc.)
  • Personalization of health data is helping the Tech-Wearables industry continue to grow in popularity


Competitive Analysis & Feature Comparison

I began our research phase by conducting an analysis of products currently out on the market in order to identify areas of opportunity for Fitness-Live.

Insights & Trends

  • Health & Wellness Industry inundated by fitness apps
  • Live and On-Demand Video classes
  • Pricing models: Pay per class vs monthly/annual subscription plans
  • Common features include meal plans & nutrition, workout videos, fitness coach messaging, data tracking & personalized fitness plans, integrations with tertiary health apps and tech like smart watches and other wearables.
feature

Figure 2: Left - Feature Comparison, Right - Market Positioning

Everyone Gets a Survey

I conducted surveys through social media groups and forums in order to get a better understanding of perceived motivators for working out.

Initial feedback highlighted the following trends:

Gamification

Gamification of fitness seems to encourage engagement and user retention

Rewards

Extrinsic rewards, such as “gym swag” or gift cards, can play a part in encouraging positive, healthy behaviors

Competition

Competition against other users or friends promotes intrinsic motivation

Prospecting with surveys was a great way to get feedback from the community and gain insight into user motivations.

For surveys used throughout the project, please see below:



UX Audit

Heuristic Evaluation

Our analysis of the app’s current state revealed that it’s user friendliness was less than ideal. These were problems areas that could cause user’s to experience moments of frustration and leave the app. Users can get skittish when designs don't align with existing mental models. Too many deviations and they will bounce from your app.

Potential areas for improvement:

  • Iconography
  • Accessibility of color & type
  • Button formatting
  • Consistency of copy
  • Excessive use of mobile notifications


Usability Testing (Current State Testing)

We wanted to explore our initial assumptions of the current state of the app, validating or invalidating them in the process. The quickest and best way to do so was to place the app in the hands of users and watch their behavior. With our initial research questions ever present and unanswered, we decided to test whether users could navigate through the app without much assistance and then record their perceived satisfaction with the process.

Some Initial Assumptions:

  • The abundance of pricing flows and models leads to user confusion.
  • Users struggle to find the types of classes that they want to take.
  • Users will struggle to book due to confusing interface flow.

Users were given a series of tasks to complete, while we measured whether they could successfully find the information being asked of them and how long each user remained on task before giving up. For these tasks, I conducted the interviews and invited our designer to help take notes.

Surveys & Data



matrix
usability
survey

Figure 3: Heuristics, Usability Matrix, & Survey Scoring



Research Insights & Observations

The initial research phase culminated in the following insights:

Pricing Models

Users frequently confused the booking pricing with subscription plans and could not differentiate between the two

Searchability

Hiding access to search behind the book tab led users to associate its function with paying rather than for its intended purpose, exploring

Iconography

When icons don’t match user mental models, users misclick; leading to frustration and cognitive dissonance

Our goal as User Experience Researchers and Designers is to eliminate as many of these moments of frustration as possible. When they are allowed to quickly stack up, users will reject learning a new mental model and toss aside your app in favor of their existing patterns.


For additional heuristics, assumptions, & insights, please see my UX Audit.

Define: What & For Whom?

You're not tired yet, are you?
Vision / Discovery / / Ideate / Prototype / Conclusion


Interpreting Results

Grouping Ideas for Clarity

After our initial research phase, we had accumulated what felt like an absurd amount of information. But how were we to make sense of all that data?


It felt like we had dumped a jigsaw puzzle on the
table and thrown away the box


Enter our trusty Affinity Diagram. With a fresh, large pack of sticky notes, our team began adding any and all insights, facts, and quotes gathered from our user interviews and surveys to a blank surface. After a couple of hours, our collage of colors began to take shape and form a wall of organized information.

Relying on an affinity diagram helped us impose order on our data and disseminate information across the team by effectively communicating and organizing ideas.



Initial Observations

As the data point grouping continued, we noticed that themes began emerging. These themes didn’t necessarily point directly to user issues with the app’s booking flow. Instead, they further highlighted that an unintuitive app flow led to user frustration and drop off before they entered the payment flow.

Some initial pain points included:

No Information

A lack of information required to make informed purchase decisions

Low Quality

A lack of trust instilled due to low quality images or videos

Paywall

An unbalanced sense of value provided measured against the paywall


First impressions are everything. Particularly in the highly competitive fitness app space. If user’s do not trust your brand from the start, getting them to give you a second chance will be an arduous battle. One that we would rather avoid in the first place.



Personas

Replacing Ego with Empathy

Our users trust us to know them. It’s not enough to create a product and rely on marketing to drive engagement. UX design requires a deep level of understanding and perspective in order to successfully curate a truly rewarding experience. To achieve this level of understanding, we replace our egos with empathy.

We began by aggregating data on user demographics, goals and ambitions, hesitations, and intrinsic motivators to help create user archetypes. Creating these personas allowed us to answer the question, Who are we designing for?


Creating personas helped frame the frustrations experienced by users on the training side of the app.


Fitness-Live has three distinct user personas, all with their own reasons for using the app. For the scope of this project we chose to focus on active users, the trainees, and passive users, the watchers, as these were the primary users involved in the booking flow.



Site & Journey Maps

Mapping Our Way Forward

With our user personas in mind, it was time to begin exploring the layout of the app and the paths users took when making decisions. Our initial hypothesis that users struggled with the interface flow was validated during our usability testing of the app’s current state. But now new questions arose:


Why wasn’t the app intuitive for users to navigate through?

Which mental models were users relying on when using our app?


We began by exploring the most frequently mentioned apps from our interviews and then followed it up by prospecting similar verticals that employ booking as a feature. What could we leverage from these apps to reduce the confusion felt by users?

By evaluating the aggregated data through journey mapping, we were able to better disseminate information amongst the team, providing everyone with a deeper understanding of user struggles.

Moreover, cataloging and grading the severity of problems uncovered helped us effectively communicate opportunities for improvement to our stakeholders.



journey map
affinity map
personas

Figure 4: User Journey, Affinity Map, Personas


Insights & Problem Framing

When Users Disengage Early, You Lose

The themes mined from the data along with the perspective gained from our research methods led to the creation of our How Might We problem statements. Ultimately, we determined that Fitness-Live was losing user engagement too early in the purchase cycle.

The user interface did not follow best practices, leading users to struggle finding the information they required to make purchase decisions. Additionally, users cited low image and video quality as a reason for developing a sense of mistrust towards the professionalism and authenticity of the fitness platform.

Our analysis translated into the following problem statements, which we felt would best guide our future thinking and address the observed pain points.


How might we get users excited to book a session?


How might we make the app more intuitive for user navigation?


How might we better convey the quality of trainers?


How might we educate the users on the social aspects of the app?


Ideation: Purposeful Creativity

May I suggest a refill?
Vision / Discovery / Define / / Prototype / Conclusion


Brainstorming

Idea Sparks and Sorting

For the first round of ideation, our team decided to return to our trusted sticky notes and rapidly brainstorm potential solutions to our newly defined problem statements. No idea or concept was off limits.

Four fifteen minute rounds later and we had a wealth of potential solutions that might address our users pain points. Some solutions seemed ingenious. Others were so far-fetched and comical that they bordered on science fiction. However, this type of thinking freed up our creativity and helped us explore solutions that we would otherwise have overlooked.

In order to prioritize our solutions (and their feasibility), ideas were moved into four quadrants (Must, Should, Could, Won’t) where we weighed their impact against the relative effort required to implement them. The process was repeated another time using only the ideas in the Must and Should quadrants in order to further emphasize the most critical and/or cost-effective solutions.

sticky notes
sticky notes
sticky notes

Figure 5: Remote Brainstorming

Workshopping with Stakeholders

For our second round of ideation, we decided to invite our primary stakeholder, the startup’s founder, as well as the project’s Lead Developer to participate in a brainstorming workshop.

Our strategy here was two-pronged. First, we challenged ourselves to come up with solutions otherwise missed or glossed over during round one. Second, collaborating with management helped in getting buy-in on the UX process. In order for stakeholders to trust our recommendations, Researchers and Designers cannot operate behind veiled design practices. Our aim is for upper management to integrate UX into corporate strategy and not disregard it as an expendable creative branch of the business.



New Ideas to Explore

Our collaborative sessions gave us plenty to work with and many new ideas to validate (or invalidate) during prototyping. Some of our new assumptions included:

  • Using a drawer during videos may improve the viewing experience for users who want to workout, while still allowing watcher's to engage when they want
  • Providing all the necessary information users need on the trainer profile may lead to more informed purchase decisions
  • Providing users with a personalized Home & My Sessions page may increase the user's sense of control and improve overall trust
  • Booking should have its own unique flow with clear call to actions and language
  • Replace onboarding flows and excessive notifications with in-app loading screens can serve as an effective tool to teach users about the app's core features


For additional ideas, please see our UX Study.

Prototyping & Testing: More Questions

Are you still with me? You're almost there.
Vision / Discovery / Define / Ideate / / Conclusion


Improving the User Experience

Shaping our Vision: Initial Prototyping

Our goal with the initial round of prototyping was to ensure that users intuitively understood how to book and to give them the ability to enter the booking flow from multiple touch points across the app at the appropriate time in the purchase cycle.


Pushing users to enter the flow too early would not give them enough time to thoughtfully evaluate the app; enter too late and the business suffers.


The research revealed decisive opportunities in the user journey where users consider entering the booking flow. These included the trainer’s profile, the Watch page, and our new My Sessions page.

booking
booking
booking
booking

Figure 6: Booking Flow Prototype
UI Designs by Alex Jimenez


Rapid Testing

Iterative Idea (In)Validation

I conducted a study to assess the booking flow of our High-Fidelity prototypes. We aimed to improve the overall ease of use and simplicity of flow of the Fitness-Live mobile app by reducing user misclicks, using clear and understandable language, and inviting users to learn more about the app's features.


We want to give our users the tools they need to make informed purchase decisions at the perfect moment in time.


Some questions explored during interviews included:

  1. What do you believe is the core feature of this app?
  2. What do you expect to see on a trainer’s profile?
  3. How would you proceed to book a session from this screen (trainer profile, watch screen, and home screen)?
  4. What do social and private sessions mean in the context of this app?
  5. What do you expect to happen when booking an instant session?

For my interview script & full list of questions, please see my Prototype Testing Script.

For additional insights, please see my User Insights.



Interface Updates, Product Solutions, & Better Experiences

Improving the Watcher Experience

In its current state, the Watching screen is visually underwhelming and technically complicated. During our initial usability testing, none of the participants tested successfully booked from this page.

Our updated version aims to solve this by including a drawer on the screen to group important calls to action. Those watching can enjoy an uninterrupted video interface, while anyone wanting to engage can easily do so. By opening the drawer, users can now access booking, learn more about the trainer through a bio snipper, and navigate to their profile to explore.

watch page

Figure 7: Watcher Engagement Prototype
UI Designs by Alex Jimenez

Revamped Trainer Profile

The trainer profile presented another decisive opportunity to nudge users into the booking flow. Users naturally choose to learn more about an individual trainer before deciding to purchase a workout session with them. However, the app's current design fell short of addressing the needs of its users.


Users cited social proof, trainer specializations, and profile image quality as the top 3 qualifying factors for booking.


The updated design focused on:

Social Proof

Added star ratings, followers, and session count. Reorganized recorded content

Visual Update

Profile image size was increased and quality improved to boost first impressions

Information

Trainer bio now includes workout specializations, badges, certifications, & trainer workout intensity


In addition to providing users with the information they require to make informed decisions, we also performed a quality of life update on the page. Color accessibility was an issue and the language used confused users. Interviewees were unsure what the "Train Now" and "Train Later" buttons meant and were fearful of being thrown into a session unprepared.

trainer profile

Figure 8: Trainer Profile Prototype
UI Designs by Alex Jimenez

New My Sessions Page

Users want a degree of control over their past and future training sessions. They need a clear way to quickly enter the booking flow without having to query the app first. We hoped to accomplish this by introducing the personalized My Sessions page. This newly added option invites users to flexibly control their training appointments and fitness schedules. The upcoming session cards give users all the necessary details about their purchased workouts and includes the option to edit or cancel appointments.

Our recommendations led to:

Stronger CTA's

Strong, clear call to actions nudge users to convert, instead of confusing them with cryptic language

More Control

Users can now flexibly control past and future training sessions in accordance with their schedules IRL

Improved Navigation

Navigation through the booking flow in step-wise function reduced error states and frustration from misclicks

Within the My Sessions page, users now have an understandable call to action, the Book Now button, for easy entrance into the booking flow. Standardizing the booking language across the app with strong CTA's, resulted in a clear grasp of button functionality and the elimination of the fear associated with misclicks observed during testing.

Additionally, the new sessions hub gave us the opportunity to optimize the actual booking flow for clarity and simplicity. Breadcrumbs were added to help users identify their place in the booking flow. The calendar feature visually indicates which days are available for booking reducing time spent on the scheduling step.

sessions page

Figure 9: My Sessions Prototype
UI Designs by Alex Jimenez

In-App Education

One of the present challenges that the app faces is educating new users on its core features, particularly the social fitness and monetization features. Fitness apps currently on the market, like Peloton, offer live and recorded classes but only offer one-way viewing. Trainees are simply able to join "group classes" and watch their coaches teach a class.

Fitness-Live not only adds the personalization of creating a FaceTime-like connection between the trainee and their coach, but then allows that video interaction to be broadcast and streamed to an audience. That audience, the Watchers, can then choose to workout with participants or cheer them on through likes, comments, and donations.


This raised the question: How do we educate users on these social features?


During testing, I asked users what they understood to be Fitness-Live's social features and zero testers got the answer correct. This was a problem... and our solution needed to be multifaceted to tackle it.

Improvements made included:

In-App Hints

Make use of natural breakpoints to educate users using in-app tips and hints

Concise Explanations

Add brief explanations during moments of decision to help users make better informed choices

Clear Language

Use understandable language that matches user mental models when describing features

First, we observed that natural breakpoints existed in the app between screens. We decided to make use of these moments and replace the current opaque buffer screen with Did You Know delighters that educate users on the app's features or that offer health tips.

Next, within the booking flow we introduce an intermediate step where users can select whether they want to book a social or private session. When booking, users need to select their session type before proceeding to scheduling a date and time. This presented as a natural place to educate users on a core feature of the app. Information would auto-populate on click of a button switch.

Finally, the app also offers instant sessions where interested users can book a session on the spot with an available trainer. In its current state, this feature took the form of the Train Now button that confused users. In order to accomodate this on-demand feature, we added an Instant Session option on the calendar page with a similar explanatory section below.

hint page

Figure 10: Hints Prototype
UI Designs by Alex Jimenez

Conclusion: Much More To Do

Nice! Thanks for sticking with me.
Vision / Discovery / Define / Ideate / Prototype /


Final Takeaways

Overall Improvements

The initial redesign of the app garnered positive feedback from interview participants during testing. Insights gathered showed that users have a better understanding of the app's core features and when questions inevitably arise, they are better equipped to quickly find the answers they're looking for.

Overall our redesign improved/increased:

User-Friendliness

Features are better understood, align with user mental models, and follow accessibility design standards

Sense of Trust

Improved trainer profile content and consistency in design layout throughout the app establish a sense of professionalism

Transparency

A clear structure and navigation creates recognizable design patterns and facilitates quick access to information

Research Conclusion

Positive Feedback & Handoffs

Still in the early stages of the startup lifecycle, Fitness-Live has shown promises of success. Combining the magnetism of social networking with an innovative live-streaming concept should help the young startup separate itself from the myriad of fitness apps on the market. Now, more than ever, we're in need of better ways to connect with one another and keep healthy as we all cope with this global pandemic.

During the handoff, feedback was positive. We discussed future next steps and our recommended backlog for future design sprints. More importantly, we successfully conveyed the importance of UX research, strategy, and design. Designing product experiences without user feedback is like playing pool in the dark... near impossible without divine intervention.

Part of the redesign included UI concepts for a Watch page pre-screen and a personalized Home page. These concepts were a result of the insights I gathered during user interviews and the research phase. Our goal here was to provide the stakeholder with a jumping off point for future design sprints. These ideas have yet to be developed out but received promising feedback from users during initial testing.

Future Sprints: Backlog & Unanswered Questions

Backlog

  • Test the most recent High-Fidelity prototypes and create iterations based on data points gained
  • Redesign Watch screen based on High-Fidelity testing

There are always more questions:

  1. How might we design an intuitive search flow?
  2. How might we use gamification to design a Wallet feature?
  3. How might we design user profiles and/or a personalized home screen to boost engagement and app retention? (Two separate sprints)
  4. How might we design a Donations flow that promotes altruism?
  5. How might we design the Instant book flow?
  6. How might we design an intuitive Social Leaderboard that encourages competition?
Appendix