Design Systems

Design systems are here to stay, for good reasons. They save design and development time, they save money and ensure quality. Though not every company may need one, or can afford to implement one, I find that just having a design system mindset improves processes, increases product quality and reduces costs.

ZIVVER SILK

The logo of ZIVVER is a hummingbird. We named our system SILK because hummingbirds often weave their nests out of silk, one of the strongest threads.

ZIVVER started with an Outlook plugin and a web application. Originally interfaces had been designed using Google’s material design for web applications, and following more or less the standard style for Windows products. As the number of products and environments grew, consistency became very hard to maintain.

I started auditing the component for a design system and led the efforts towards consistency and simplicity by reducing and unifying the color palette across the products. Before, changing a colour took 6 hours, there were over 600 inline code references. After implementing the new - and accessible - colour palette, it takes 2 minutes to change a colour, all references are in one source.

After getting buy-in from leadership and from developers, I mapped out libraries and audited product components. We started documenting basic components in one website, and worked with marketing in clarifying tone of voice and other shared elements.

Creating this shared view of our products, let us increase consistency. A design system is a perfect tool for this.

What we achieved so far - unified libraries for designers, code refactoring to simplify developers libraries, stories involving UI changes are also evaluated for consistency across products and platforms, a website where we can all go for one source of truth, increased accessibility (colours, typography), closer collaboration with marketing.

How do you balance integrating your product with native behaviors with maintaining brand identity? That is one of the biggest challenges for SILK.

The email address chips is a clear example of the consistency a design system mindset can bring.

aegon Pattern Library

One of my favourite projects at HCL/Aegon was our Pattern Library. It was my first experience with bringing styleguides to the next level. The goal was to bring consistency and efficiency by creating reusable components, creating solutions to recurrent design problems.

The library meant working closely together with all the designers, also involving developers, content managers, marketeers  and management. We collaborated to create consistent reusable patterns and focused on improving processes.

The first stage was taking an inventory of existing elements. We took atomic design approach. I love spotting structures and behaviors that repeat, finding the structure in a system, so my contribution was mainly 'pattern hunting' and describing these patterns, working on guidelines for pattern use.

For example, I collected every type of table we used, printed them out - also documenting interactions - and organized a workshop with all designers. Together we evaluated them, agreeing as to how to simplify the available options while covering our use cases and maintaining design quality.

I revised all the colour palette, and the icons. We looked at different types of content blocks, defined form structure and validation, looked at page templates.

I was lucky the company supported me attending a Design System conference in Helsinki, where I got to listen to the design systems master Nathan Curtis.

If you would like to see more of my work,