A designer and developer walk into a bar…

Building a design system in Ember.js by Melanie Sumner and Jory Tindall

Who We Are

Melanie Sumner Senior Design System Engineer Ember Framework Core Team W3C ARIA WG @melsumner

Jory Tindall Senior Product Designer Design technologist Saxophonist artist @jorytindall

The Helios Design System

So we both work on the Helios Design System at HashiCorp.

https://helios.hashicorp.design/

Today’s Agenda

So first, lets talk about what you can expect this talk to include.

It also helps you keep in mind when the end is going to be, since I know y’all are paying attention to that since we’re the last talk today.

Design Systems

First, we’ll talk about design system themselves, and give a brief-ish introduction.

We’re all used to UI addons, shared components, even branding guidelines. A design system is none of those things in isolation, but inclusive of all of them and more.

Challenges

Next, we’ll talk about a few… …and just a few, because we don’t have all day…. …just a few challenges we faced when starting our design system team

Hint: our challenges have been less about design and code, and more about people.

Our Approach

Next, we’ll talk about how we decided to approach these challenges and some other things we decided to do that we think are pretty cool and set us apart as a design system team.

Lessons Learned

Finally, we’ll cover the lessons we learned, And how they can help anyone else working on a design system or on a cross-functional team

Ok before we dive in...

Ok before we jump in, we love our cats so here are some photos of our cats.

Design Systems

okay! Design Systems. let’s talk about that.

What is a design system?

We all probably know what a design system is from a technical perspective, but from a value perspective a design system helps product teams deliver UI at scale.

A little bit of...everything

Here’s an abstract representation of all of the moving parts of a design system capturing the concept of “System of Systems” in which each focus area, process, or set of deliverables is treated as its own system within the larger whole of a Design system.

What makes a successful design system?

Where do the breakdowns happen in a system team?

Challenges

Challenge Exception

Challenges: Scale

Challenge: lots of apps!

Challenges: Unification

Challenges: That one react app

Challenge: Legacy...everything.

Challenge: new team!

Challenge: Existing figma designs

Challenge: existing UI addons

Challenge: designer vs developer

Challenge: same thing, different names

Challenge: gaps

Our approach

Our approach: process overview

Our approach: process details

Our approach: component planning

Component planning: audits!

Component planning; requirements document

Component planning: kickoff

our approach: component creation

component creation: design

Component creation: more design

component creation: design...the ideal

component creation: development

component creation: the cycle

Our approach: documentation

documentation: design

Our Approach / Ambassador Program

Ambassador Program: what is it?

Ambassador program: why is it important?

Our Approach: Meeting Cadence

Meeting Cadence: Globally-distributed team

Meeting cadence: weekly schedule

Our Approach: Accessibility

Accessibility: where is it in our process?

Accessibility: In our code

Accessibility: In our docs

Accessibility: In our foundations

Accessibility: conformance by default

Lessons Learned

Lessons Learned: legacy is real

Lessons Learned:process is vital

Process is vital: shared expectations

Process is vital: uniting cross-functional teams

Process is vital: thinking about our future selves

Lessons learned: engagement

Lessons learned: celebrate your wins

Celebrate your wins: Hashicorp design system v2.8.0

Helios by the numbers (part 1)

Helios by the numbers (part 2)

Happy consumer quote 1

“The Pagination component took something very complicated and in a matter of minutes, it just worked.”

Happy consumer quote 2

“It’s well thought out, and handles 95% of our use cases. It’s incredibly composable within the limits of what a component should be doing.”

Happy consumer quote 3

“(Adopting the design system) fixed major accessibility issues we had.”

In closing...

You do not require permission to create accessible code.