One of the cool things about working in small, fast-paced startups is the ability of such companies to build and launch new ideas and features in a matter of days and even hours.
However, as your team grows, you’ll notice that it takes longer to progress on your development work. More time is spent in meetings and discussions about new features. And because it’s difficult for anyone to have a complete overview of all elements and pages already created, you end up doing the same work twice.
Situations like this are the reason why you need a design system. You will need a bit of work upfront to develop one, but it can save you a lot of time and money down the road and help you create a consistent and solid experience for your product’s users. First, let’s explore what design systems are.
What is a design system?
A design system is a collection of components and patterns that can be reused in web, software, and mobile app design and development. Think of it as a digital version of graphic style guides that were previously used in print and are now used to guide UX and interface designers as well as web and mobile developers in a digital-first world. The main idea behind it is to avoid repeating your work and create a single source of truth. This will speed up your design process, ensure everything is in sync, and improve the user experience.
In a typical design system, you will find elements such as:
- Design principles: Guiding sentences that help design teams make informed design decisions and achieve the purpose of the product
- Components: CTA buttons, icons, logos
- Patterns: Global navigation bars, forms, and more
- Tokens: The values needed to construct and maintain a design system such as spacing, color palettes, typography (fonts, sizes) , object styles, animation, etc.
How can your company benefit from a design system?
1 - Consistency
Designing for today’s technological landscape requires you to be strategic about how you design for different devices. A design system could be an easy place to reference to ensure design consistency across different devices and even different screen sizes within the same devices.
As new devices appear in this landscape all the time, design systems can be adapted to the new reality these devices could pose.
2 - Knowledge retention
High employee turnover is the reality in many tech companies. Under such conditions, it’s hard to retain design knowledge and keep consistency in design and development. Certain employees will take away their knowledge and methods with them once they leave, and new employees will bring new ideas, as well as the potential for inconsistency.
A design system could serve as a common ground for everyone and evolve with your company because it is always maintained by employees and can serve all employees, no matter how much time they spent at your company. At the end of the day, consistency is one of the main principles of UX design, and you don’t want employee turnover to harm it in any way.
3 - Efficiency
A design system allows us to scale up design very fast. Even the most junior UX designers can reference the design system and work with its components without reinventing the wheel every time or making the same thing twice.
Also, speeding up the design and the development process can save you money and resources and ensure the high quality of the final result.
4 - Better branding and user experience
Design systems can be leveraged to ensure consistency in UI design and marketing design that directly contributes to your marketing efforts.
It’s easy to forget that your product’s experience is part of your company’s branding. Therefore, it’s essential to keep the user interface and branding consistent to create a good user experience (e.g., colors, logos, placement of components on the UI).
5 - Improved design-engineering relationship
There’s always some potential for disagreements between designers and developers over UI specifications on different screens and devices in the design and development process.
A design system on tools such as Figma can help your designers and developers speak the same language because it shows all the design specs (tokens) in a language that developers can easily pick up. In design systems, all the components are also coded (e.g. HTML, CSS, JS) and can be easily referenced by engineers too.
A good idea for more advanced teams is to incorporate visual examples of design components on a live web page or connect Figma with a tool like Storybook. This makes it easier to be referenced by everyone (including business stakeholders) and easy to interact with if anyone needs a live example.
The pitfalls of design systems
Thinking that it’s a one-time project
Some organizations can fall into the trap of thinking that developing a design system is a one-time project. In reality, design systems constantly evolve as the organization and its needs evolve.
You will likely have to design digital products for more devices in the future, and you might not have all the components for all possible devices now. That being said, creating and maintaining a design system is an ongoing process that requires ownership, either by an individual or a team, and constant contribution and curation.
Killing creativity
Like any automation process, it’s almost impossible to cover all cases. So sometimes, you’ll have to give your designers some leeway to make their own decisions about how to proceed without adequate components.
If this is not possible, you are likely to kill the creative vibe your designers need to do a good job and cause a lot of frustrations along the way.
Not defining design principles
The best design systems are the ones that are open for everyone to contribute. But that quickly becomes a problem if all team members have different perceptions and ideas for the design system.
Your design system needs a clear vision and goal - you need principles. This way, the design system can naturally evolve, and the designers can easily contribute and feel engaged in the process. The alternative is autocracy - having dedicated designers who facilitate and create all the components, but that doesn’t scale well.
Make sure you are not developing a design system with a top-down approach by making the process as collaborative and democratic as possible. This way, you can get a higher adoption rate among your designers and better scale your organization’s design system and design efforts.
Making a very detailed design system too early
Design systems evolve over time. They usually become very detailed once an organization matures and has enough design examples to learn from and replicate. However, startups in the exploration phase looking for product-market fit should take a less rigorous approach. Creating more general and less detailed components that can be modified allows for flexibility.
After all, if you are a startup that’s still exploring the market, you are likely to change your design over time. Therefore, it’s recommended not to get too detailed with your design system if you are at this stage.
Examples of some interesting design systems
Google created Material, a very detailed design system aimed at Android, iOS, Flutter, and web developers. It contains everything you would want to find in a design system, and even beyond that, with sections about sound and motion.
Material is your best example of a mature design system containing all the basic elements and explores how more advanced technological aspects such as machine learning could be included in design systems.
Airbnb has an interesting design system that shows nice visuals of how to design for different interfaces, including motion effects. It’s also a good place to learn why a design system is needed from a big corporate’s perspective.
Apple created its own ecosystem of technological devices (e.g. Mac, iPhone, etc.) as well as a design system that helps guide designers and developers on how to build applications for its devices. Apple’s design system contains interesting resources around design, accessibility, and localization, all elements that go beyond what standard design systems contain, due to the company’s deep knowledge in user experience and UI design.
To sum up, a design system could help you scale up your design operations, and ensure consistency across the board. What you need to remember is to allow flexibility in the creation of your design system and make sure you do not not make them too rigorous so that design solutions can evolve naturally. In addition, you need to make sure the process is as collaborative as possible to increase the design system’s adoption rate among your employees.One of the best ways to scale up your design operations and reduce inconsistency is by developing a design system. Here are the things you should know. One of the best ways to scale up your design operations and reduce inconsistency is by developing a design system. Here are the things you should know.
