Why every brand should love Design Systems

Een blog van Steven de Lange, in het Engels, die afgelopen week op de site van aFrogleap - a Merkle Company verscheen.

This is our love letter to Design Systems: the life-saving method of designing and managing a library of brand and interface elements.

If you’re a marketeer, product owner or art director, you know how hard it is to keep your brand consistent over a growing number of channels and devices. With every newly hired designer or agency, there is the absolute certainty that inconsistencies in your brand experience will pop up. Luckily, Design Systems are here to save the day.

A Design System is a holistic mindset and a way of working. It helps organisations create and roll out their identity and UX over a big number of platforms, all managed from a single point of control. During our work for NU.nl (The Netherlands’ biggest digital news outlet) and Moneyou (a fintech challenger), we fell in love with this component-based design method. In this article, we’ll share our passion and explain you all the why’s and hows.

Build components instead of pages

A Design System is best explained as a living library of reusable individual design components and overarching rules and principles. These rules and principles are a direct translation of your company’s vision and mission – they make sure that your purpose is being met in your designs. Your principles could for example focus on clarity, speed and transparency.  You can then translate these principles into components: things like buttons, coding snippets, navigation patterns and brand-specific style elements.

This whole system of design ingredients makes it possible to create an indefinite number of new interfaces without depending on an art director or designer for every single output. This lets you speed and scale up your design output across channels, regardless of the size or form of the interface. Since developers also work with components, a Design System makes handovers much easier. It even makes it possible to dynamically generate new screens that fit your design rules and principles. Now that’s something we’re sure your coding colleagues will be very enthusiastic about!

Our tried & tested approach

Building up a Design System pays off, but can be quite a struggle to start with. We learned to work according to the 8 rules below:

1. Make an inventory of existing design patterns
2. Find patterns that look different but act the same
3. Bring those patterns back to one single pattern
4. Create design files for these patterns based on the atomic design principles
5. Name the patterns to create a common language
6. Update existing screens with these patterns
7. Document the patterns
8. Do regular maintenance and update with new components if necessary

Pitch it!

Convincing your organisation to embrace Design Systems is the first step. Saving time and money are concrete benefits, but good vibes in your teams count as well. There are many more advantages to be mentioned here, but the following 6 benefits are sure to convince any decision maker in your organisation:

1. Consistent designs ensure optimal customer experience and branding power.
2. A Design System directly ends the ever increasing number of design assets, guides and documents.
3. Developers don’t need to rebuild the same pages and elements over and over again.
4. Designers don’t need to ask the same questions over and over again.
5. Junior and senior designers immediately understand why and how the system works, and best of all:
6. You free up valuable time for the stuff that matters most: UX strategy, research and validation!

We can tell you more about how to streamline and scale-up your brand and UX. Just call or e-mail us for a cup of coffee and free advice. We’re ready to help you!

jesse@afrogleap.com
+31 6 24 44 99 17