Healthclub TV

Brief: Our client, Healthclub TV, is an online fitness platform that allows users to build their custom workout playlists. Our goal is to improve the web experience of the platform.

Project Description: A redesigned web experience that meets needs of two distinct user groups based on a solid understanding of each user group's mental model. 

Team: Monika Bolzon

My Role: User Research, Stakeholder Interview, Data Synthesis, Design Strategy, Wireframing, UI Design, Future Proposal

Duration: 3 weeks

Tools: Axure RP, Principle, Photoshop, Illustrator, Excel, PowerPoint

 
 

Problem Definition
––––

 

A mismatch between information provided and information needed

The website had a large amount of information and content for the two user groups: trainer and trainee. However, we heard from both user groups that some of the information was confusing and irrelevant to them. On the other hand, users were missing important bits of information they are looking for. 

 
 
Existing online fitness platform

Existing online fitness platform

 

How do we provide a friendly user experience for trainers and trainees who have distinct expectations and goals when using the platform?

 
 

Final Concept
––––

 

Designated home pages

We customized the home pages for trainer and trainee and presented the content they are most interested first. Since the biggest incentive of the platform is workout video clips, we decided to showcase these clips on the home pages.

 

Trainee - home page

Trainer - home page

 

Differentiated work flows

By differentiating the works flows, different user groups see the benefits they care about most from using the platform.

 
 

Trainers main goal: customize workouts efficiently

Trainers main goal of using the platform is to build custom workouts for their clients.

By incorporating the hover-over options, trainers have instant access to preview a clip or add a clip to their workout. 

 
principle-hctv-interaction-gif
 

Trainees main goal:
browse workouts

Trainees want to find effective workouts they can simply follow. Therefore after signing in, trainees are directed to a page for them to browse already-built workout playlists.

 

 

Manage workouts at one spot

All the workouts users built or selected are stored under the menu of "Created By Me" or "Saved From Library" for easy access and quick editing. 

 

Accessible filter

Filter categories were reduced and terminologies simplified for users to easily access and use the content.

BEFORE - current design

filter_before.png

AFTER - proposed design

filter.png
 

Design Process
––––

 

USABILITY TESTING

Running a usability testing on current website with the user groups helped us quickly discover their pain points and prioritize our tasks. In addition, we got to know trainer's and trainee's mental models of using the platform, which later guided our design decisions.

 
 
 

UNDERSTANDING BUSINESS NEEDS AND VISION

In order to understand where Healthclub TV locates in the landscape, we mapped out the main competitors on a matrix. From the analysis we learned that Healthclub TV is currently targeting more on the trainer side instead of end user side. As the business goes forward, it is planning to move towards a more end-user-friendly direction. 

 
 
 
 
 
Healthclubtv-swot.png
 
 
 

DESIGN STRATEGY

Based on business goals, user research and competitive analysis, we came up with 5 areas as our design focus.

 
 
Healthclubtv - design strategy.png
 
 

Mental Models - Trainers and trainees have distinct mind sets and different goals to achieve. Therefore, we decided to separate the website into two paths for the two user groups. The strategy is to only present the relevant information and features to each user group.

Content Accessibility - Content is the biggest asset of Healthclub TV. In our design, we stressed to simplify the flow for users to access the content and build custom workout playlists.

Value - In order to grab user attention and have them sign up, we need to introduce the benefits of using the platform upfront.

Beginner Friendly - By removing excessive information and simplifying terminologies, the platform appeals to users with varying training knowledge and experiences.

Trust - Users expect to try the content for free before they pay. By offering them a free trial, Healthclub TV creates trust with the users.

 
 
 

PERSONAS

Before jumping into design, we built personas to help us keep the users' mental models in mind.

 
 
 

CONCEPT DEVELOPMENT

Our design went through a series of changes. We first brainstormed our ideas on a whiteboard, then we further developed the ideas on paper. Finally, we brought our design into Axure and turned it into an interactive prototype that could be tested by users (click here to see detailed explanation of low fidelity wireframes).

 
 
 

USABILITY TESTING

With the help of UT, we were able to observe users engaging with our design. We then documented the testing results on an excel sheet and categorized the findings on a shared document. Besides the qualitative data, we also got the quantitative data from the users, through which we clearly saw an improvement of the approval rate from the current website to our prototype.

 
 

Organized usability testing results

 

PRIORITIZED UT RESULTS

 
 
 

QUANTITATIVE ANALYSIS

 

We compared survey results from two rounds of testing: on the Current website and our Prototype. It confirmed that we are going in the right direction but there is still some space for improvement.

 
 
 

Next Steps
––––

According to user expectations, business plans, and competitive landscape, we came up with future proposals based on the impact and ease of implementation of these features.

 
 
future-proposal-explaination.png