How including Illustrations in the Design System fostered collaboration between brand and product designers?

When I joined Doctolib 2 years ago, illustrations were already a pillar of the Doctolib Brand Identity. The Brand Team (3 people at this time) was creating lots of illustrations for several teams in the company, but no one really had access to what already existed. We did have a Brand Center where there were some basic illustrations but it wasn’t frequently updated.

I immediately noticed it was a shame that people didn’t have access to the huge and amazing library of possibilities and couldn’t discover or use everything that already existed. Even worse, they were just simply not aware the Design Team crafted so many assets that could suit their needs! Moreover, I also discovered that Product Designers often implemented illustrations into the product, and even if we’re part of a global Design Team, it was even harder for them to have access to the catalog.

Now that we’re a team of 9 brand designers creating around 15 new illustrations every week, it’s even more useful and essential to have a well organized set-up and frictionless processes to be more efficient at scaling.

Step 1: putting all the illustrations at the same place

Let’s take a concrete example, back in the day in 2019 when Garance had to work on an illustration of a clock for a Marketing email, it was stored in the ‘Marketing’ folder in our Brand Design Shared Drive. And when Charlotte created an illustration of a book to express knowledge for internal communication, it was in the ‘People’ folder in our Brand Team drive. But both of these illustrations could be used for lots of different purposes.

So the first thing we had to do was to host all our illustrations in the same folder in our Team Drive. We created a folder named ‘Illustrations’ into the ‘Resources’ folder (at the root of our drive) and started to bring back all the existing illustrations (source file + HD export) into this folder trying to organize them by categories: Doctor, Patients, Doctolibers, Objects, Interfaces, Locations… All the new illustrations were of course directly made and stored here.
We even created a template to be sure that all illustrations are built using the same dimension and shared a library in Adobe Creative Cloud to easily access all our colors and gradients.

Step 2: Implementing Illustrations in Oxygen, Doctolib’s Design System

While doing research for the “best Brand Center” tool, the Product Design team was rolling out its Design System using ZeroHeight (and Storybook). It became obvious to me that as a global team we should all share the same tool. One team, one dream!

We then created a Figma File with all our illustrations. Trying to keep consistency with our drive: one page for each category (Doctor, Patients, Doctolibers, Objects, Interfaces, Locations…).

We even pushed it a step further and created components for each illustration and by publishing the file into our Figma Library, we made the whole illustration library accessible for all product designers.

In the Illustrations Figma file, there are now components as families of illustrations, with variants as items: for example in the category Doctor, we have a family for each speciality and then variants inside this family depending on the kind of illustration (is it 1 person, 2 people, a group, are they standing up, sitting behind a desk, in a consultation…)

To ease the workflow of Product Designers, we created a component named ‘illustration placeholder’ in their Core Components file that is directly linked to the Illustration library. Thereby, they can add it in any layouts and then search for the right variant depending on their need.

We have today more than 3.1k instances of the illustration placeholder used in +100 files.
It’s convenient for designers, as they have the latest illustrations, can switch between them easily, and for developers, as they can directly download the illustrations in the right format with the right name. This Placeholder component is a great example of connecting teams around the Design System.

I used to download all the illustrations directly from the brand center: I saved them in a dedicated file and then I forgot I already saved them so I re-downloaded them… We clearly improved our efficiency with this new process”

Emilie T. — Product Designer

It’s also super helpful for brand designers to have access to the library within 2 clicks.

As we’re mainly working on Figma for every digital asset, it’s super easy to change from a variant to another while adding any type of illustrations in an ebook, a post for social media, an infographic… As of today we have almost 5k instances in our brand files

It is super helpful to have all illustrations in one place. When I use them in any of our digital assets, I don‘t have to search forever, download and add it. I can just import the illustrations from the components. This saves me a lot of time.“

Lana P. — Brand Designer

As all the team create illustrations, we found a way to make as smooth as possible the upload of new illustrations. I created a tutorial, with easy steps to follow and in less than 1 minute anyone could be able to add a new illustration. We also set up a dedicated meeting every friday as a reminder to take care of the new illustrations created during the week.

By setting up this project we allowed everyone in the company to have access to +1,6k HD illustrations directly from Oxygen. We’re updating our library with new illustrations every week and always try to improve our approach by challenging ourselves in the way of naming, organizing and producing our illustrations.

We even took it a step further by creating a circle version of any illustrations existing, working with a Template component to ease the process. Meaning each illustration exists in its classic version and in a circular one that can be used in some of the interfaces when a background is needed.

Last, but not least, our new illustrations organization is so neat, that the DS team is currently working on replicating our structure to the tech structure.

I’m not gonna lie, it was a huge amount of work to implement all that, it takes a lot of time, but it’s so rewarding when you see one super specific illustration used in a director’s presentation. And moreover, I’m so grateful to be part of a global design team and to have been able to make a small contribution in that way.