Design Systems

Unity Design + Code System

I created the Unity Design + Code System at Nielsen, a set of design principles, accessibility guidelines, components, patterns, code, and documentation to advocate standards and authenticity.
‍
I led the writing of content -- everything needed to teach all our recommended components, foundations, patterns, templates and guidelines.  
‍
Unity was built for both developers and designers, integrating Figma design with our React codebase.

Our Design Foundations team mentored and guided 10+ other designers, product managers, and developers to accomplish ethical, impactful and innovative work. I empowered 30+ colleagues to learn and apply these best practices, implementing comprehensive globalized, localized, and inclusive design and development solutions.

Unity enabled the entire company -- 40,000+ people in 55+ countries -- to quickly deliver world class experiences using Nielsen's complex data systems and data visualizations.

An example of a component guidance page.

What's next?

I sent out a survey to all the designers using our Figma kits, and asked them to rank what patterns and components were most important to them. Then we bumped those up in our timeline. There were a few surprises, so it was good to get the real priority.

"A single source of truth"

The developers were worried about moving away from Storybook, but I argued that having all our guidance in one place was vital to understanding the final product. Nobody wants to write documentation twice! Their code and tokens were imported successfully into InterplayApp.

Atlas Design System

When I began working on the Atlas Design System team at Nielsen, I gathered examples from dozens of tangled, legacy products, all with different visual designs and different tech stacks.  I identified recurring patterns and created a matrix of what features were shared, and then used that to set requirements and MVP.  From there I focused on building common patterns, that were code-agnostic, with a fresh design.

Peer review - compiling the different features from all the different apps

A fragmented world

Many products came from acquisitions, and not everyone was used to working with UX outside of "make it look clean." Just finding out which products did what was a huge task.

How should it work?

I built detailed Axure prototypes to demonstrate complex interactions like typeahead search, accessible sliders with snap options, and sophisticated data selectors.

Example of Atlas-style common data selectors.
< Home
Interaction and Product Design  >