TrainingPeaks Calendar Refresh

TrainingPeaks Calendar Refresh

Read about the research behind the latest TrainingPeaks Calendar updates, including color and font changes for an improved user experience.

Our goal at TrainingPeaks is to create a robust platform for coaches and athletes that is also user friendly and intuitive. To lay the groundwork for future product enhancements, our team focused on improving the TrainingPeaks calendar. The calendar refresh consists of key changes that we believe will make your experience more seamless and cohesive. These changes include:

  • Changing calendar card color so as to increase legibility.
  • Changing workout icon color so as to reduce athlete confusion and improve consistency.
  • Adjusting the titles, subtext, shape and iconography of workout cards for greater consistency and ease-of-use.

Accessibility-compliant Color Combinations 

We’ve all had days where we’ve missed a workout and a red card pops up on our calendar. The guilt of seeing an incomplete workout might not be the only reason why you have trouble looking at this card. The black text on a red background is not easy to look at or rather, “visually accessible” (see Figure 1). To be visually accessible, there needs to be enough contrast between the background and text to be read by people with moderately poor vision1

Poor vision users aren’t the only ones affected though. Poor color contrast causes users to experience more eye strain. It can also ‘impact short-term memory and one’s ability to maintain attentional focus2’. To combat these problems, we left the bright compliance colors at the top of workout cards and toned down the rest so as to achieve a high contrast visual for the card’s text areas (Figure 2). TrainingPeaks users can still quickly scan compliance on the calendar, but can now easily read stats and titles within these cards. 


Figure 1: The old TrainingPeaks workout card does not meet WCAG 2.0 accessibility standards. The color of the text and background need to have a higher color contrast to allow for easier reading and less eye strain. 


Figure 2: The updated TrainingPeaks workout card now meets WCAG 2.0 compliance for background and text contrast. The compliance color has been moved to the top of the card and the title and body of the card have high contrast against the background.

Color Consistency 

Have you ever added a walk workout to your calendar? What color do you imagine seeing? Did you think mustard yellow…?

Color is an important part of the TrainingPeaks platform. For example, green tells you you’ve completed a workout. The colored notification bubble can signal when to complete an action. We have found that our current color use for workout icons can actually confuse new athletes and coaches. While conducting interviews with users, we found that many did not understand why one workout icon was one color versus another (Figure 3). Did it mean it needed attention? Did an orange cross country ski workout mean it would be harder than a blue running workout? 

Instead of having these additional colors on the calendar, we want to be intentional with color signals. For all future workouts, icons will be TrainingPeaks blue (Figure 4). This will make it easier for users to scan the calendar to see what is planned for the future versus past workouts. New users will not have to guess what each color is supposed to mean when paired with compliance colors and other UI elements.


Figure 3: New coaches and athletes were confused about why each workout type was associated with a color. Did the colors have meaning? Did it imply that a certain action needed to happen? 


Figure 4: All future workout icons have been updated to blue to decrease confusion.  

Design Families

Consistency is key for training just as much as it is for design. To be able to read from card to card more seamlessly on the calendar, we’ve adjusted the card design so they live as one cohesive family. Titles, subtext, compliance card blocks, and iconography now have consistent sizing, shape, and placement (Figure 5). These might sound like small changes, but they add up when placed in the same workspace. By creating consistency across the platform, users can complete tasks faster and more efficiently when UI interaction expectations are met3.


Figure 5: Titles, subtext, card shapes, and iconography have consistent sizing, shape and placement on the calendar.   

Next Steps

This is just one step in our journey at TrainingPeaks and, just like when training for a marathon, we have a plan and are dedicated to our goal. At TrainingPeaks we are striving to make improvements that increase efficiency, accessibility, and delight for coaches and athletes. We are excited to continue to develop the platform and create a great user experience. 

References:

  1. https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
  2. https://www.nngroup.com/articles/low-contrast/
  3. https://www.nngroup.com/articles/omnichannel-consistency/
Charlie Czechowski

Charlie Czechowski is passionate about creating functional and delightful designs. As a UX Designer at TrainingPeaks, she will literally sit and watch you use the product to help create a better user experience. Seriously. Email her at charlie@peaksware.com if you want to test out that claim.