Design System in 90 Days
A workbook designed for teams on creating a design system that lasts.
If you’re like most of our clients, you’re a design, engineering, or product leader, working at an enterprise organization on its second or third attempt at a design system that truly powers all of its digital products. In the first few tries, perhaps you ended up with some great libraries that just didn’t get used as much as you’d hoped. (We call those “design system graveyards.”).
Six months of work down the drain. Now, it seems like enthusiasm for the idea of a design system is fizzling out and your leadership wants to reallocate your design system team to other projects.
Create a design system teams love to use
It still feels within your grasp: a set of shared components all teams start with as an established part of their workflow.
- All the products look like they’re part of the same brand family and design language.
- All the engineers use similar code conventions and approaches; no more wasted meeting time and Slack threads deciding “what we should name this component.”
- Every team saves few weeks of work at minimum, because 80% of their product’s interface elements come from the design system, ready to rock. A few weeks of work becomes a few hours. A few hours of work becomes a few minutes.
They’re free to innovate, to solve more impactful business problems because they’re not custom-building yet another datepicker for the fifth time.
When the big rebrand or technology migration eventually comes around, you’d be ready. Change will be relatively painless, because you’ll be able to make modifications in one place that cascade out to every product with a few simple build commands.
If this is your first time marching toward this utopia, it can feel like stumbling around in the dark, messing up more than succeeding. You’re unknowingly headed toward yet another design system graveyard because you don’t know the steps, the process, the sequence.
You can create a design system in a way that involves your customers—really, your community—from the start. You’ll no longer feel behind, like you have to catch up and rein in the teams that can’t help but deviate from the system because there’s not enough of it there for them yet. Instead of policing other teams to keep them in line with the standards, your team becomes the one that propels them to boost the quality of their work. You’ll have clarity, and
It’s doable! Companies like Shopify, IBM, Lyft, REI, Atlassian, Microsoft, and more are living this reality. You can too.
Know exactly what you can do each day
The key is focusing relentlessly on adoption from Day 1 by systematically and intentionally including members of your team at every single stage of the process. You hold that as the focus for every activity you do by clearly understanding what teams need in a design system. And you iterate on it constantly and smartly in a way that scales and sticks.
Our Design System in 90 Days workbook will show your team exactly how to do that, every day from Day 1 to Day 90. We’ve spent the last few years workshopping this sequence of 52 activities. It’s a proven process that, when repeated over the next 90 days and beyond, plants seeds that can blossom into a healthy design system practice. These are the steps we’ve used with many enterprise teams to help them create digital products efficiently, consistently, and in a way that’s a lot of dang fun!
“No one’s more qualified to create a design system workbook than SuperFriendly. If you’ve ever wondered about a good process for making a design system, this is a great starting point! ”
You won’t find a lot of theory here: the workbook clearly instructs you on what to do and how to do it. The activities are designed for a cross-disciplinary design system team of 3–8 people working 20–30 hours per week to complete together over a 90-day timeframe. This workbook also includes FigJam prompts and Figma templates you’ll use to complete the activities, so access to Figma is a must!
Who should use this
Design systems find their full potential at enterprise organizations. Because design systems require deep knowledge of design, engineering, and product, it’s naturally a team sport. We wrote this workbook for a dedicated, cross-disciplinary design system team to do together. Because these activities are meant for teams, it may feel too overwhelming for an individual to complete this workbook on their own.
Inside the workbook
Table of Contents
- Assemble the North Star
- Assemble Design and Code Assets for Audit
- Create an Influence Map
- Collect Feature Teams’ Roadmaps
- Identify Existing Paradigms in Design And Code
- Identify Emerging and Interesting Paradigms in Design and Code
- Interview Potential Design System Customers
- Identify Potential Pilot Teams
- Schedule Pilot Product Walkthroughs
- Identify Key Stakeholders + Schedule Interviews
- Visualize Your Technical Ecosystem
- Interview End Users
- Interview Stakeholders
- Conduct Pilot Team Walkthroughs
- Create New Design System Repository and Package
- Set Up Public Workshop Environment with Branch Deploys
- Teach HTML & CSS to Designers
- Teach Figma to Engineers
- Teach Git to Designers
- Teach Storybook to Designers
- Practice Hot Potato
- Join Pilot Teams’ Sprint Planning Sessions
- Practice with an Existing Design System
- Conduct a Practice Pilot
- Create a Glossary of Shared Vocabulary
- Identify 3 Initial Components to Pilot
- Synthesize Themes & Insights from Stakeholder Interviews
- Send First Stakeholder Update
- Create Design System Coverage Map
- Set Up Slack Channel for Design System Conversation
- Create Reference Website v1
- Create Component Implementation Roadmap
- Propose Collaboration Plan to Pilot Teams
- Abstract Component Through Hot Potato
- Share In-Progress Component Abstraction Work with Pilot Teams
- Iterate on Component Through Hot Potato
- Writer + Engineer + Designer Chronicle the Process
- Issue Pull Request to Contribute Newly Abstracted Component
- Usability Test Component with Pilot Teams
- Final Iteration on Component
- Send Stakeholder Update
- Extract 3 Overarching Principles
- Create a List of Potential Design System Names
- Create Design System Logo v1
- Add “Design System Office Hours” to Calendar
- Make Design System Swag
- Send Slack Post about Component #1
- Host “Systems Week”
- Send Design System Name and Logo Finalists to Brand & Legal Team
- Repeat Activities 34–40 for Component #2
- Repeat Process for Component #3
- Congrats! Release Design System v1.0.0!
Why so expensive?
Following our process can likely save a design system team about 6–9 months of figuring out what work to do, resulting in about a week of design and development time savings for your feature teams at first, and then a few more weeks eventually. That’s about $30k–$90k of savings per team at industry rates, a 85×–260× return on investment for this workbook. (And we bet you have more than 1 feature team!) In a recent presentation to their leadership team, one of our previous clients projected an additional $250M (no lie) as a result of our design system collaboration!
Why so cheap?
Expensing business purchases is too complicated sometimes. We tried to price this low enough so you could buy it with your corporate credit card without needing to go to your manager or procurement for approval.
The right balance of specifics and flexibility that you can use to uplevel the impact and influence of a design system team in a focused amount of time. I highly recommend it for both folks that are just starting a system and for design system veterans.
It’s so practical it almost feels like doing a workshop & getting real-life guidance… only YOU get to choose the pacing.
An amazing playbook that you can run at your own pace whether you are just starting up your design systems practice or looking to formalize aspects of it.
These steps are great for any point on the journey to recenter your design system team and focus on connections to product.
I can’t believe how jammed packed this workbook is!
I recommend this to anyone who is starting their first design system.
I wish I had something like this available when we were starting with our design system.
Thank you for the dose of knowledge and energy in these discussions and activities about mission, collaboration, adoption, documentation, growth, and more.
Fully packed with insights and guidance. It’s a must-read for my team.
Imagine becoming a chef by studying led techniques and practical approaches without having to unconsciously just execute recipes.
Packed with tried-and-tested exercises for starting or reinvigorating design systems at any stage of life. An indispensable reference even for seasoned design system practitioners.
The most practical, comprehensive design systems resource that I’ve ever seen. It’s kind of mind-blowing how much thought went into this.