Product Design Leader based in Austin, TX
viz.png

Visual Design: Data & Design Systems

One of my responsibilities as Product Design Manager of UA Record was defining our visual design systems. Initially, that meant establishing a schema to represent a user’s progress to their daily goals. As our portfolio of digital products grew, so did the need for a standardized styleguide and design language system.

Systems.001.jpeg
 

 

The Problem

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.

 

The Process

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. Concepts were hallway tested for comprehension and cognitive load. Once a direction was chosen, interactive prototypes were developed and interaction models were refined.

 

 
Systems.001.jpeg
 

 

The Solution

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. 

 

 

 
Systems.001.jpeg
 

 

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. 

 

 

 
Systems.003.jpeg
 

 

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. 

 

 

 
Systems.004.jpeg
 

 
Systems.008.jpeg
 

 

The Problem

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. 

 

The Solution

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. 

 

 

 
Systems.009.jpeg
Systems.010.jpeg
Systems.011.jpeg
Systems.013.jpeg
Systems.014.jpeg
Systems.015.jpeg
Systems.015.jpeg