Continuous design systems

A presentation at Into Design Systems in September 2021 in by Jan Toman

Slide 1

Slide 1

Continuous design systems Case studies of Kiwi.com and Productboard design systems Jan Toman Into Design Systems September 2021

Slide 2

Slide 2

Jan Toman Design System Lead Productboard helps teams understand what customers need, prioritize what to build next, and rally everyone around the roadmap. Previously working at Hi! 👋

Slide 3

Slide 3

Continuous design systems?

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Common scenario: existing product Frontend codebase e.g. 6 years of existing product

Slide 8

Slide 8

After a design system is introduced Frontend codebase e.g. 6 years of existing product New features, using DS Design system codebase Design system introduced

Slide 9

Slide 9

Tl;dr Continuous design systems Supporting evolving needs Understanding users Never done Observable and tracked

Slide 10

Slide 10

Challenge #1 How might we create a design system that continuously supports evolving product?

Slide 11

Slide 11

Case studies ~2,5 years Since August 2017, Now ~4 years old ~1,5 years Since January 2020

Slide 12

Slide 12

Case study #1

Slide 13

Slide 13

2017 Starting with Orbit

Slide 14

Slide 14

5 years of existing product 2012 2017 Kiwi.com founded Starting with Orbit

Slide 15

Slide 15

5 years of existing product 2012 2017 Kiwi.com founded Starting with Orbit Frontend codebase

Slide 16

Slide 16

Initial discovery a.k.a. understanding what already exists

Slide 17

Slide 17

UI components inventory

Slide 18

Slide 18

CSS styles analysis

Slide 19

Slide 19

Component prioritization workshop

Slide 20

Slide 20

Internal interviews What are you expectations from a design system? What should our design system de nitely cover? How do you collaborate with developers during handoff phase … fi http://bit.ly/ds-research 📝 📝📝 📝

Slide 21

Slide 21

Analyzing all the feedback, setting up “v1 roadmap”

Slide 22

Slide 22

A few months later…

Slide 23

Slide 23

2012 2017 Later 2018 Kiwi.com founded Starting with Orbit Orbit getting more mature Frontend codebase Orbit codebase

Slide 24

Slide 24

2012 2017 Later 2018 Kiwi.com founded Starting with Orbit Orbit getting more mature Frontend codebase Orbit codebase Orbit adoption

Slide 25

Slide 25

2012 2017 Kiwi.com founded Starting with Orbit Frontend codebase Orbit codebase Orbit adoption 2018 2019

Slide 26

Slide 26

Meantime in Jira…

Slide 27

Slide 27

With so many tasks in backlog and all the ideas… Which of these are the most valuable things for our consumers and users? ?

Slide 28

Slide 28

This is why we have research and discovery phase.

Slide 29

Slide 29

