Design systems: why brands need one

Often, it’s strong branding that makes us remember these brands. Nowadays, the function of a product or service is mostly taken for granted, and our focus shifts from function to form. The design of a product or service has the power to capture our attention and stay with us for a very long time. The colors, the fonts, the icons, the images, the tone of voice - the whole experience makes us remember.

Every touchpoint with your customers is an opportunity to tell them who you are and what you stand for. But when working with multiple teams, departments, and products, how do you do this in a consistent and scalable way?

Design systems came into existence to help us deal with increasingly complex digital ecosystems that contain more products, services, and touchpoints than ever before. They’re a logical move for larger brands that want to provide a consistent customer experience (CX), scale their design efforts, speed up their workflows, and improve collaboration. 

A design system boils down to a centralized library consisting of a cohesive set of functional and reusable design elements and components. From patterns, brushes, components, shapes, illustrations, and typography to instructions for sizing, spacing, coded buttons, and forms. Guidelines, values, and examples of use are also an important part of a design system. 

On top of that, DPDK adds in an overview of production files that are based on the library and guidelines. In a nutshell, a design system has all the tools that your designers and developers would need. 

Successful design systems are definitely not static and need to continuously grow. Brands that have mature design systems provide a more consistent CX, have higher customer satisfaction rates, and get products to market faster, according to Forrester. The three main outcomes an ideal design system achieves are:

Introducing a shared set of rules and guidelines for building and (re)using components makes it easier to create consistent experiences across platforms.

It enables developers and designers to reuse elements and components, instead of having to build look-a-like components from scratch over and over again. Teams have more time to focus on what they do best, creating the best possible CX.

Increasing your efficiency and consistency will help you build products faster and better. Scaling becomes easier and cheaper.

Design systems, when done right, will have a huge impact on performance, both from a brand and business side. To showcase that I’m not only talking the talk here, but also walking the walk, let’s take a closer look at DPDK’s own illustration design system (IDS).

At DPDK we’re strong advocates for design systems and have been advising brands on the importance and need for them for over 15 years. While we’ve built the DPDK design system a while back, our IDS was only created when our marketing team started and our blog began to take shape. The IDS is basically a system that sits within that system. I gave a talk about designing for scale at Adobe MAX last November where our design system is discussed in detail. You can check out the talk and key takeaways here.

Anyway, illustrations are a great way to  liven up communications and set your brand apart. And unlike stock photography they’re unique and creative. However, the challenge with an illustration style is that it’s often dependent on the creator.

We also wanted our IDS to stand the test of time, and not rely on one single designer. That’s why a structured illustration style with which multiple designers can work is key. An IDS makes sure that the style stays consistent and helps scale in a manageable way.

When you create a design system you always start out with a vision. You need to answer a couple of important questions like who you are and what you stand for. Then, you translate the answers to these questions into your visual identity. 

Our goal was to have a unique illustration style which was simple, colorful, and could cover lots of digital industry topics. Scalability was an important aspect as well. The illustrations needed to be able to be broken down and built back anew in different ways. 

We started with basic graphic elements, simple characters, and a lot of testing and learning. From there, we developed a rudimentary first version of the IDS. The first few PDFs we started off with consisted of guidelines, characters, objects, shapes, brushes and a mix of patterns. 

Eventually these matured into a live Adobe XD library that every designer at DPDK can access and use. The elements within this library are like Lego blocks that designers can easily create new illustrations with. If the components are not provided in the library, designers can create and add new items. The IDS gives our designers the creative freedom to design ‘inside the box’ and experiment while safeguarding our illustration style.

The marketing team on the other hand uses the illustrations to make our brand come to life. This goes further than publishing content on the blog. You can see the IDS in action at every touchpoint, both online and offline, and for external and internal communication. 

Think about the whitepapers we prepare, presentation decks we create for meetings or direct mails that are sent out. The IDS is used for employer branding and internal events too. The unique style and its expansive application help us differentiate from competitors.

A design system needs to continually evolve. Regular feedback is an important aspect of ensuring progress. Which is why we host monthly review sessions where designers can pitch new ideas and discuss what can be improved in terms of previous designs. 

When we made an outward equality, diversity, and inclusivity commitment in 2020, we quickly realized that our illustrations needed to reflect a diverse group of people. We’re an international bunch at DPDK and that wasn’t reflected in the IDS nor was it representative of the world we live in. 

The first illustrations were drawn on a white background which translated to characters ending up with mostly white skin tones. In an effort to manifest more inclusive designs we started experimenting with different colors like red, yellow, and green. But we recognized that wasn’t the way to go. 

Using real-life photos and taking inspiration from our own team we eventually settled on using realistic colors and decided to go for natural tones. With a set of guidelines we determined dimensions, proportions, and skin colors of the characters. With that our characters evolved into diverse figures with a range of skin colors, fashionable outfits, and hairstyles. Through our illustrations, you can see who DPDK is as an agency, as well as how we see the world.

Working with the IDS saves us an average of two hours per illustration (depending on complexity). Multiply that with four and you’ve already freed up a designer for a day’s work. That’s huge. This way our designers have more time to be creative and focus on design and craft, rather than having to spend time on manual work and repetitive tasks.

I don’t have to worry about inconsistency or freeing up resources as more than ten different designers have already worked with the IDS and evolved it further. And our marketing team is able to publish content and launch campaigns promptly. To sum up, our IDS efforts have taken DPDK’s branding to the next level and help our team to quickly scale outputs and create on-brand experiences.

Are you ready to empower your team with a future-proof design system?