The Who

Defining User Roles

User-type mapping guided the architecture, and having colleagues as users simplified refinement.

Defining User Roles

User-type mapping guided the architecture, and having colleagues as users simplified refinement.

User Interviews

Focused on internal users to identify shared workflow pain points.

User Interviews

Focused on internal users to identify shared workflow pain points.

User Flows

Mapping main flows clarified that we needed to start with a well-documented component library.

User Flows

Mapping main flows clarified that we needed to start with a well-documented component library.

Understanding The Products

Mapped the products from a UX perspective to confirm they fit one design system, and they all did.

Understanding The Products

Mapped the products from a UX perspective to confirm they fit one design system, and they all did.

Setting Goals

With many goals, we had to prioritize to know where to start.

Setting Goals

With many goals, I had to prioritize where to start.

The main goal was a flexible system that streamlines work and is simple to adopt.

0

1

I formed the founding team responsible for driving the solution forward.

Team Structure

The team includes two designers and two developers that meet weekly to align details, define architecture, build & maintain components.

2

Defined the core values the system goes by.

Scalability

We implement features upon request while supporting growth and future needs.

Usability

We focus on making our products easy and efficient for users to achieve their goals.

Flexibility

We design our components to be flexible, meeting the needs of each product.

Accessibility

We make sure to stay accessible at an AA level, under MSD’s guidelines.

Communication

We ensure designers and developers are aligned on every decision.

3

Tokenized the UI for more flexibility and control.

Token Tiers

Created a three-tier token system for components and screens with simple, clear logic for designers.

Token Automation

Found Supernova- a tool for token automation and, with global teams, standardized it company-wide.

The solution eliminated most UI dependencies and shifted decisions back to design.

4

Created a full component library.

We set standards, documented components clearly, and implemented them in a shared repo for all products.

Component documentation example:

01 Overview

A high level overview of the component.

02 Properties

Component properties & variants in detail.

03 Structure

How the component is built.

04 Tokens

Detailed list of the tokens used.

05 Behavior

Behavioral definitions not visible in the UI.

06 Text Behavior

How text breaks in the component.

07 Responsive Behavior

A requested large-size token set is presented.

08 Guidelines

Explanation for designers on the component.

01 Overview

A high level overview of the component.

02 Properties

Component properties & variants in detail.

03 Structure

How the component is built.

04 Tokens

Detailed list of all the tokens the component uses.

05 Behavior

Interactive optins the component has and behavioral definitions not visible in the UI.

06 Text Behavior

How text breaks, appears for every appearance of text.

07 Responsive Behavior

Upon request, we created a large size token set. The results of this set are mapped out here.

08 Guidelines

Detailed explanation for designers on how to work with the component.

Versioning

We specified our versioning system, using semantic versioning to our favor.

Standard Workflow

We defined clear workflows for component requests and contributions.

5

Led internal workshops to empower people to use the system

Sample slides from classes

TheHow

01

I formed the founding team responsible for driving the solution forward.

01

I formed the founding team responsible for driving the solution forward.

02

Defined the core values the system goes by.

02

Defined the core values the system goes by.