Continuous design systems Case studies of Kiwi.com and Productboard design systems Jan Toman Into Design Systems September 2021
A presentation at Into Design Systems in September 2021 in by Jan Toman
Continuous design systems Case studies of Kiwi.com and Productboard design systems Jan Toman Into Design Systems September 2021
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! 👋
Continuous design systems?
Common scenario: existing product Frontend codebase e.g. 6 years of existing product
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
Tl;dr Continuous design systems Supporting evolving needs Understanding users Never done Observable and tracked
Challenge #1 How might we create a design system that continuously supports evolving product?
Case studies ~2,5 years Since August 2017, Now ~4 years old ~1,5 years Since January 2020
Case study #1
2017 Starting with Orbit
5 years of existing product 2012 2017 Kiwi.com founded Starting with Orbit
5 years of existing product 2012 2017 Kiwi.com founded Starting with Orbit Frontend codebase
Initial discovery a.k.a. understanding what already exists
UI components inventory
CSS styles analysis
Component prioritization workshop
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 📝 📝📝 📝
Analyzing all the feedback, setting up “v1 roadmap”
A few months later…
2012 2017 Later 2018 Kiwi.com founded Starting with Orbit Orbit getting more mature Frontend codebase Orbit codebase
2012 2017 Later 2018 Kiwi.com founded Starting with Orbit Orbit getting more mature Frontend codebase Orbit codebase Orbit adoption
2012 2017 Kiwi.com founded Starting with Orbit Frontend codebase Orbit codebase Orbit adoption 2018 2019
Meantime in Jira…
With so many tasks in backlog and all the ideas… Which of these are the most valuable things for our consumers and users? ?
This is why we have research and discovery phase.
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
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
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
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
Recency bias Recency bias occurs when people tend to emphasize very recent events or observations instead of looking at events over time.
📝 📝📝 📝 Notes from initial interviews Smaller UI audit findings
Key realization We need to shift from a project mindset to a continuous mindset.
Case study #2 Applying continuous mindset to Productboard’s design system. (and dogfooding Productboard along the way)
(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
2020 Starting with Nucleus
6 years of existing product 2014 2020 Productboard founded Starting with Nucleus
6 years of existing product 2014 2020 Productboard founded Starting with Nucleus Frontend codebase
Initial discovery a.k.a. understanding what already exists
Learning about “ui-shared” folders 6 years of existing product 2014 2020 Productboard founded Starting with Nucleus Frontend codebase “ui-shared” folders
UI components inventory
Interview with product teams and stakeholders
All notes from our initial research Feedback repository
All ideas and possible improvements… Our design system backlog
A single system of record for our design system Feedback repository Backlog of ideas and features
Processing our research notes Ideas in our backlog 💡 Review current basic icon set 1 insight 💡 Document UI icons visual style 1 insight
More feedback, later… Idea in our backlog 💡 Review current basic icon set 4 1 insights
“ We need weekly interactions with customers, because we are making product decisions every day. Source: Article “Continuous Discovery” by Gerard Chiva
What would be some important interactions with consumers of our design system?
“How can we track all these conversations, so they won’t get lost in past?”
“How can we track all these conversations, so they won’t get lost in past?” Feedback repository
How does our everyday continuous discovery process look like for us? Feedback repository
Requests from the community + our support #eng-design-system 6 new ideas! 🎉 💡 💡 💡 💡 💡 💡 Feedback repository Backlog of ideas A single system of record for us:
It’s where design conversations happen.
It’s where design conversations happen. Feedback repository
Me: “There has to be a better way.”
Figma REST API to the rescue!
🤖 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
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?
How can I easily discover important insights across so many files and comments? Comments REST API
Comments REST API 25+ projects (Roadmap, Insights, UI library, Documentation, …) Push thread to Productboard 400+ files 14000+ comments
Feedback repository Push thread to Productboard
PRs full of engineering feedback. Feedback repository Future: Automate it via GitHub Action?
Let’s not forget internal meetings!
Taking detailed notes
Taking detailed notes Feedback repository Processing the feedback Design system backlog
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
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
💡 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
One more critical source of insights and feedback: end users of the product
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
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
💡 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
That’s a lot of work, isn’t it? Is it worth it? What’s the impact?
SUS Survey SUS Survey Initial discovery (UI audit, interviews, … 2017 2018 SUS Survey Error forms usability study 2019 This still happens, but… 2020 2021
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
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
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
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
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
Better observability of the long-term backlog Easier planning for major component updates Sprint goal Introduce Tooltip 2.0
When a new writer joins 💡 Document Alert use cases and design decisions 7 insights My notes about the component
My favorite part of our “backlog”: UX patterns The top candidates of UX patterns to be audited and analyzed
#PersonalHack 💡 Undo pattern Highlights from articles 62 insights
Benefits of continuous feedback processing ✨ Not losing even the smallest insights 👌 Manageable long-term backlog 🗃 Creating a central knowledge base 🔮 Easier prioritization
🐘 Can this be done without Productboard?
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
Challenge #1 How might we create a design system that continuously supports evolving product?
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
💬 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.
One more thing…
We learned about “ui-shared” folders, remember? 6 years of existing product 2014 2020 Productboard founded Starting with Nucleus Frontend codebase “ui-shared” folders
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
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
Challenge #2 How might we get a good observability for the maturity and adoption of our design system? #RapidFire🔥
Tracking health criteria for our components Inspired by Sprout Seeds and Adobe Spectrum
Tracking health criteria for our components Health Status for each component Surfacing Health Status in Storybook navbar Using Health Statuses to communicate Nucleus maturity
Tracking component usage in our codebase
Tracking component usage in our codebase
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
Adoption tracking: Experiment ~
Adoption dashboards: Typography and icons
More info ⤵
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.
That’s it for today. @HonzaTmn Reach out. Let’s continue the discussion.
