Progressio

Progressio, a mobile app for professional athletes making progress and advancing to their goals.

Goal for this project:
To create an intuitive and effective way for athletes to understand their progress, view their assignments, and communicate with their coaches. To become the only app professional athletes use in their training lives.

My role:
UX designer in a team of 4.
Conducted user interviews, synthesized insights from user research, facilitated ideation, built wireframes, conducted usability testing, and designed prototypes with interactions and UI.

Design brief from the client

Client:
Amplio.ai, a start-up focusing on using AI to create digital twins of athletes to help athletes track and understand their bodies better in order to make better decisions on how to improve their performance.

Users:
Professional athletes from universities, professional teams, Olympic Teams

Users’ needs:
Understand how to gain an edge in competition by being targeted in their workouts.

Objectives:
Amplio needs a mobile app for athletes to see their progress from Amplio’s AI technology. The app also has to provide other key features for athletes’ needs, such as workouts and communication with coaches.

Verify users’ needs
- User Interviews & Synthesis

We conducted 6 user interviews to understand the training lives of professional athletes and verified if their needs did exist and were worth solving.

Before the interviews, we did comparative and competitive research to gather information to be familiar with this industry and design questions for interviews.

Competitive research for fitness and health industry

Our interviewees included Olympians, professional basketball players, professional skiers, and an NCAA student-athlete. After 6 interviews, we found out even though they were in the different sports fields, they shared similar pain points in their training lives.

“It's not a sport of constant victories and improvements. You deal with injuries or not feeling great...”

Above is a powerful quote from one of the interviewees. One pain point is that, even though athletes work out in 3-4 week increments, they also need to assess their progress on a longer-term basis to know themselves better and get through discouraging time.

We got a lot of valuable insights from the interviews, and started to synthesized them by using my favorite tools, post-its and sharpies plus a whiteboard.

Affinity Mapping - We organized all the insights from the interviews and narrowed them down to several themes.

We categorized all the insights to different themes and prioritized the importance of those themes. Then we had 4 findings for our design directions.

Workouts

All the athletes we spoke to clearly valued personalized workouts and only questioned workouts when they felt they didn’t provide adequate recovery time to prevent injury.

Tracking

All the athletes we spoke to log their own data and notes in various places, making it difficult for them to analyze when they have a chance to sit down with their coach.

Communication

Athletes value one-on-one and in-person interaction with their coach, and they are used to this communication focusing on how they can improve not only on a personal level, but also what role they will play to enhance the team.

Progress

When athletes perform poorly, they want to know what happened so they can change it and improve their performance.

Ideation and our challenges
- Wireframes

Before we jumped into our next steps, which were the brainstorming and design session, we reviewed our research report with the clients to discuss the feasibility of some ideas and prioritized the design directions.

During our ideation part, we faced our first challenge that was difficult for us to make a design decision.

Our challenges:

How to show progress?
& What defines progress?

We had many meetings to discuss how to show progress and how to define if they have progression in their training sessions. We sketched several different ways to show progress meanwhile including their goals and actual data.

Design
- mid-fidelity clickable prototype

After several discussion, we designed our first prototypes (medium-fidelity and clickable) to conduct usability testing.

Before doing usability testing, we showed it to the clients to get feedback first and made sure we were at the same page.


We decided to combine radar and ring charts to show progression.

This chart would be the first thing when athletes open the app.

Validate with users
- Moderated usability testing

We conducted several moderated usability testing with professional athletes. After finishing all the tests, we synthesized feedback and validated that showing progress was our challenge for sure because most users found it difficult to understand and interact with.

“I don’t want to feel stupid when I open an app.”
Findings:
  • Too much data at once
  • Users don't understand the trend line
  • Wanted to see upcoming workouts first
  • Users understood running efficiency concept, but not what individual indicators meant

Workouts

Message

Library

"This would be very close to how I would journal."
“Great that the message thread is about the workout so I can go back to it if my coach assigns it again.”
“Is this where I put my notes?”
  • Highest value
  • Loved ability to take notes on individual workouts
  • Wanted workouts categorized with rest time
  • Wanted workout summary
  • Confused by pie piece
  • Liked that accessible from assignment page
  • Workout in question, auto populated
  • Users liked educational aspect
  • Didn’t actually use feature
  • Too much information at once
  • Not accessible
Something's wrong here:
The priority of the information

Iterate

After understanding the problems from our mi-fi prototype and how users interacted with it, we had many research (about data visualization and competitors), sketches, and discussion to redesign the progression feature to show data to our users.

At the beginning, we wanted to delete the whole progression section.
The data would be seen only by clicking into the ring at the homepage.
After researching data visualization, we decided to use line graph to present their progression.
After many meetings and discussions with clients, we learned what was the most important information to show, and what should be put in the second layer.
Every iteration is to simplify our design.

Redesign the progression feature
- Hi-fi prototype

Here are the final deliverables to our clients.

The major changes are the homepage and the progression feature.

Use dashboard as our new homepage.

Athletes can see:
  • workouts
  • current progress status
  • goal
at the same time without being overwhelmed when opening the app.
The progression feature is separated to have its own section.
We prioritized the information to show the most important data in the main progress page. Athletes can click into each one to learn more details.
For comparison mode, athletes can drag the dots to see the results.

Other features

Besides progress, there are other main features in this app.

Workout

Athletes can easily check off workouts, see more details and add personal notes of each workout.

They also can send messages to adjust their workouts directly from here.

Communication

Easily send message to discuss workouts with coaches.

Simply request 1-on-1 meeting with the coaches.

Next steps

We included a dashboard as the homepage for this application and strongly recommend further developing it and having more tests. This design decision is based on findings from our usability testing that athletes do not want to be confronted by a set of data points up front.  

This app is planned to be launched in 2020 summer.