Work         Art         About

Design System

2017 - Present

Creation and maintenance of an enterprise-level design system for an e-commerce website.

  • Multiple product squads with independent processes.
  • Lack of shared knowledge.
  • Difficulty with maintaining an up-to-date source of truth.

Role: Lead UX/UI designer

Tools: Whiteboards, Google Docs, Axure, Sketch, Confluence

The following process has spanned several months and the project is ongoing.

Educate the team on design systems.

The team did research using various webinars, books, and articles including:

Identify design system definition and objectives.

What is a design system?
A design system is a visual language comprised of styles, components, and guidelines to help designers and developers create unified experiences.

Why should we have one?
  • Provide a shared language for designers and developers.
  • Manage design and development at scale.
  • Scale knowledge across disciplines.
  • Communicate what the site is and what it strives to be.
  • Solve the easy problems so product squads can solve the hard ones.

Create a system structure.

We benchmarked other design systems to see how teams were organizing and categorizing their UI. A developer and I partnered to evaluate our front-end architecture and align the system categories accordingly.

Consolidate existing content into one document.

Our teams had several sources of truth so we used Google Docs to aggregate information which aligned to the agreed upon information architecture.

Determine guiding principles.

I set up time for key stakeholders to brainstorm site experience principles. The goal was to describe the best qualities of the site today, but also lay the foundation for future experiences. I provided references to other systems principles such as Trello and Pinterest and created a template to help facilitate the brainstorm. This session resulted in three principles that provided a shared perspective and point of view for future experience strategy, creative direction, etc.

Conduct extensive UI audit.

Some parts of the system were working well and easy to document. However there were some key areas that lacked clarity, resulting in multiple versions of the same component. From this audit, I identified some core elements that warranted immediate discussion.

Align on foundations and core elements.

We walked through the “source of truth” document, which outlined the holistic point of view on visual hierarchy and design. This initial discussion helped the team align on the need to create a cohesive experience across the site. We then had more detailed discussions about specific components such as buttons (styles, descriptions, usage), headings (fonts, styles, standards), and links.

Refine documentation.

Our product teams use JIRA for ticket tracking and Confluence for collaborative documentation, so we decided an official first version of our design system would live in Confluence.

Create internal tools for faster design.

In conjunction with the Confluence documentation, I created various tools to help expedite the design process including:
  • Axure widget library and file template
  • Sketch symbols and file template
  • Photoshop component templates

Define governance plan.

We created an initial governance plan which outlines how the system team supports component iteration and how to contribute new features or enhancements. It is a work in progress and being refined with each sprint cycle.
︎     ︎     ︎     ︎