As DPDK’s creative director, I have seen the company evolve considerably – where once we started as a production agency, we are now a full-size digital agency, doing everything from branding and strategy to the production of digital products. At DPDK, we believe in transformative digitalism and in helping brands become their best digital selves. Our strength comes from our talented in-house team, holistic approach, and our ability to adapt to an ever-evolving digital landscape by anticipating the needs of the industry.

2020 has been a pivotal year for us, and the design industry as a whole. The monumental events of this year have forced us to push ourselves – not only to find new, better ways of working together remotely, due to pandemic restrictions, but also to question our commitments to racial justice and diversity; what does it mean to be a truly “inclusive” agency, and what does it mean to do work that spreads the values of equality and inclusivity to your clients, as well.

An illustration from DPDK's inclusive design system, showcasing characters of different backgrounds, abilities, and ethnicities.

This year, we set out to create an inclusive illustration design system. The goal is to make it easier for us to create illustrations for our own content, on our website for example, but also to ensure that that content is reflective of the world we live in – showcasing a diverse array of characters from different backgrounds, ethnicities, and abilities. Here’s how we did it, with the help of Adobe XD.

A snapshot of screens in Adobe XD, showcasing DPDK's inclusive design system with its different characters of diverse backgrounds.

Treating ourselves like a client

In the Netherlands, we have a saying, “It always leaks in the plumber’s house.” Essentially, it’s difficult to fix your own stuff because the work you do for others takes precedence over the work you do for yourself.

We were advising brands that we worked with on the need for design systems and custom illustration styles and then we would design it for them or help them find the right resources to create something themselves. We knew the importance of doing something like this, but we hadn’t done it for ourselves. This is where the idea for an illustration design system began to take root.

The DPDK website is shown with various pieces of content, such as articles, all of which had images from its inclusive design system.

From our company perspective, we started to see a need for a marketing department. We needed to liven up our communications in a consistent, scalable way, and I wanted part of that to be our own illustration style. The difficulty with an illustration style is that it is often unique to the creator. There is a talented or skilled individual who has crafted their unique illustration style over the years.

The trouble is, we aren’t an agency large enough to afford a full-time graphic designer not working on billable client work but solely devoted to creating illustrations for us. I immediately recognized the need for multiple designers to work within a structured illustration style. We needed something in place so that, even if different designers were working on it, the style would be consistent and in line with the company’s signature illustration style.

Creating an illustration design system

We approached the creation of our illustration design system the same way we would any product. We set out to create a vision, decided what it should look like, and then we did a lot of testing. The first phases were quite basic. We started with PDFs and, over time, matured it into a couple of documents. These documents gave an overview of the illustration styles, what it was, and what it would entail. They consisted of a mix of patterns, brushes, components, shapes, and guidelines.

Illustrations from DPDK, showcasing the typography used in its inclusive design system.

As the illustration design system has evolved, we’ve moved it into XD to give every designer access. The file contains a guideline document for the elements with some basics around the colors, how can you use different elements, and what it’s about. Characters have their own set of guidelines governing the dimensions, proportions, skin tones, and even how we perceive our characters. We have a components library that grows with each illustration. This serves as our design system allows us to create illustrations like Lego blocks when we need to and gives us a base for creating new, custom elements.

Baking inclusivity into the design process

At DPDK, we recently made an outward commitment regarding our inclusivity and even have an equality, diversity, and inclusivity (EDI) task force in the company. We needed our illustration design system to be a reflection of our agency first and our global audience second. In other words, we needed to make sure our illustrations reflected a diverse group of people.

As we were developing our illustration design system, we were creating everything on a white background at first. When the canvas is white, you just need a few strokes to create a face and that face doesn’t need a skin tone because it’s just lines. As you start to add color and shapes to the background, the strokes on their own aren’t enough to be visually impactful. You need to add color to those too.

