Una is awesome. Last year she did a fantastic talk about the technological challenges behind optimizing images, and this year she followed up with a strategic look at design systems and their failures. As someone who’s working to (re)build a design system, I found the talk to be both timely and enlightening.
Now @Una on why design systems fail.
Una’s put a lot of different work into different systems. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
https://t.co/fiJxNUj5aM has a ton of resources on design systems. So does https://t.co/KeqtugQjq6
— Anne Gibson (@perpendicularme) July 31, 2018
What is a design system?
– Style guide or visual pattern library
– Design tooling (sketch, invision)
– Component library
– Code usage guidelines and documentation
– Design usage documentation
– Animation language
– Voice and tone guidelines#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Style guide
This is just a visual pattern library, nothing to prototype with
Design tooling can go with this
A sketch file with all the colors, iconography, alerts, button types, etc.
Component library
Actual code artifacts you can plug and play with #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Guidelines and standards
Unified set of arguments and decisions already made so that when code was written internally it’s all unified
Design usage documentation
List of each of the types of something (like a drop down) with guidelines on when to use what.#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Animation language
IBM uses things out of their own history (like a tape head spinning) or typewriters to build out their animation, and document all the details of the animation (and how it relates#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Voice and tone guidelines
Mailchimp has the best example: https://t.co/rwXf9h4DIW and https://t.co/cbf2gzDYCJ
Examples:
– Fun but not silly
– Confident but not cocky
– Informal but not sloppy
Voice is what you say, tone is how you say it#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
There are a lot of reasons a design system can fail. Some of them are very similar to why diets fail.
What’s it mean for a design system to fail?
Nobody uses it.
If that’s true, all the benefits are being lost#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
In @Una’s last job they had a design system for dashboards, and a different one for marketing, and then created a new version for the first system. Which resulted in people using three different systems. Or rolling their own CSS – which happened more than anything else #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
You have to understand the underlying reason why people aren’t using the existing system
Happy design systems
– scale good standards
– build in accessibility
– unify component styles
– unify code styles
– unify prep
– speed up delivery #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
If we’re all being judged on different metrics, it can be hard to get everyone on board to using the system. One person’s goal is copy/paste, build, ship. Another person’s goal is get the design system used. You have to get support from everyone #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Separate your own Objectives and Key Results (OKRs) from what someone else is being judged on so that you can empathize with them #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
1. Investment – this is at the org level. A lot like going to the gym and working out. Small incremental changes result in big changes overall. Continuous effort to invest resources in it. You can’t clean up once and then walk away. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Invest in good core practices at the beginning of building the design system. It’s good to have ownership, some person or team dedicated to it, to ensure that investment is ongoing. You need a really solid base #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Communication is multidirectional. Include as many people as possible. Once you invest in a design system – the team needs to act as a bridge between design and engineering and all the stakeholders. Nobody wants to be told what to do or prescribe a solution #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Ask your users what they want
Listen to your users needs
*Make your users feel heard*
Incorporate feedback into the system #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Buy-in is really important to get throughout the company. You want people to want to use the system, so there’s a path of least resistance to usage.
Showing is more powerful than telling
Have developers use the design system in a low-stakes situationHackathons!#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Hackathons are like candy to a budding design system because people build faster, and you see what bugs are in the design system. “It felt like an unfair advantage to use the design system”. It can also help the word spread about the system #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Solid architecture
Primer (https://t.co/dQZRlG23uU) has a Core aspect, a Product aspect, and a Marketing aspect. Product and Marketing pull from Core. Lots of different pieces flow together. Kept very modular and separated #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
if you create utility classes you can use the Chrome tools to inspect them. Learn the design system by seeing it through the code system.
Semantic versioning: naming system of major.minor.patch
All the version numbers can be updated independently#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
If you have to design something in an older version, it helps to ensure that you know which ones are the older versions. Can move forward with your design system (as well as the components) as you go.
Put everything on a CDN to unify and separate and organize #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Don’t wait to namespace! If you don’t namespace your system, you will get collisions!
Not “button”, “bx-button” or whatever works for your org. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Tech stack choice
Every company has different needs.
Buzzfeed’s design system (called Solid) uses SASS, Atomic CSS, float-based grid, no JS, Sketch template. You don’t have to use JS in a design system. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Carbon (IBM BlueMix)
SASS
Block-Element Modeling
No specified grid
React AND Vanilla JS
Sketch Template
Design docs
Voice and tone#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
AtlasKit (Atlassian)
CSS in JS
No specified grid
React-based
Sketch Template
Design Docs
Voice and Tone
But their (and much) design tooling isn’t solved#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Reduce friction:
You have to make your design system the path of least resistance. Lower cognitive overhead for both designers and developers. If it’s harder to use than the current system, people won’t use it. If it’s complicated and over engineered it won’t be used. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
One option: pull the system into the code, really performant code, very extensible, everyone in technical design was happy
Option 2: put a link to pull from the CDN in to the top of the website. This was the primary way people were using the system#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
The best time to build a design system is while it’s evolving, but there’s no time like the present.
Bugs will generally only increase. We need to remove code more than we add code. But it’s still important to find them earlier whenever possible #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Empower product growth with design systems:
Investment
Communication
Buy-in
Solid Architecture
Reduced FrictionReally hard to measure the impacts, but really important#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
How to build: set a goal or hypothesis that’s measurable.
“We are building a design system because…”
Increase performance
Decrease inconsistencies
Decrease code cruft/bugs
Etc. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Review what you have *and measure it* so you have baselines. https://t.co/nRyxPEr8ok for page load time, for example. That way when you’ve made changes you can compare against it #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
https://t.co/dU06jCkY2w is a great place to check for accessibility bugs, so that you can measure against that metric. https://t.co/Ii3ZkJ1vzW to monitor errors, warnings, etc. for accessibility. You can run it locally and have it live on a web server. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
https://t.co/688r75e0Lf for comparing old CSS to new CSS for code cruft and things like that – once again, set baseline.
Check your colors – do you have 74 greys? You probably don’t need all those. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Component cut-up activity: print your pages, cut them up, see what you’re actually using as components, and which ones you really want to use. Fix classes, templates, smooth over time. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
User buy-in follows the stats. “Look at our results, you too can get these benefits” #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Make a plan
Put it into writing
Make sure it’s incorporated into the development cycle
Make sure people are accountable for using it
Make technical decisions about the system#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Build a hook-based system to create custom components. That way when you do need something new, you can base it on the standard.
Build components that are prepared for media queries at small, medium, and large.
Have the ability to only pull the components you need #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
https://t.co/XljLZs4Tw9 also has prototyping and production in different systems so they have different documentation for the two. One’s easier to use and the other is more performant. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Buttons are like the “hello world” for design systems.
buttons, small buttons, mini buttons, icon buttons… what are all the different states, how do they interact? #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Incorporate multiple components working together.
Do you include layout in the system? To what extent?
Generally design systems don’t include layout because it’s hard to create a view and say “this is the view in which you must work”. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Having space around components and a standard vertical rhythm can be very important, so building space into the components (but not necessarily building layouts) can be a good solution #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Focus on interaction and accessibility. “Every hover has an equal (not opposite) focus” for example. Document interactions and accessibility usage. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Inform your users! Show components, what’s under review, what’s deprecated, what’s updated. You want lots of people interacting with you and working with you. It’s good to have a team mitigating all the requests and prioritizing #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Keep consistent communication!
Designer communication is not the same as developer communication#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
— What’s the ultimate visual source of truth?
— What is the usage for each component?
— When is the component inappropriate to use?
— What does the interaction look and feel like?
— How do the various states look?
— How does this component interact with others?#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Different needs have different solutions! A 5-person design team isn’t the same as a 300-person design team. You can’t compare polished big design systems to our real life. It’s like comparing someone’s instagram life to our real life. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Una said the following opinion could be considered controversial:
You might not need a design system. You can’t be the sole advocate to a design system. If the cost is higher than the benefit, it’s not going to work. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
As for me, I think everyone has a design system, but for some people that system is called “chaos”.
Not everyone enjoys the same workout, but you can get the same result by doing something that’s tailored to your needs. The same is true of design systems. Your personal needs are more important than someone else’s prior work#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018