Buttons are relatively straightforward but because they appear across all our touch points, it was important to ensure that there were both dark and light versions that could work on top of a variety of background colors, patterns, and photographs.
Call To Action Bar
The Call to Action Bar or CTA Bar appears through the entire training experience, guiding users towards completing their workout. This component uses the button component.
Full Bleed Header
I identified two categories of the full bleed header in our app: informational headers and game banners. Informational headers are useful in introducing users to a feature or when diving into specific content. Game headers appear in the pre-game screens and showcase rich game art to elicit excitement.
Here are a few sample screens that showcase how our new components all come together. The redesigns using the new components are more unified and cohesive.
Our design component library is contained within a living document that we update regularly with revisions and new components.