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.
- 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.
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 3: 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:
