Keeping design systems alive and healthy with user feedback and data

A presentation at Design Systems London in December 2022 in London, UK by Jan Toman

Slide 1

Slide 1

Keeping design systems alive and healthy with user feedback and data Jan Toman

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Signals of design system’s decline 🔥 Outdated components and/or documentation 🔥 Support is slow, blocking product teams in their delivery 🔥 Design system is always late with their improvements Leading to… 💔 Product teams not using the system 💔 Growing design and technical debt within a system and/or product(s) 💔 New rogue design systems emerging in the company 💔 Losing executive support

Slide 14

Slide 14

Slide 15

Slide 15

Observability & To understand what works and whatnot. Research & continuous discovery To evolve the system.

Slide 16

Slide 16

Observability To understand what works and whatnot. Adoption System status Satisfaction

Slide 17

Slide 17

Observability Adoption

Slide 18

Slide 18

— Observability Adoption / From Productboard

Slide 19

Slide 19

— Observability Adoption / From Productboard

Slide 20

Slide 20

Observability Adoption / From Productboard — bit.ly/dslondon1

Slide 21

Slide 21

Observability Adoption — From the community 👀

Slide 22

Slide 22

Observability Adoption / From the community Onfido) ( — Source: How to Measure Design System Adoption by Steve Dennis

Slide 23

Slide 23

Observability Adoption / From the community Shopify Polaris) ( — Source: Tweet by Yesenia Perez-Cruz

Slide 24

Slide 24

Observability Adoption/ From the community Bumble) No design system bit.ly/dslondon2 ( — Source: Measuring the Impact of a Design System by Cristiano Rastelli Having a design system

Slide 25

Slide 25

Observability Status In Figma In React In Swift Accordion Yes No No Button Yes In progress Yes Dropdown Yes In progress No In progress No No Modal …

Slide 26

Slide 26

Observability Status / From Productboard — Tools used: Google Sheet

Slide 27

Slide 27

Observability Status / From Productboard — Tools used: Google Sheet data connected to Looker.com (custom script for data import)

Slide 28

Slide 28

— Observability Status / From Productboard

Slide 29

Slide 29

Observability Status — From the community 👀

Slide 30

Slide 30

Status / From community Orbit by Kiwi.com, Ariane by Maze.co, Carbon by IBM, Seeds by SproutSocial) ( — Observability

Slide 31

Slide 31

Status / From community Spectrum by Adobe) ( — Observability

Slide 32

Slide 32

— Observability Status / Tooling: supernova.io

Slide 33

Slide 33

Observability Satisfaction 😍 🤩 😫 😬

Slide 34

Slide 34

— Observability Satisfaction / From Productboard

Slide 35

Slide 35

Observability Satisfaction / From Kiwi.com Results from System Usability Score survey ) ( — Tools used: System Usability Score SUS survey, Google Sheet

Slide 36

Slide 36

Observability Satisfaction / From Productboard — 💡 Tip: Collect praises from the users

Slide 37

Slide 37

Preparing for th is now 👀 Research & continuous discovery To evolve the system.

Slide 38

Slide 38

Research & continuous discovery 😍 🤩 📝 Look for impactful opportunities 🎛 ✂ You have a lot of data and insights already. 😫 😬 🚦 📈

Slide 39

Slide 39

Research & continuous discovery Go back to your notes from initial research. Interview people again.

Slide 40

Slide 40

Research & continuous discovery 💡 PRO TIP Be close to where your users are and track their feedback continuously “ We need weekly interactions with customers, because we are making product decisions every day. Source: “Continuous Discovery” by Gerard Chiva

Slide 41

Slide 41

Research & continuous discovery / From Productboard Internal conversations about design, patterns, and UI development Product feedback repository

Slide 42

Slide 42

Research & continuous discovery / From Productboard Internal conversations about design, patterns, and UI development Feedback from the end users of the product Product feedback repository

Slide 43

Slide 43

Research & continuous discovery / From Productboard Product feedback repository 65 000 pieces of feedback (“insights”) collected over past 8 years 5 8% +

was somehow related to a design system and UI/UX

Slide 44

Slide 44

Research & continuous discovery / From Productboard Result We had a strong discovery backlog backed by feedback from the users 🎉 💡 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 45

Slide 45

bit.ly/dslondon3

Slide 46

Slide 46

Let’s wrap it up

Slide 47

Slide 47

A lot can be tracked for design systems 👀 Identify which data are important for your design system to have. Focus on those.

Slide 48

Slide 48

Summary • Understand how people use the system • Track how the system is extended and customized • Have strong feedback loops with users of a design system • Partner with your data team – you don’t need to figure it out alone • Keep stakeholders informed about key metrics (e.g. adoption) t! n a rt o p im y ll ia c e p s e is e The last on

Slide 49

Slide 49

@ Thank you! All mentioned links and resources on bit.ly/dslondon-overview Find me on Twitter HonzaTmn