Design System Website

Objective

Create an enterprise single source of truth guidelines for brand, voice, tone, services, and development

Process

Requirements

Create an enterprise single source of truth guidelines for brand, voice, tone, services, and development
Showcase style guide and design system library
Collaborate with subject matter experts to establish guidelines

My Role

UI Architecture
UI Design
CMS Development and Integration

Challenges

No global component libraries
Lack of collaboration
No quality standards or code documentation
No front-end architecture
Adoption

What makes a great Design System Website?

Detailed Documentation, concise release notes, changelogs, consistency, ease of use and open source frame of mind.

For the library to succeed we ensured developers had a great experience. To accomplish this, we determined what made a successful library by conducting several developer interviews and competitive analysis.

Design System Website Version 1

Version 2

The next revision we combined feedback with card sorting and more interviews to completely redesign the entire experience.

One feature important on the list was a property switcher which allowed a developer to adjust the wanted configuration and copy a snippet.