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

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

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

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

Observability Adoption

— Observability Adoption / From Productboard

— Observability Adoption / From Productboard

Observability Adoption / From Productboard — bit.ly/dslondon1

Observability Adoption — From the community 👀

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

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

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

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 …

Observability Status / From Productboard — Tools used: Google Sheet

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

— Observability Status / From Productboard

Observability Status — From the community 👀

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

Status / From community Spectrum by Adobe) ( — Observability

— Observability Status / Tooling: supernova.io

Observability Satisfaction 😍 🤩 😫 😬

— Observability Satisfaction / From Productboard

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

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

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

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

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

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

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

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

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

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

bit.ly/dslondon3

Let’s wrap it up

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

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

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