This post was originally written for Wolters Kluwer and published on November 13, 2019.
The GPO UX team, in collaboration with Product Solutions Development and with partners across all of Wolters Kluwer, is building a comprehensive design system to support product managers, designers and developers in creating expert solutions for our customers. I wrote about the design system initiative for the first time at the beginning of last year and more recently I shared how the design system enables more collaboration across all of our company. In this article I will explain what design systems are, why there is great value in having one, and why the design system will be key in achieving consistency across products, promoting reuse and helping local teams save time and money.
Wait… what’s a design system again?
A design system is a collection of reusable components and templates, guided by clear standards, that can be assembled together to design and build any number of applications. Simply put, a design system is useful for when you need to design not just one application, but multiple applications that you want to feel like a coherent family and solve similar customer problems. In order to create a consistent user experience, you need to define the purpose and style of things such as color, type, icons and spacing.
Having a robust design system at the heart of your company is beneficial in multiple ways. First, a design system enables faster design and development cycles because teams will never again have to start from scratch. The desired effect of this is that product teams can bring new products to market faster and at lower cost. Second, a design system ensures brand compliancy and a consistent experience across products and third, design systems foster collaboration – it creates transparency and eliminates knowledge silos between designers, developers and product managers.
An industry standard
Taking these benefits into account, it is not surprising many companies over years have invested heavily in building their own design system. Tech companies like Google, Microsoft, IBM and Salesforce but also companies like Audi and even the United States government have created their own specific design system. Studying these and many other design systems reveals a best practice:
- A design system only works when the team that is building it deeply understand the user’s needs and problems
- A robust component library helps to add new value by enabling innovation and the exploration of market adjacencies
- Full-page templates are critical to show the relationship between components, giving designers and developers the proper context
- There is no design system without documentation
A design system for Wolters Kluwer
The GPO UX team does work across divisions, so we get a bird’s eye view of what is happening across our organization and we are seeing different solutions for similar customer problems across divisions. We believe a design system will solve this problem because when we identify patterns and document them, it means we can:
- Ensure consistency across products
- Help teams get to market faster by letting them pull in consistent resources, rather than reinventing the wheel each time
- Save our organization money
- Allow designers to operate at scale
Our vision for the design system is two-fold. First, we want to offer teams that are looking to start with new product creation a starting point – a solid foundation to kickstart design and development. Second, we want to support teams that have existing solutions out in the market a clear vision – a dot on the horizon – where they can gradually march towards over time. We don’t expect teams to migrate to the design system overnight but provide a vision of what could be on the long term instead.
Our target audience consists of product owners, designers and developers. Each segment has different needs. A product owner might want to see if certain customer problems have been solved before or may want to have a point of reference for design best practices. Designers are always looking for clear guidelines and standards around things like brand, typography and colors. And last but not least, developers are out looking for ready-made components, styles and documentation, which helps speed up their work. The design system aims to meet all of these needs and more.
Crafting a design system is about clearing the way for others to invent and imagine.
– Josh Clark, Founder of Big Medium
Build on top
One of the more persistent myths around the design system we have encountered is that it should somehow cover close to everything a product team needs to (re)build their product. As we are trying to build a generic system this will inherently never be the case. Instead, the design system should be seen as a way to enable teams to pick and choose from a broad set of foundational patterns and components. These global foundations are the base, which the product team will enrich with domain and application specific features. This ‘build on top’ approach is the best way to adopt the design system. When applied in this way, it also allows for teams to promote successful additions and amendments back to the global foundation layer.
Where are we now?
We started the design system initiative by mapping the most common user journeys, which we call patterns. For each pattern we designed full-page templates, which we then broke down into components. When we had the components defined and designed, we wrote documentation for each of them (e.g. buttons, dropdowns, etc.). We created central tooling, a clear design process and a contribution model and above all we wanted to win as a team.
Many workshops and iterations later we have now created the first version of the UI Kit – a versioned, comprehensive kit of visual assets to speed up the design process. We have also created standards and guidelines for our fundamentals and components and are currently busy doing the same on a pattern level. In collaboration with the Global Brand Organization we have also managed to align on one consistent, recognizable and simple way to represent the brand in our products. We are now hard at work in close collaboration with the our development team to wrap-up the code library with drop-in front-end components, which is in-sync with the UI Kit.