Our research over years… SUS Survey SUS Survey Initial discovery (UI audit, interviews, … 2017 2018 Design systems research SUS Survey Error forms usability study 2019 Product research (usability studies, feedback, etc.) 2020 2021

Slide 30

Slide 30

Our research over years… SUS Survey SUS Survey Initial discovery (UI audit, interviews, … 2017 2018 Design systems research SUS Survey Error forms usability study 2019 Product research (usability studies, feedback, etc.) 2020 Everyday Slack conversations 2021

Slide 31

Slide 31

SUS Survey SUS Survey Initial discovery (UI audit, interviews, … 2017 2018 SUS Survey Error forms usability study 2019 2020 We didn’t have a good way to manage all that feedback over time. 2021

Slide 32

Slide 32

We didn’t have a good way to manage all that feedback over time. SUS Survey SUS Survey Initial discovery (UI audit, interviews, … 2017 2018 SUS Survey Error forms usability study 2019 2020 Symptomps: 🧠 We relied on our memory and project-based research (= missing continuity) 😵💫 We spent time rediscovering needs and solutions fi 💡 Our backlog was hard to manage, sometimes working on latest res 2021

Slide 33

Slide 33

Recency bias Recency bias occurs when people tend to emphasize very recent events or observations instead of looking at events over time.

Slide 34

Slide 34

📝 📝📝 📝 Notes from initial interviews Smaller UI audit findings

Slide 35

Slide 35

Key realization We need to shift from a project mindset to a continuous mindset.

Slide 36

Slide 36

Case study #2 Applying continuous mindset to Productboard’s design system. (and dogfooding Productboard along the way)

Slide 37

Slide 37

(and dogfooding Productboard along the way) Feedback repository Productboard is product management software that helps teams understand what customers need, prioritize what to build next, and rally everyone around the roadmap. Backlog of ideas and features Connecting feedback to ideas Prioritization & building roadmaps

Slide 38

Slide 38

2020 Starting with Nucleus

Slide 39

Slide 39

6 years of existing product 2014 2020 Productboard founded Starting with Nucleus

Slide 40

Slide 40

6 years of existing product 2014 2020 Productboard founded Starting with Nucleus Frontend codebase

Slide 41

Slide 41

Initial discovery a.k.a. understanding what already exists

Slide 42

Slide 42

Learning about “ui-shared” folders 6 years of existing product 2014 2020 Productboard founded Starting with Nucleus Frontend codebase “ui-shared” folders

Slide 43

Slide 43

UI components inventory

Slide 44

Slide 44

Interview with product teams and stakeholders

Slide 45

Slide 45

All notes from our initial research Feedback repository

Slide 46

Slide 46

All ideas and possible improvements… Our design system backlog

Slide 47

Slide 47

A single system of record for our design system Feedback repository Backlog of ideas and features

Slide 48

Slide 48

Processing our research notes Ideas in our backlog 💡 Review current basic icon set 1 insight 💡 Document UI icons visual style 1 insight

Slide 49

Slide 49

More feedback, later… Idea in our backlog 💡 Review current basic icon set 4 1 insights

Slide 50

Slide 50

“ We need weekly interactions with customers, because we are making product decisions every day. Source: Article “Continuous Discovery” by Gerard Chiva

Slide 51

Slide 51

What would be some important interactions with consumers of our design system?

Slide 52

Slide 52

Slide 53

Slide 53

“How can we track all these conversations, so they won’t get lost in past?”

Slide 54

Slide 54

“How can we track all these conversations, so they won’t get lost in past?” Feedback repository

Slide 55

Slide 55

How does our everyday continuous discovery process look like for us? Feedback repository

Slide 56

Slide 56

Requests from the community + our support #eng-design-system 6 new ideas! 🎉 💡 💡 💡 💡 💡 💡 Feedback repository Backlog of ideas A single system of record for us:

Slide 57

Slide 57

It’s where design conversations happen.

Slide 58

Slide 58

It’s where design conversations happen. Feedback repository

Slide 59

Slide 59

Me: “There has to be a better way.”

Slide 60

Slide 60

Figma REST API to the rescue!

Slide 61

Slide 61

🤖 My small script doing some magic pulling comments via Figma REST API 🤖👀 Processing the feedback 💡 Change size of the icon in small size variants 💡 Make sizing more visually balanced for small/tiny components A single system of record for us: Where the conversation happened

Slide 62

Slide 62

3 Figma teams (Design System, Product, Brand & Marketing) 25+ projects (Roadmap, Insights, UI library, Documentation, …) 400+ files 14000+ comments 👀 How can I easily discover important insights across so many files and comments?

Slide 63

Slide 63

How can I easily discover important insights across so many files and comments? Comments REST API

Slide 64

Slide 64

Comments REST API 25+ projects (Roadmap, Insights, UI library, Documentation, …) Push thread to Productboard 400+ files 14000+ comments

Slide 65

Slide 65

Feedback repository Push thread to Productboard

Slide 66

Slide 66

PRs full of engineering feedback. Feedback repository Future: Automate it via GitHub Action?

Slide 67

Slide 67

Let’s not forget internal meetings!

Slide 68

Slide 68

Taking detailed notes

Slide 69

Slide 69

Taking detailed notes Feedback repository Processing the feedback Design system backlog

Slide 70

Slide 70

Insight Insight Insight Insight Insight 💡 Idea Insight Insight Insight Insight 💡 Idea Insight Insight Insight Insight Insight Insight 💡 Idea Insight 💡 Idea Insight Insight Insight After some time… Insight Insight 💡 Idea Insight Insight Insight Insight Insight Insight Insight 💡 Idea Insight Insight Insight Insight Insight Insight 💡 Idea 💡 Idea Insight Insight Insight Insight Insight 💡 Idea Insight Insight Insight Insight 💡 Idea

Slide 71

Slide 71

fi After some time… 💡 Document UI icons visual style 3 insights 💡 Support monospace font 7 insights 💡 Undo pattern 59 insights 💡 Overall app navigation 51 insights 💡 Low contrast UI 71 insights 💡 Deprecation strategy 12 insights 💡 Dropdown 1.0 12 insights 💡 Status color palette 2.0 72 insights 💡 Better le organization in Figma 11 insights 💡 Dark mode 40 insights 💡 Horizontal scrolling issues 34 insights

Slide 72

Slide 72

💡 Document UI icons visual style 3 insights 💡 Support monospace font 7 insights After some time… 💡 Undo pattern 59 insights 💡 Overall app navigation 51 insights 💡 Low contrast UI 71 insights

Slide 73

Slide 73

One more critical source of insights and feedback: end users of the product

Slide 74

Slide 74

60 000+ One more critical source of insights and feedback: end users of the product pieces of feedback collected over past 7 years 5-8% somehow related to design systems

Slide 75

Slide 75

A huge opportunity Track design systems feedback within the exact same repository where other product teams track feedback on the product itself. The same feedback repository

Slide 76

Slide 76

💡 Idea Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight 💡 Idea 💡 Idea Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight 💡 Idea Insight Insight 💡 Idea Insight Insight Insight Product feedback Insight 💡 Idea Insight Insight Insight 💡 Idea 💡 Idea Insight Insight Insight Insight Insight Insight Internal consumers 💡 Idea Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight 💡 Idea Insight Insight Insight 💡 Idea Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight 💡 Idea Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight Insight 💡 Idea 💡 Idea

Slide 77

Slide 77

That’s a lot of work, isn’t it? Is it worth it? What’s the impact?

Slide 78

Slide 78

SUS Survey SUS Survey Initial discovery (UI audit, interviews, … 2017 2018 SUS Survey Error forms usability study 2019 This still happens, but… 2020 2021

Slide 79

Slide 79

fi Instead of this… …we have this! 💡 Document UI icons visual style 3 insights 💡 Support monospace font 7 insights 💡 Undo pattern 62 insights 💡 Overall app navigation 51 insights 💡 Low contrast UI 71 insights 💡 Deprecation strategy 12 insights 💡 Dropdown 1.0 12 insights 💡 Status color palette 2.0 72 insights 💡 Better le organization in Figma 11 insights

Slide 80

Slide 80

Ideas sorted by insights count 💡 No vertical scroll bar visible 117 insights 💡 Low contrast issues 110 insights 💡 Status color palette 2.0 72 insights 💡 Undo pattern 62 insights 💡 Dark mode 40 insights 💡 Horizontal scrolling issue 34 insights 💡 Z-index levels 17 insights 💡 Scrolling with no mouse wheel 16 insights 💡 Automate delivery of design system icons 15 insights

Slide 81

Slide 81

Easy way to spot opportunities 💡 No vertical scroll bar visible 117 insights 💡 Low contrast issues 110 insights 💡 Status color palette 2.0 72 insights 💡 Undo pattern 62 insights 💡 Dark mode 40 insights 💡 Horizontal scrolling issue 34 insights 💡 Z-index levels 17 insights 💡 Scrolling with no mouse wheel 16 insights 💡 Automate delivery of design system icons 15 insights 👓 Feedback related to the accessibility of our product

Slide 82

Slide 82

Easy way to spot opportunities (and sell them to business) 💡 No vertical scroll bar visible 💡 Low contrast issues 💡 Low contrast issues 117 insights 110 insights 110 insights 💡 Status color palette 2.0 72 insights 💡 Undo pattern 62 insights 💡 Dark mode 40 insights 💡 Horizontal scrolling issue 34 insights 💡 Z-index levels 17 insights 💡 Scrolling with no mouse wheel 16 insights 💡 Automate delivery of design system icons 15 insights Feedback from customers

Slide 83

Slide 83

Filtering only internal feedback 💡 Automate delivery of UI icons 💡 Automate delivery of UI icons 15 insights 💡 Tooltip 2.0 15 insights 💡 Support Chips in TextField 8 insights 💡 Document how to work with icons in Figma 8 insights 💡 Multi-value support for Select 8 insights 💡 Document Alert use cases and design decisions 7 insights 💡 Support monospace font 6 insights 💡 Support for emphasized labels 5 insights 💡 File organization in Figma 4 insights 15 insights Internal requests

Slide 84

Slide 84

Better observability of the long-term backlog Easier planning for major component updates Sprint goal Introduce Tooltip 2.0

Slide 85

Slide 85

When a new writer joins 💡 Document Alert use cases and design decisions 7 insights My notes about the component

Slide 86

Slide 86

My favorite part of our “backlog”: UX patterns The top candidates of UX patterns to be audited and analyzed

Slide 87

Slide 87

#PersonalHack 💡 Undo pattern Highlights from articles 62 insights

Slide 88

Slide 88

Benefits of continuous feedback processing ✨ Not losing even the smallest insights 👌 Manageable long-term backlog 🗃 Creating a central knowledge base 🔮 Easier prioritization

Slide 89

Slide 89

🐘 Can this be done without Productboard?

Slide 90

Slide 90

Can this be done without Productboard? Insight Insight 💡 Idea Insight 💡 Idea Insight Yes. Insight 💡 Idea Insight The process is important, not the tool. Insight Insight 💡 Idea Insight Insight … or any of specialized product management software. 💡 Idea 💡 Idea

Slide 91

Slide 91

Challenge #1 How might we create a design system that continuously supports evolving product?

Slide 92

Slide 92

Key takeaways on continuous discovery 💬 Track conversation in the tools that system’s consumers use every day 🕵 Keep an eye on research done by product teams (and their roadmaps!) 🗃 Find a way how to connect insights with your backlog

Slide 93

Slide 93

💬 Track conversation in the tools that system’s consumers use every day 🕵 Keep an eye on research done by product teams (and their roadmaps!) 🗃 Find a way how to connect insights with your backlog Longer you do it, more benefits it has.

Slide 94

Slide 94

One more thing…

Slide 95

Slide 95

We learned about “ui-shared” folders, remember? 6 years of existing product 2014 2020 Productboard founded Starting with Nucleus Frontend codebase “ui-shared” folders

Slide 96

Slide 96

Step 1: using “ui-shared” as the baseline for our design system 6 years of existing product 2014 2020 Productboard founded Starting with Nucleus Frontend codebase “ui-shared” folders Now New & refactored Nucleus code

Slide 97

Slide 97

Step 2: continuous work on improving the quality New & refactored 30 components Original “ui-shared” 60 components 6 years of existing product 2014 2020 Frontend codebase Original “ui-shared” Now New & refactored Nucleus code

Slide 98

Slide 98

Challenge #2 How might we get a good observability for the maturity and adoption of our design system? #RapidFire🔥

Slide 99

Slide 99

Tracking health criteria for our components Inspired by Sprout Seeds and Adobe Spectrum

Slide 100

Slide 100

Tracking health criteria for our components Health Status for each component Surfacing Health Status in Storybook navbar Using Health Statuses to communicate Nucleus maturity

Slide 101

Slide 101

Tracking component usage in our codebase

Slide 102

Slide 102

Tracking component usage in our codebase

Slide 103

Slide 103

Adoption status Not using Nucleus components = UI debt Nucleus adoption 6 years of existing product 2014 2020 Frontend codebase Original “ui-shared” Now New & refactored Nucleus code

Slide 104

Slide 104

Adoption tracking: Experiment ~

Slide 105

Slide 105

Adoption dashboards: Typography and icons

Slide 106

Slide 106

More info ⤵

Slide 107

Slide 107

Key takeaways about adoption strategy 🐢 It’s good to be patient. Design systems are for a long term. 📈 Identify what’s UI debt for you and track it. 📣 Surfacing adoption metrics to stakeholders helps.

Slide 108

Slide 108

That’s it for today. @HonzaTmn Reach out. Let’s continue the discussion.