“You can’t innovate on products without first innovating the way you build them,” — says Alex Schleifer, VP of Design at Airbnb.
As a UI/UX agency, we at Eleken can say it’s more than true for product design. However, it is not always obvious that it’s time to innovate the way you work.
You can see some indirect signs, though.
Signs, like this conversation from above between Hubspot team members. Looks like some degree of chaos holds their design back, right?
Hubspot thought so too and conducted a design audit.
The audit revealed a ton of junk in their attic. For example, Hubspot had 16 different styles of modals, 6 different primary buttons, and 100+ shades of the color gray in their app.
To break through their operational ceiling, Hubspot created a design system called HubSpot Canvas.
What is a design system?
A UX design system is a collection of standards to manage scaling companies’ design. The design system reduces redundancy by creating a shared visual language across different pages and channels. A design system includes any or all of the following design system components depicted by Audrey Hacq:
Why build a design system?
Design systems offer two major advantages that are worth your efforts. Those are velocity and quality.
First, building a design system, you get a unique opportunity to solve each design challenge once (instead of every time it comes up) and make the solution available to anyone in the team. Danny Forst from American Express says that a design system had facilitated and accelerated their product design process. It enabled them to jump from traditional wireframing to immediate high-fidelity design.
Second, a pattern library that a design system possess enables a better user experience — especially for large companies. Usability and learnability improve when similar interface components look and function in a similar way.
When is the right time to start building a design system?
In theory, the sooner the better. It’s “in theory” because no one ever started a design system until they tripped over their 100 shades of gray.
As a startup scales, so do design teams, as well as the amount of code, and the number of features. Designers start to solve already solved problems, create redundant entities, and, most importantly, decrease user experience for people who have to get through those dozens of different fonts and buttons.
Chaos emerges and builds up, starting to create roadblocks for a design process and affect the performance of digital products. Finally comes a moment when the pain from chaotic design is stronger than a wish to preserve the status quo. Companies realize it’s time to bring order to the chaos before their business gets ruined under the chaos’ weight.
When we say “ruin”, we are not being metaphorical. Science says 14% of startups fail due to bad organization, and 9% more fail due to problems with scaling.
A design system becomes steel greed that supports the piling product from collapse.
Now, how to create a design system?
Start by running a design audit, like Hubspot. Explore and codify what you already have designed. If you found ten different buttons being used alongside, choose one and document it as a standard design component.
To design system architecture for UX, we recommend using Brad Frost’s atomic design methodology. It offers us to approach the design system elements in five stages, moving from the simplest reusable UI components to complex design system patterns:
- Atoms. In interface design, it’s the smallest building blocks like labels, inputs, or buttons.
- Molecules. Here we speak about groups of UI elements that work together as a unit. For instance, an input plus a button make up a search form molecule.
- Organisms. Those are more complex design structures that consist of atoms and molecules. Like, a website header that includes our search form, plus brand identifier and navigation links.
- Templates. Here we come to page-level objects that incorporate all the previous levels into a skeletal layout, for example, a wireframe of a homepage.
- Pages. Pages add some meat to the bones of interface templates. In the case of a homepage, it can be text and images added into a template to look at the real content in action. Pages can be used to test them or to align ideas with stakeholders, for instance.
When you have your UI visual language library ready, you probably want to make it collaborative and code-connected, so that it is useful for both design and development.
Sounds complicated, doesn’t it? Design systems are in no way a piece of cake, and they fail more often than succeed. Let’s figure out how to escape from failure.
How to run a design system?
Once Una Kravets asked on Twitter why design systems become unused, and dozens of her subscribers shared their negative experiences. In summary, it all comes down to three reasons:
- A design system fails to gain widespread adoption. Design systems work only if everyone in a product team knows how to use them. But when a lot of busy people have to spend a lot of time reading a lot of boring docs, we end up with a product team that ignores (or isn’t aware of) their design patterns.
- Employees don't take design systems seriously, especially if they feel like the system gets in the way instead of making things easier. People avoid friction in their processes, and attempts to introduce a new way of doing things instead of the old one is the very definition of “friction”.
- Static documentation of a dynamic process is doomed to fail. Organizations often lack a commitment to update and maintain their systems, so they quickly become outdated.
The solution is to run a design system as a product, not a project. That means when you’re yelling “We did it! We launched a style guide, mission accomplished,” your mission is in the very beginning, actually.
Business doesn’t fill any value from your design system yet. The value will emerge after a product team will start shipping features using design components from the system, which means you've got some more work to do.
Your newborn design guide needs a team to manage and upgrade it. It needs a roadmap and backlog. It needs promotion and training for existing staff and onboarding plans for new staff.
Create your own design system now
Startups are meant to feel slightly chaotic. But as the startup grows, the degree of chaos increases. The more design decisions you put off, the longer you delay bringing mess to order, the more expensive it becomes.
Check out some popular design systems examples to inspire you. Then codify what you already have, make sure someone is responsible for your system. Check if your system is built with a solid structure from the start and will be carefully maintained all the way long.
And if you’re shorthanded out there, remember there’s Eleken agency full of product design experts. Call us if you need help with fighting design chaos.