We knew that we were going to need to create guidelines for the colors that we could use to signify skin tone. This took us some time. We thought at first about using brand colors like purple and turquoise, but as the illustration collection expanded we would inevitably start to use more colors, like yellow or red, which are related to actual skin tones. This would create its own problems and could come across as racist or short-sighted. We were absolutely adamant about preventing that. We realized very quickly that we needed to be realistic about the colors used and decided it would be best to go for natural skin tones. Achieving these real life tones took a lot of trial and error. In the end, the best result came from looking at actual photos of faces across the wide spectrum of skin tones and using the eye drop tool to match the shade exactly.

Illustrations from DPDK, showcasing a diverse range of characters of different sizes, shapes, and skin tones.

Monthly retrospectives to assess our design system and diversity efforts

So this is the part of the process where the team took control and continues to take control to this day. For every illustration, they make the decision and it’s up to them to keep an eye on the balance. They have to ask themselves, “Does this actually reflect our agency, the world, and what we have done in past illustrations?” Then, every month we have a retrospective on what we did in terms of illustrations. There are a series of things we check in these retrospectives. One is consistency, one is quality, one is the number of things that we created, and one is always the EDI taskforce scan. The purpose of the scan is to determine whether or not our illustrations reflected our diversity policy.

This has helped us create some of our illustration guidelines, particularly for characters. We have rules focused on how people look and how diverse they are. This also helps us create the elements we need. A particularly good example is illustrating female hairstyles, which are often far more diverse than their male counterparts.

Our illustration design system has taken us to a whole new level. Before, it felt like something was lacking. We had visual assets, but they were very basic and usually just had to do with our logo. Now, we can add characters and bring the whole company to life through our visuals. We are showing different people and reflecting our own team. So, on a personal level, it feels like, “Yeah, finally.”

A dynamic and inclusive agency, in both owned and client work

Creating our illustration design system has been a challenge and we have learned a great deal along the way. It makes me proud because we publish so much content now, and I know that I don’t have to worry about it being a unilateral vision of the world. So that makes me proud on a personal level, as a partner, and as one of the company principals.

We started doing EDI assessments for all of our clients because we realized it was so necessary. We developed a process where the new business team goes through all of the client’s photographs and illustrated content and then creates mood boards from them. We then showcase that to the client so they can see what they have in terms of visual content on their website. Then we ask them, “Is this what it should look like? Because we don’t think it is.” And that’s where it starts to get really interesting.

Inclusivity and diversity are always on the corporate agenda in one way or another, just like sustainability. So when we bring this to our clients, they tend to recognize it and respond to it. So what we have started to do, and I would recommend that every company start doing this, is a diversity assessment on three levels.

  1. What’s the visual representation of the ethnicities and the male, female dispersion that you show? Does it match the vision that you have?
  2. In terms of content, how much are you, or are you not, sharing about your vision and your approach to equality, diversity, and inclusivity? Is your current content demonstrating your values and your vision on that?
  3. How inclusive is your current web design?

This assessment is especially impactful in the Netherlands because we have a lot of immigrants speaking different languages. To create a very inclusive product design, you have to consider things like that.

The Dutch Pharmacist Association, in terms of product design, is a perfect example. It has a vocabulary list for people where it explains difficult words very simply. It has over 200 icons for people that are illiterate so that they can find what they need. For medications, it has explanation videos in different languages. This is a perfect example of a very inclusive product design. And it’s important to keep in mind that inclusivity may look different for different clients. That’s why the assessment has three levels. Usually, there is always one level where the client can see that they really need to step up their game.

A brighter, more diverse future for design

The DPDK Illustration design system is not final, nor will it ever be. It is a living system intended to evolve as we do while staying true to our base design principles. Current and future developments include animation styles and personalised illustrations for each DPDK team member. Some of these illustrations have already been put to use on individual mugs at the office to make coffee and tea breaks more enjoyable and COVID-friendly.

At DPDK, our eyes are open to the challenges we all face, as a world and an industry, particularly with a continued lack of diversity in design – this is something I hope we’re changing for the better, and now it is something we’re bringing to our clients as well.

By using the example of our illustration design system, we’ve been able to inspire many of them to create more inclusive brand imagery as well. We hope the lessons we’ve learned along the way will help you do the same, as we all work together to make this world a fairer and more equitable place.