A designer and a developer walk into a bar…

A presentation at EmberConf 2023 in July 2023 in Portland, OR, USA by Melanie Sumner

Slide 1

Slide 1

A designer and developer walk into a bar…

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

Slide 2

Slide 2

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

Slide 3

Slide 3

The Helios Design System

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

https://helios.hashicorp.design/

Slide 4

Slide 4

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.

Slide 5

Slide 5

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.

Slide 6

Slide 6

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.

Slide 7

Slide 7

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.

Slide 8

Slide 8

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

Slide 9

Slide 9

Ok before we dive in...

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

Slide 10

Slide 10

Design Systems

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

Slide 11

Slide 11

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.

Slide 12

Slide 12

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.

Slide 13

Slide 13

What makes a successful design system?

Slide 14

Slide 14

Slide 15

Slide 15

Where do the breakdowns happen in a system team?

Slide 16

Slide 16

Slide 17

Slide 17

Challenges

Slide 18

Slide 18

Challenge Exception

Slide 19

Slide 19

Challenges: Scale

Slide 20

Slide 20

Challenge: lots of apps!

Slide 21

Slide 21

Challenges: Unification

Slide 22

Slide 22

Challenges: That one react app

Slide 23

Slide 23

Challenge: Legacy...everything.

Slide 24

Slide 24

Challenge: new team!

Slide 25

Slide 25

Challenge: Existing figma designs

Slide 26

Slide 26

Challenge: existing UI addons

Slide 27

Slide 27

Challenge: designer vs developer

Slide 28

Slide 28

Challenge: same thing, different names

Slide 29

Slide 29

Challenge: gaps

Slide 30

Slide 30

Our approach

Slide 31

Slide 31

Our approach: process overview

Slide 32

Slide 32

Our approach: process details

Slide 33

Slide 33

Our approach: component planning

Slide 34

Slide 34

Component planning: audits!

Slide 35

Slide 35

Component planning; requirements document

Slide 36

Slide 36

Component planning: kickoff

Slide 37

Slide 37

our approach: component creation

Slide 38

Slide 38

component creation: design

Slide 39

Slide 39

Component creation: more design

Slide 40

Slide 40

component creation: design...the ideal

Slide 41

Slide 41

component creation: development

Slide 42

Slide 42

component creation: the cycle

Slide 43

Slide 43

Our approach: documentation

Slide 44

Slide 44

documentation: design

Slide 45

Slide 45

Our Approach / Ambassador Program

Slide 46

Slide 46

Ambassador Program: what is it?

Slide 47

Slide 47

Ambassador program: why is it important?

Slide 48

Slide 48

Our Approach: Meeting Cadence

Slide 49

Slide 49

Meeting Cadence: Globally-distributed team

Slide 50

Slide 50

Meeting cadence: weekly schedule

Slide 51

Slide 51

Our Approach: Accessibility

Slide 52

Slide 52

Accessibility: where is it in our process?

Slide 53

Slide 53

Accessibility: In our code

Slide 54

Slide 54

Accessibility: In our docs

Slide 55

Slide 55

Accessibility: In our foundations

Slide 56

Slide 56

Accessibility: conformance by default

Slide 57

Slide 57

Lessons Learned

Slide 58

Slide 58

Lessons Learned: legacy is real

Slide 59

Slide 59

Lessons Learned:process is vital

Slide 60

Slide 60

Process is vital: shared expectations

Slide 61

Slide 61

Process is vital: uniting cross-functional teams

Slide 62

Slide 62

Process is vital: thinking about our future selves

Slide 63

Slide 63

Lessons learned: engagement

Slide 64

Slide 64

Lessons learned: celebrate your wins

Slide 65

Slide 65

Celebrate your wins: Hashicorp design system v2.8.0

Slide 66

Slide 66

Helios by the numbers (part 1)

Slide 67

Slide 67

Helios by the numbers (part 2)

Slide 68

Slide 68

Happy consumer quote 1

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

Slide 69

Slide 69

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.”

Slide 70

Slide 70

Happy consumer quote 3

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

Slide 71

Slide 71

In closing...

You do not require permission to create accessible code.