Katarina Harth
UX / UI Designer
Made with

Make the best athletes your personal trainer

Online courses to boost your sports performance.

About the Project

Objective

Developing a mobile and web app that helps sports enthusiasts achieve their goals by taking online classes with the world's best athletes. 

This idea was developed to pitch to potential business partners in order to find a way to realize it.


Challenge:
Learning by doing is the main principle of Become. Users can start a class at home in front of their laptop and continue with it on the training ground. This approach has a significant impact on creating the UX/UI design. UX continuity across platforms mandated keeping the design simple and reducing it to only the most important elements, so users can focus on their training rather than learning how to use the program. Furthermore, it was crucial to find a way to keep users motivated to reach their fitness goals.


My role
As the main UX/UI designer, I was involved in all phases of the project, from mapping out the problem to delivering final designs. I worked with a digital marketing strategist to form a cross-functional team.


Tools:

  • Sketch
  • Illustrator & Photoshop
  • InVision
  • Balsamiq

DESIGN PROCESS

Design Thinking

The development process of Become was shaped by the principles of the design thinking methodology. It helped me to keep a solution and action-focused mindset within every design phase.

Make the best athletes your personal trainer

EMPATHIZING WITH USERS

Focus on Context to understand Users

Personas
Beginning the project, I created different personas based on online research and my understanding of personal acquaintances who are sports enthusiasts. Since users can take classes on the go, but also from home on a web app for desktop, I needed to take both interactions into account, when developing the personas.

Make the best athletes your personal trainer

DEFINITION PHASE

Make the best athletes your personal trainer

Job Stories instead of User Stories

After developing the personas, I next focused on figuring out when and why they would use Become. The when was crucial to the exploration of different contexts in which users would interact with the application to identify their motivations and desired outcome. 

For this process, I used the Jobs Stories framework developed by the people from inside Intercom to ensure a seamless user flow. It helped me to define key functionalities of the app:

  • Landing page of web app needs to have a different version – for first-time users and for returning users
  • Lead returning users to last destination page, so they can easily continue with an open class
  • Display course progress on the dashboard
  • Preview a lesson plan before taking a class
  • Read and give reviews about a class
  • Filter by sport discipline
Make the best athletes your personal trainer

User Flow

The user flow is based on the job stories and focuses on the two main goals users want to achieve with "Become".

  1. Continue with an enrolled class:
    "When I open an enrolled class, I want to see immediately the last lesson I stopped with, so I can jump right into it."

  2. Start a new class:
    "When I feel like improving my sports skills more, I want to be able to browse and filter for different classes, so I can find one that fits best. "

DESIGN EXPLORATION

Make the best athletes your personal trainer

Ideating Solutions

Low-fidelity-wireframes

After defining the overall structure, it was time to pull out the pencil. I sketched the low-fidelity wireframes for mobile and desktop. I conducted audits of different online learning and course platforms to discern common patterns and pain points.

The most challenging part was the dashboard design. It took a few concepts and revisions until I created a structure that was clear, concise and easy to use. I always reached out for feedback and tested the design with different individuals throughout the entire process.

PROTOTYPING

Mid-fidelity-Wireframes

The mid fidelity wireframes were built with balsamiq wireframing software. This step helped me to build a clear visual hierarchy and define all necessary UI elements. To figure out pain points at an early stage I used inVision to convert the wireframes into an interactive prototype to conduct user testing. All participants had to record their screen while executing both tasks, so I could evaluate their navigation behaviour.


The six precipitants had to achieve the two main goals of the user flow to indicate a successful design.

  1. "You are a returning user and you want to log in to your account and carry on with an active class."

  2. "You are a returning user and you want to browse for an additional tennis class and check the lesson plan of the class."


Make the best athletes your personal trainer

Test Results:

I sorted all pain points by priority and implemented participants’ feedback into the next stage of development.

The good news:
All users could complete both tasks successfully!

