My task was to create a data visualization model that could track a user's progress to their daily goals in the four categories that comprise the 24/7 cycle of the athlete life. Sleep, Fitness, Activity, & Nutrition.
I experimented with a wide array of shapes and visual treatments to represent category segmentation and percentages of the whole within a mobile form factor. Form factors were hallway tested for comprehension and cognitive load. Once a direction was chosen, interactive prototypes were developed and interaction models were refined.
The Wheel became the foundation of our visual design system. A circle segmented into four quadrants that represent each of our four pillars. As users get closer to their daily goals, the segments of the wheel fill up. When a daily goal is achieved a temporal visual reward state is unlocked.
Always Be Branding
It's one of our design principles. It means our products should communicate and extend the Under Armour brand. It also means our work should be iconic.
UA Record was Under Armour's first foray into digital product development. I knew it would be heavily marketed. As I worked to define our data visualization model, I looked for a shape that we could "own". One that could be used across multiple platforms and environments and be instantly recognizable and associated with UA Record.
Putting It All Together
Color is an important part of our system. Each pillar is represented by a different color so it is readily identified when it is part of a larger environment.
As our ecosystem of products continued to grow, it became clear we needed to document our visual design system. The tipping point came when Under Armour partnered with the NBA to develop NBA Fit powered by UA Record. Our team oversaw the design but it was produced by an outside agency. Documented styles and design principles became a must-have.
I took this opportunity to begin to establish a unified design language system that could eventually be scaled beyond UA Record & NBA Fit to the rest of our products.