Athletes are a gritty bunch who strive to reach their audacious goals. TrainingPeaks connects athletes with the tailored training tools to keep them on track to reach, and go beyond, what they ever saw possible. This is the story of how we transformed the TrainingPeaks mobile app to better serve athlete’s needs.
As lead product designer for this project, I conducted research and led out on all UX and UI deliverables. This included a research plan, session guides, readouts, wireframes, and low and high fidelity prototypes.
I worked alongside product management, engineering, data, and QA over the course of this 4 month project. Each team member played an integral part in the the completion of this work, and brought a unique perspective to the table.
This work was implemented on TrainingPeaks’ iOS and Android mobile apps in Q1 of 2018.
Athletes were dropped into a complex app with no guidance. Imagine walking into a train station as a child with no parent to navigate. That’s kind of what landing in TrainingPeaks was like. The athlete may have had an idea of why they wanted to use the app, but once they created an account and landed in the app, they were lost and confused. What’s worse, TrainingPeaks is a powerful tool and these athletes were missing out on the value TrainingPeaks could bring to their training. Needless to say they were abandoning very, very quickly, unaware of just how valuable this tool could have been for them. Of those athletes that (somewhat miraculously, in my opinion) did stick around, we learned that they would leave the app, and head to Google to try to understand how to use the product. It should be noted that athletes who put in that type of investment generally had heard of TrainingPeaks, and had an idea of the power of the app before downloading it. The quick abandoners tended to have no prior knowledge, and we failed to give them any ground to stand on.
Mobile app usage amongst our athletes was on a steep incline, yet we were only giving a partial experience. Before creating a home tab, users landed on the “feed” (see above image). For users with existing workout data (this is data from a fitness device such as a running watch, that they were prompted to connect to TrainingPeaks during onboarding), they could see their history here. Unfortunately, unless you are an athlete with a coach, a training plan, or have planned your own training, the feed was just a list of past workouts. Furthermore, new users, with no historical data, would come to the app, see an empty calendar, and have no indication of what to do next or how TrainingPeaks could help them train and reach their goals. The experience was demotivating, and the general reaction in testing was that of a let down.
We needed to understand the user value, the business value, and the problem we were setting out to solve before starting any design work or solutions. We used qualitative and quantitative research and data, along with stakeholder interviews and workshops to help paint the picture for us.
Hypothesis: A Home tab on mobile will guide athletes on their training journey and show them the value TrainingPeaks brings to helping them achieve their race goals.
VALUE AND OPPORTUNITY
Themes emerged from the research that allowed us to hone in on the value we could bring to the athlete and further distinguished our primary user for this work. We would focus first on the uncoached athlete who is new to TrainingPeaks - based on our data, this user type had the most to gain from an improved app experience.
Armed with qualitative data from user interviews and surveys, as well as quantitative data on app usage, we decided to create a home in the mobile app for athletes to get an “at a glance” view of their training and include some hand holding throughout their experience. This home experience manifested as a navigation overhaul - we added a new tab to the main nav, aptly called, “Home.” and we landed all new users on this tab.
The goal of this work was to:
Give a clear understanding of how TrainingPeaks works and how it can help you train for your race.
Create an experience where athletes could come to the app and have a clear understanding of their fitness, see their improvements, and stay on track to reach their goals.
The home tab was to become a space for athletes new to the product to get a view into the power of TrainingPeaks. This new tab would provide a snapshot of their fitness journey; and serve as a place where they can feel proud of their accomplishments, stay motivated with an event countdown, review their week over week progress, and access today’s training plan.
The design phase started with user flows, drawings, and low fidelity wire frames to communicate the layout and basic information architecture.
I ran team brainstorms and design studios as a way of getting all of our ideas onto the table. From there, I would refine and create prototypes to test from the best ideas.
I broke the screen into 3 main sections to address each of the opportunities we gleaned from the research. Throughout each section we made sure to include context and tool tips to help the athlete understand what they are looking at and how it helps them.
About me (celebrate the athlete)
Race and workouts (Stay motivated, here’s what to do today)
Weekly Snapshot (Track your week over week progress)
Breaking up the screen in this way allowed us to test iteratively throughout the process and get feedback on each piece while moving forward on other pieces. This process also allowed us to collaborate more quickly with engineering.
Test it. measure it.
Throughout the design process I ran internal stakeholder reviews, sent out surveys, and conducted moderated, remote and in-person usability testing using InVision prototypes.
Testing regularly throughout the design phase gave us the ammo to simplify the UI down to the essentials. Our cycles of testing and refining improved the usability and value of the screen in a way that we never could have without user feedback. TrainingPeaks was new to this type of process and they quickly realized the value, as there is nothing more validating (or cringe-worthy...) than watching users interact with your product.
We were able to make some important improvements from this feedback before releasing to the public
We saw a great deal of positive feedback in the beta and continued to make small, yet meaningful improvements
It’s not over when you release…
Notable Updates made post release:
Workout(s) of the day
Future weeks in the weekly snapshot
Workouts can now be swiped (iOS) or long press (Android) to edit, comment, or delete
Take a look
Was it successful?
• People are adding a lot of events to their calendars. 37% of athletes that landed on home last weekend did not have an event on their calendar. This has led to a huge spike in event creation.
• Feedback has been positive. 91% of all feedback directly about Home (tweets, facebook comments, instagram comments, reviews, CS tickets) has been positive.
• Users want to learn more. Last weekend, we had almost 10,000 taps on the three info bubbles on Home. We are viewing this as a positive indication that users want to learn more about their data and what it means.
• Comparing the average of the 3 weeks before release and the 3 weeks after release there is a 25.9% increase in mobile subscriptions.
1 year after release:
• Overall Athlete Home has been hugely successful in creating an improved experience for athletes and the rise in subscriptions has remained steady.