Make the best athletes your personal trainer
Online courses to boost your sports performance.
About the Project
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.
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.
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.
- Illustrator & Photoshop
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.
Focus on Context to understand Users
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.
Job Stories instead of User StoriesAfter 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
The user flow is based on the job stories and focuses on the two main goals users want to achieve with "Become".
- 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."
- 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. "
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.
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.
"You are a returning user and you want to log in to your account and carry on with an active class."
"You are a returning user and you want to browse for an additional tennis class and check the lesson plan of the class."
I sorted all pain
points by priority and implemented participants’ feedback
into the next stage
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
Home PageThe 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."
Visual hierarchy is key
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.
visible progress bar for enrolled classes keeps users on
track with their desired goals.
- Class division in weeks to helps users to stay motivated
Minimize time – Maximize motivation
The class home's main goal is to encourage users to achieve their goals. It accomplishes this through:
- Progress bars for classes and lessons.
Exact investment of time for lessons.
Watching a Lesson
Not just a recorded
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
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.
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.
Pain Point 1
Users struggled to distinguish panels between active lessons and enrolled classes.
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.
Pain Point 2
Users were uncertain about taking
a class, due to not understanding
how much time a class
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.
Pain Point 3
Users missed the product placement section.
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.
"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.
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