This is a guest blog post by UXPin.
Design doesn’t scale easily because it’s a mixture of art and science. It’s traditionally been thought of as a cottage industry – a bunch of specialized folks crafting beautiful one-off solutions.
But, with the recent surge of design roles industry-wide, the design world needs a more modular approach to product development. As the Head of Design at Airbnb (Alex Scheifer) once said, “you can’t innovate on products without first innovating the way you build them.”
Design systems are exactly that – a better method and process for Lego-like design and development. A way for teams to industrialize the menial work so they can focus on the core problems.
Design scales. But it scales only with a design system.
What is a design system?
Design systems give product teams a reusable, component-based approach to product development. They help solve problems of scale like:
- Inconsistent user experience across products and platforms
- Version control issues
- Knowledge gaps between design and development
- Inefficient processes that lead to repetitive or wasted work
A design system is more than just a style guide or pattern library — it’s the blueprint for product development popularized by companies like Atlassian, Salesforce, and Airbnb. Design systems are so powerful that our 2017-2018 Enterprise UX Industry Report revealed that 69% of the 3,157 respondents either use a design system or are currently working on one.
In a design system, all the design principles, visual assets, and patterns are thoroughly documented. All code references are included for each piece of design. As a result, design scales alongside development.
How to build your first design system
A design system isn’t a one-time deal. It’s equal parts product and process.
As Nathan Curtis says, a design system isn’t a project – it’s a product serving products. Once the first version rolls out, the governance and iteration never ends.
1. Create your interface inventory
To quickly identify current inconsistencies, start by creating an inventory of everything in your product UI: color palette, text styles, and UI patterns. As explained in the online guide to design systems, the inventory is your strongest tool for selling the design system.
- Review the interface and code and list all the colors and text-styles you can find.
- Take screenshots of UI patterns or copy patterns from your projects. Place all the screenshots in one place.
- Categorize your patterns by their purpose (e.g. buttons, form-fields, navigation etc).
- Mark inconsistencies between the patterns and create a presentation for your team.
2. Get buy-in from the team
As you present the inconsistencies reflected in your interface inventory, emphasize the ROI of the design system.
Design systems deliver value in three ways:
- Faster time to market with less money wasted – A component-based toolkit accessible in one place allows for a more chunked-out Agile process, speeding up releases without compromising quality.
- Increased product value – Reusable components build upon each other, which creates a more consistent look, feel, and behavior to the product. As consistency increases, so too does user efficiency.
- Increased collaboration and knowledge sharing – Because the shared design system includes approved assets and conventions, designers and developers are more autonomous without closing off into silos.
Engineers respond well to the source control, improved modularity, and increased autonomy. Business stakeholders respond well to the faster time to market, increased product value, and fewer resources wasted.
3. Define your design principles
Before you build your new system, create a set of general principles for a coherent experience. What universal values should designers to keep in mind?
Use your principles as a review heuristic for every new pattern proposed for the design system and every new project.
4. Unify your visual design
Think about the most fundamental and repetitive patterns in your interface.
Colors, text-styles, icons will probably come to mind first. Perhaps also some interactive patterns (hover on clickable elements), border visual properties, or maybe animations? Discuss with the team to decide which version of these elements will be canonical. Then, document them as part of the system.
For example, we started by simplifying our colors. We ended up consolidating 116 different colors into a more focused palette. The Atlassian team found similar issues: when first building out Atlassian Design Guidelines, they had to turn 45 different dropdown menu styles into one consistent look and feel.
When it comes to typography, you can optimize the scale to serve existing styles, or you might try to build a harmonious scale using the golden ratio or major second. When building the scale, don’t forget that you’re not only setting the size of the font, but also weight, line-height, and other properties.
Finally, make sure you implement your icon library and other styles.
5. Create your interactive component library
Once you have the foundation well-defined, start adding your approved interface patterns to the shared library. Keep them updated and encourage the team to use them in every subsequent project – your efficiency and consistency will improve drastically.
Finally, plan a process of suggesting new patterns to make sure that everyone in the product team has a say in the evolution of the design system.
A properly built design system is truly a gold standard — from the general building blocks of every piece of design, through the UI patterns, and building up the high-level rules defining the future of the product.
Because creating and maintaining a design system from scratch isn’t feasible for everyone, we recently released design systems capability into our full-stack UX design platform. By bringing the design system into the design tool, we want to lower the barrier of entry for all companies.
Above all, remember that a design system is a living project. After the rollout of the first version, a design system becomes a journey that never ends.