A presentation at Design Systems London in in London, UK by Jan Toman
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
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
The following resources were mentioned during the presentation or are useful additional information.
Articles, resources, videos, tweets, and more – everything that was mentioned in the talk above.
for free. You
can too.