Post Menu and Details.
- The roots of design inconsistency
- Design System
- Design systems can bring order to chaos
- Wrapping up design chaos and a design system
Words: 964
Reading time: ~4 minutes
Once upon a time, Hubspot ran a design audit to figure out their app design had 100+ shades of grey, 6 different primary buttons, and a ton of other inconsistencies in their interface.
If you believe Hubspot’s inconsistency is something extraordinary, try counting the shades of gray in your app. Left unchecked disorder increases over time. It’s entropy, a measure of disorder, that explains why life gets more, not less, complicated as time goes on.
But where does this mess come from, and how it goes unnoticed?
The roots of design inconsistency
At the origin of any startup, a product team works closely head to head. Designers and developers discuss all the decisions and everyone knows what is going on. They all build their little sweet project elbows deep in the construction. Everything grows rapidly.
And then the head of Design gets away from work for a minute to look around to notice that the product has been already building for a long time. It’s not the only product team anymore. Many teams are working on different parts of the app. The teams of distributed designers spread across different time zones, projects, and competing objectives. They are not able to work together and create one coherent experience anymore.
The number of inconsistencies in the product increases over time.
What kind of inconsistencies, you ask? Like, five designers creating five different calendar date pickers simultaneously. Five versions of a date picker now coexist, and their number will only grow with time. As well as the number of button styles, texts, filters, modals, and shades of gray.
Design System
An actual Slack conversation of the Hubspot team. Image credit: product.hubspot.com
Thus, your project that started as a little sweet one-story turned into a tower of Babel with a bunch of extensions built on each other. A new color. A different line thickness there.
Ouch.
When your little startup has grown up (in an inconsistent way)
Suddenly the design process becomes siloed and disorganized. People and technology are disconnected. Employees do their own thing. Chaos occurs and causes a whole range of problems:
- It creates issues for usability. Having an inconsistent interface is like trying to talk to users in several languages. Once they think they have figured out how your screens work, you switch to unknown code.
- It increases the redundancy of the designing effort. Your employees start wasting their time on multiplying entities and solving problems that have been already solved.
- It makes onboarding extremely difficult. Introducing new designers and developers to your undocumented design principles is not an easy matter.
So HubSpot created HubSpot Canvas, their design system, to resolve the app’s inconsistencies.
If you already have a dozen or more button styles across your platform, if your app grows and evolves over time if you have a lot of team turnover you’ll probably need a design system too.
Design systems can bring order to chaos
A design system is a set of standards to manage design at scale by creating a shared language and visual consistency across different parts of an interface. It consists of pre-made building blocks (icons, color schemes, grid definition, etc), UI patterns (templates, modules, components), and design rules (guidelines, principles).
Design system components. Image credit: uxpin.com
Design systems are not necessary for landing pages or one-time applications. The need arose when working on complex SaaS products for extended periods of time.
69% of enterprise companies either already have a design system or establishing one. SaaS apps such as Hubspot, Salesforce, Shopify, and Atlassian devote much time and effort to perfecting their design systems. And it makes perfect sense — at their size and scale, the inconsistency is too dangerous and costly to ignore.
5 reasons why you may also need a design system
- A design system will increase velocity and development time. Your product team will be able to replicate designs quickly by utilizing premade UI components and elements accessible in one place. That is a good way to speed up releases without compromising quality. You will be able to create mockups in a fraction of the time it would take starting from scratch each time.
- It will improve the product value for your customers. Reusable components that build upon each other create a consistent look, feel, and experience. As soon as consistency increases, so does user efficiency. Users feel less confused and learn faster how to use your design.
- A design system enhances collaboration and knowledge sharing inside your product team. With a sharable design system that includes approved assets and principles, designers become more autonomous without closing off into silos.
- A design system helps to save time and money. Since designers and developers don’t need to reinvent the wheel anymore, they can free up time for activities that deliver more value to customers and a company.
- With a design system, you will set your recipes in advance. That will prevent inconsistencies and chaos in the future by pre-defining how each component looks, and when it is used. Problem solved.
Wrapping up design chaos and a design system
A design system organizes key design elements so they can be used and reused without a need for change. Like with a LEGO set of bricks, plates, studs, tiles, and tiny human figurines.
You can build whatever you want, but only using pre-defined design components. Thus, any variety of structures will look like they are part of the same family. Just like anything made of LEGO is still recognizable as made of LEGO.
What it is is a consistent design
It takes just one committed person to bring consistency into your design team.
Start small when creating your design system. Take an existing component library as a basis and over time, add more and more custom components. Build a catalog of all reusable components in your product like patterns, colors, text styles, and icons. Establish rules and principles for your design system. Get your design system started!
Thank you for reading!