2020 - 2022

AI-Powered Training for Cyclists

Client TrainerRoad
Role Front-End Designer (Full-Time)
Work Type Front-End Development, UX Design

For nearly two years I worked as a Front-End Designer on the Planning Team, tasked with implementing a new set of AI-powered features for our athletes.

As a Front-End Designer, I had the unique task of working in both worlds of design and development. While spending a majority of my time writing code (usually in the form of styled React & React Native components).

I also served as the primary communication point for engineers implementing more complex logic, allowing our designers to focus on their craft while also ensuring that implementation was pixel-perfect.

This case study is an incomplete capture of the ongoing work being done behind the scenes.

Focus

Make training for cyclists more effective on an individualized basis, letting them spend more time training and less time planning. The product is available on 5 platforms (iOS/Android, PC/Mac, Web), and ensuring implementation consistency was a top priority for our team.

Experience

Progression Level Celebration

A landmark component of the feature includes a fully animated achievement screen that renders after athletes complete a workout resulting in an increase in their progression levels (a metric used to evaluate training, and powered by the new AI system).

While a simple layout, the timing of the animation took weeks of refinement to get right. The screen is not only dynamic, taking in fresh data from the recently completed workout, but is also re-used as a social media sharing feature in the app.

The animated achievement screen is shown to athletes after they complete a workout

The animated achievement screen is shown to athletes after they complete a workout

If I had one word to describe Anthony, it would be “optimist.” He has the uncanny ability to look at the positive aspects of any situation. This has impacts on a professional and personal level. I've seen Anthony grow throughout his career and become a high-performing employee. His tactical, business-objective mind is sharp with the ability to implement solutions efficiently.
Josh McCowen Profile Image

Josh McCowen

Chief Creative Officer, TrainerRoad

Adaptations Check Notification

One small but highly used component I worked on exclusively was the "checking adaptations" notification, which is shown every time a user logs in to their account.

The component first runs a "checking" animation which includes an animated version of one of our in-house icons representing the user's progression levels. And then if no changes are necessary, updates the notification and gently animates itself out.

Animated notification component to indicate to users when the platform AI was analyzing the user's data

Animated notification component to indicate to users when the platform AI was analyzing the user's data

Auto-Scroll Modal

One project I led independently was improving some of our in-house components on React Native to better support the more complicated layouts that our feature was introducing to the app.

An example of this was refactoring our base modal component to be dynamically scrollable, depending on the height of the content and the size of the device. This allowed us to ship more complex and taller content in our modals, without having to worry about any usability issues across different device sizes.

Refactoring our Modal component allowed us to ship more complex and taller content in our modals, while still being usable on all devices

Refactoring our Modal component allowed us to ship more complex and taller content in our modals, while still being usable on all devices

Anthony is one of the best designers I've had the privilege of working with during my career. He's proactive in his work, and a great communicator. He works well within a team, and is always responsive when it comes to asking for his help.
Matt Bowen Profile Image

Matt Bowen

Sr. Software Engineer, TrainerRoad

Pending Adaptations Overview

Users first got the ability to use AI-powered adaptations on their training plan, enabling a quick way to get back on track with training after missing a day, or a few.

To support this concept, we built an Adaptations Overview modal on all of our platforms, to clearly show to athletes what changes were being suggested by the AI-powered feature.

The most challenging aspect of this part of the feature was adapting the UI across all of our different platforms. We are not ashamed to say we did not figure it out on the first try, and thanks to a rolling beta process we identified improved ways to display the information.

This unique layout shows athletes when parts of their training plan is being adapted by the AI-powered Adaptive Training feature

This unique layout shows athletes when parts of their training plan is being adapted by the AI-powered Adaptive Training feature

Footer Quick Links

My work in perfecting the way our team's design implementation also crossed over to our marketing website. I built out these quick links located just above the site footer, to also include unique background images for each item on hover.

I updated the footer quick links on the marketing website to have unique background images on hover

Refactoring our Modal component allowed us to ship more complex and taller content in our modals, while still being usable on all devices

Front-end Implementation

Most often my work consisted of a lot of engagement with both designers and developers responsible for a feature. Developers would build out the basic functionality of a feature while not getting too caught up in the details.

Then, developers would hand off their work to me, so I can obsess over the finer details of the mock-ups and ensure the feature is being implemented as close to our designs as possible.

An example of a common implementation process, where engineers would hand off partially completed features and my job was to make it pixel perfect

An example of a common implementation process, where engineers would hand off partially completed features and my job was to make it pixel perfect

Anthony brings a keen eye for design and details, an ability to learn complex topics quickly and most of all an incredibly contagious positive and team oriented attitude.
Parker Lindley Profile Image

Parker Lindley

Software Engineer, TrainerRoad

Results

While the project is still under development, early feedback has been overwhelmingly positive. Athletes are making use of the new features with ease and can spend more time focusing on their training rather than adjusting and over-analyzing their planning.