Building a design system… not just a UI kit
In the last couple of years I have seen the term design system pop-up to describe a range of systems. They were all aiming to make the lives of the designers easier when working on complex websites or applications from a UI point of view. But in my opinion they where barely scratching the surface of what a design systems can be. This article describes (in short) my ideal design system and what it can do for a company in digital transition.
So what’s a design system?
In short a design system combines a generic front-end component stack and it’s equivalent, a component library in the most common used design tool; accompanied by UX rationals, technical documentation and the most common proven solutions… But it can be so much more.
Why create a design system?
In modern companies user experience has gone from something you sprinkle over the top of your product to being the foundation on which it is build. We see that companies transitioning into the digital era are falling into a hiring frenzy to feed the need to digitalize. But lets face it, these new hires do not have all the answers when creating a user interface. They work in different ways, they work with different tools and they all work at different levels of maturity. They are probably not even all designers. And none of them have the power of foresight to anticipate on what the customers need in order to navigate through the product in the future.
It is key to understand that, other than the name ‘design system’ suggests, it’s not just a fancy name to describe a UI kit. When set up right it is a great platform to inform, inspire, promote and be the single source of truth for everybody within a company working on different digital channels.
In this age of digitalism a smart company needs to be prepared to move and make changes to the product when the customer demands it. The faster they can make these changes the better.
This becomes very tricky when there are different teams working on different projects or products at the same time. So creating a solid but flexible base on which the company can build, optimize and extend is a must and a good design system is one of the tools that gives you a head start.
“It kills the creative process!!!”
Becoming more innovative.
Often I hear people say that design systems kill the creative process. To them I say, it’s the exact opposite… It actually enables you to be more creative!
I figure that when you start implementing consistent, proven patterns and solutions and stop having to reinvent the wheel every time you do a project you’ll find that you have more time to deal with the real problems the customer is facing. Ideally these newly found solutions find their way into the design system as proven patterns and solutions so other teams within the company can benefit from your creativity.
Generic components (the building blocks).
In this article I will not go into the technical details of how generic components are created and to which requirements. But it is good to understand that a flexible platform on which you can build and extend depends highly on these functional reusable building blocks. Like; Input, Output, Messaging, Content, Navigation and Basic styling components. Being able to edit, extend, add or remove these building blocks gives a company the agility it needs.
Who’s the user?
Design systems are mostly used by developers and designer. For them it is their day-to-day tool to get information on how their company implements it’s generic components. How these components function, what code and which design patterns are being used.
…we create a shared understanding.
So the target audience are the “creative” people… but the great thing is that it is also an ideal tool to empower everybody else (business analysts, scrum masters, solution architects, product owners, subject matter experts, newbies to the company, etc.) to be just as creative in their way of thinking. By giving them information and transparency on the building blocks, standards and best practices, we create a shared understanding.
Communication between different crafts becomes faster and easier as they are now speaking the same language. Ultimately creating a better experience for your customer.
What goes into a design system?
First of all a design system portal is a living document and will never be complete. It’s an empirical process. The information, patterns and components found on the portal should be edited, extend, added or removed based on observation, experimentation, new findings and gained experiences. Doing so we keep up with rapidly changing environments and user needs.
Not all users interpret the information in the same way.
The design system needs to be easy to understand by everybody and the breakdown (as well as the content) of the portal should reflect that need. But not all users interpret the information in the same way therefore an Onboarding section is needed to explain the system as well as the vision of the system by showing the Roadmap and Strategy. Here the user can also find out how to they can Contribute.
Design principles, Customer insights, Accessibility standards and Tone-of-voice are extremely important to give all users a fundamental understanding of what insights and standards the actual product is based on and how the product communicates with the customer.
The breakdown continues with Education and training containing information on anything to do with implementation of the standards and generic components. I think short videos are the ideal way to show the user how to do whatever they need to do.
The fundamentals of the system will be explained in a separate section called Basics. Here designers and developers can find all information about the Grid system the product is built upon, the Page layout’s the product adheres to and additional information about the Typography, Color usage, Icons and Logo. Basically all the information you’re used to finding in the style guide.
Depending on the flexibility of the systems Code base and the measures you can take to configure, the styling will need to be clarified within a separate section. This Style configuration is usually something not everybody can customize for their specific need as changing something small can have great effect on your whole product. But the basic knowledge about this configuration is very useful for developers and designers so they can make informed decisions.
…just by clicking on the component itself.
The reusable generic components will be explained in the Component library section. Here the user will find Living components so they can see all states and interaction just by clicking on the component itself. This approach is way easier to understand then having to read through vast pages of documentation. But of course all the UX rationals and Technical documentation for the generic components are here as well.
Designers should also be able to download an equivalent of the Component library in the most common used design tool. This enables them to quickly drag and drop features together using the exact same components that are available to the front-end developers.
Reusable proven solutions can be found under Patterns, Templates and examples, promoting consistency across all channels and devices. It is important to keep adding to and refining the patterns based on gained experiences by the teams.
A good design system informs and inspires the user. The Blog section allows you to do just that. By informing the user you contribute to the their creative thought process. Inspiring them to be creative and innovate based on newly gained knowledge. Through this blog the user is also able to contribute and inspire their peers as well.
Regular updates about new insights, new patterns and new adaptations can be found in the News section. If there is an update email sent to the user they should also be able to sign up and find the old updates Archived here as well.
And lastly… The user will always have questions about specific details. It is important to give clear instructions on how to get Support and via which channels.
So to recap… My perfect design system breaks down like this:
- Onboarding
Introduction, roadmap, strategy and how to contribute. - Documentation
Design principles, customer insights, accessibility and tone-of-voice. - Education and training
- Basics
Grid system, page layouts, typography, color usage, icons and logo. - Code base and Style configuration
- Component library
Living components, UX rationals, technical documentation - An equivalent of the Component library
- Patterns
- Templates and examples
- Blog
- News/Archive
- Support
The user expects to be heard and get support.
As you might imagine creating a design system takes a well organized team of professionals. Once the actual system is up and running it needs to be governed and the users need to be supported. This is an equally important and difficult task.
In addition to the core team of developers and designers that now coaches the teams building the products and iterate on the system, there should be a kick ass Product owner that is well versed on UX design and Front-end development. The Product owner will set out the roadmap and strategy and should spend a lot of time gathering user feedback on which the backlog can be ordered. As well as putting in place (and smoothing out) processes to make sure the user can easily contribute to the system.
What are the 10 biggest benefits?
Whether you are a developer, designer or a different kind of user, having a design system is (1) a great foothold to base decisions on and it reinsures you that you are doing things the way they should be done.
(2) It educates and trains people that are not as well versed in the technical or design way of thinking.
(3) When making a change to a style or generic component it automatically changes throughout. (4) This maintains a high level of quality and increases consistency across all channels and devices.
Say goodbye to managing different portals! (5) All your technical and UX related documentation is hosted in one place. Creating a single source of truth.
By linking up development and design you benefit by (6) having a shared understanding of the effort it takes to build interfaces.
A design system provides an up-to-date and ready to use component library for developers and designers. This means (7) a giant reduction of development costs and (8) a major acceleration of time to market.
When the whole system lives in the public domain for everybody to see and use, it showcases the vision and the level of professional maturity of the company and the people that work there. (9) This makes it an amazing promotional tool for the company as well as for recruitment.
(10) By using reusable generic components and patterns you do not have to worry about reinventing the wheel every time you do a project. It lets you focus on the important stuff… Customer experience.
Drawbacks?
Drawbacks occur when a user deliberately chooses to cut corners, does not adhere to the standards and does not document that they are doing so. By doing this the user cuts all ties with the system and will not be able to reap the benefits of the design system.
In closing.
A design system can be whatever your company can afford. I suggest you take a good look at what shape your product is in. Maybe do an audit on the elements and components in use by your digital channels and start creating your own design system from there.
And by the way…
A UI kit is a great starting point :)