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 information about 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 innovative!
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.