The bad news:

  • Some labels and icons were misleading
  • Dashboard did not clearly distinguish the difference between active classes and active lessons.
  • The logo was expected to have a backlink to the homepage

VISUAL DESIGN

Make the best athletes your personal trainer
Make the best athletes your personal trainer

Home Page

The home page needs two different versions depending on the user's entry point. Here I also referred to the job story framework to ensure a user-centred-experience.

  • "When I enter the home page the first time, I want to find deeper information about the classes, like customer feedback or class benefits, so I can decide if it matches my expectations."

  • "When I enter the homepage as a returning user, I want to go log in without being distracted, so I can easily continue my class."

Make the best athletes your personal trainer

Dashboard

Visual hierarchy is key

  • Multiplatform design for seamless usability.
  • Clean appearance without unnecessary elements
  • Strong typographic hierarchy to ensure easy navigation
  • Distinct header panel to help users continue with their current lesson without distraction.
  • Clearly visible progress bar for enrolled classes keeps users on track with their desired goals.
  • Class division in weeks to helps users to stay motivated

Make the best athletes your personal trainer

Class Home

Minimize time – Maximize motivation

Designed to keep users cognitive loads and decision-making time as short as possible to ensures the most important tasks are performed in the most efficient way.
That's why the focus is on a strong visual hierarchy, with the most important items in larger or bolder sizes to command users’ attention.

The class home's main goal is to encourage users to achieve their goals. It accomplishes this through:

  • Progress bars for classes and lessons.
  • Iconography

  • Exact investment of time for lessons.

Make the best athletes your personal trainer

Watching a Lesson

Building confidence

Not just a recorded video, this screen provides users with a summary of the main achievements to be gained by completing the class and advise them with the proper gear to boost their performance.

Implementing business thinking

The section about gear recommendations was a business-driven decision to build a connection between user needs and business goals. The challenge here was the product placement. Users shouldn't feel compelled to buy, but neither should they miss this section by proceeding to the next lesson without noticing it.

Make the best athletes your personal trainer

Mobile Version


TESTING WITH USERS

Finding Pain Points

I used inVision to create a clickable prototype and tested it with five individuals. Insights from the validation test led me to revise some of the screens. Below are the final versions, including some results of the user testing before and after implementing design solutions.

Make the best athletes your personal trainer

Pain Point 1

Users struggled to distinguish panels between active lessons and enrolled classes.


Design Solution:
I reworked the visual hierarchy and extended the panel for an active lesson to the edge. The larger size makes it distinguishes it from the other panels.


Make the best athletes your personal trainer

Pain Point 2

Users were uncertain about taking a class, due to not understanding how much time a class would require.


Design Solution:
A class timeline was added to the timetable, dividing a class into weeks to give users a detailed picture of the time needed to reach their new goals.

Make the best athletes your personal trainer

Pain Point 3

Users missed the product placement section.


Design Solution:
I changed the position of lesson navigation, placing the buttons have after the product placement. I decided against the alternative of placing products on the right side of the screen, because I didn't want users to perceive product placements as sponsored content.

WRAPPING UP

What’s next?

"Become" is still in the development phase, as we are looking for potential business partners in the sportswear industry to bring this idea to life.

Imprint

Picture Credits:
Author: Julian Manson; Titel: Patrick Makau; Source: Flickr; Licence: CC BY 2.0
Author: Peter Menzel; Titel: Naomi Osaka; Source: Flickr; Licence: CC BY-SA2.0
Author: NH53; Titel: Img_5358; Source: Flickr; Licence: CC BY 2.0
Author: Jimmi Baikovicius; Titel: Lionel Messi World Cup Golden Ball | 140713-9163-jikatu; Source: Flickr; Licence: CC BY-SA2.0
Author: Ronny McDonald; Titel: Robin Van Persie 2; Source: Flickr; Licence: CC BY 2.0