Building Our Own Illustration System From the Ground Up at Mirakl

In 2020 we decided to rethink our design system. Our objective was to support the development of our products more efficiently, and this is how ROMA was born. Beyond the usual elements of a classic design system, we wanted to include an additional dimension: illustration.

Mirakl offers the industry’s first and most advanced enterprise marketplace SaaS platform. With Mirakl, organizations across B2B and B2C industries can launch marketplaces faster, grow bigger, and operate with confidence as they exceed rising customer expectations. Our users have multiple objectives when using our products:

• Gaining efficiency in their daily tasks as the operators of a marketplace,
• Developing their marketplace and product offering on a large scale, and
• Sustaining their business relationships, both with sellers and end customers, whether it be consumers or B2B buyers.

The actions they take on their Mirakl-powered Marketplace have a direct impact on their business. Some actions may seem complex or put unwanted pressure on users who fear making a costly mistake. This is a common problem for SaaS digital products and one that we decided to tackle head on by renewing our design system.

In addition, our products tend to grow with more features and connections. The functional risk of replicating complex interfaces on a large scale motivated us to implement our design system. However, the duplication of similar screens risked creating a “monotonous” aspect to the platform and lowering the level of attention, thus increasing the risk of errors. We have turned this risk into an opportunity by integrating illustrations into the design system to give a human dimension to this work tool, increase attention levels and set it apart from other back-office tools.

We had never previously included illustrations in our interfaces so we started by mapping out why we need such a solution:

Why create our own illustration library? What would be its objectives ? Why do we think that illustrations would add value to our products? How does this translate into concrete action?

We started by identifying the purpose of introducing illustrations:

• Preserve the level of attention of users by creating “reassuring” tools
• Improve the affordance of our features by wisely guiding the attention of our users
• Develop internal communication and branding within the product
• Break the “formal” aspect of a productivity back office platform while staying professional.

Next we went on to consider the steps needed to construct the illustration library:

Step 1: discovery and ideation

After defining the objectives of our illustration library, it was time to go into the exploration phase to find our own style. Although it was not the most simple task of the project, I found it to be the most rewarding part of the whole process.

Spoiler Alert: being creative and finding a unique style these days is anything but easy! We are constantly fed with information, whether it be through the media, advertising or social networks. In recent years, illustrations within digital products have evolved considerably and this is noticeable after a tour on Dribbble (. . . ) Dropbox or even Air band. These big names in design gave me the feeling that everything has already been done in terms of illustrating digital products.

Benchmark

Fortunately, at Mirakl, we’re not afraid of a challenge. On the contrary, armed with our creativity and our pencils, we set out to conquer our style with a guiding principle in mind: one that is unique, recognizable and professional to be consistent with our brand image.

First, we had to gather our ideas and ask ourselves a few questions: Which style does Mirakl want to convey? What are the current trends that might lend themselves to this and, conversely, do we have an idea of what would not fit the company’s image?

To answer these questions, I created a moodboard to gather our ideas and guide my first drawing.

Moodboard

Then I explored different artistic styles. I tried to create different shapes, work the perspective and try different color palettes. Our goal was to preserve the user’s attention so we have limited ourselves to 2 main colors and 1 secondary color.

As I explored various avenues, I wondered how we should represent our users.

As mentioned perviously, one of the reasons for including illustrations is to humanize our product. But how exactly ?

Because if we apply the first definition of the word “humanize” it’s a question of illustrating humans or characters resembling humans. So, how can we find a representation of “the human” that represents everyone?

To understand these important concepts, we should remember that inclusiveness means integrating everyone in order to put an end to exclusion. Diversity, on the other hand, strives to recognise the many and innumerable variations of human beings through several criteria such as gender, skin pigmentation, sexual orientation, religion, culture. Diversity is based on a notion of “difference”, while inclusiveness means making room for all diversities. Several thought leaders in the sector have written on the subject:

• Netflix’s Vice President of Inclusion Strategies, Vernā Myers, sets out this fundamental difference : “Diversity is being invited to the party; inclusion is being asked to dance”,
• Imane Asaad, Student in Innovation and Digital Transformation at Sciences Po Paris and Telecom Paristech, also considered “Why is it better to talk about inclusiveness rather than integration or diversity?”, and
• Introducing these concepts into product illustrations is not a simple matter, as Meg Robichaud, former Lead Designer at Shopify, explained in her article: “You Can’t Just Draw Purple People and Call it Diversity”

With these ideas in mind, we carried out a benchmarking across sectoral leaders: Jennifer Hom made the choice for Airbnb to opt for intentional and realistic diversity with a variety of skin shapes and colors. Quentin Vijoux chose to illustrate anthropomorphic animals for Intercom, which made it possible to represent all their clients in an inclusive way without worrying about diversity criteria.

With the search for inclusiveness, I also had in mind our own constraints:

• Illustrations must remain a secondary element of the design system and not take over Product Content,
• Illustrations will be used in specific business situations, so need to remain highly professional, and
• Illustrations must fit into our already established brand image (graphic charter, consistency with tone etc)
• Also, the work of illustration being infinite, it was necessary at first to restrict ourselves to about twenty illustrations in order to focus on key messages and specific situations. At first, twenty illustrations seemed like a lot at once, but it is ultimately very little when compared to the diversity of users I wanted to represent.

Human-shaped characters

To be consistent with our product tone, it seemed better to remain in a realistic representation of our users. Our brand image and our design system aim to stay sober and uncluttered, with a touch of originality.

Diversity
To promote diversity and inclusion in our illustrations, we embarked on the first and most straightforward step of creating a mix of characters across various genders and ages. This involved incorporating multiple shapes of faces and haircuts to ensure representation.

Naturally, discussions about diversity wouldn’t be complete without addressing the aspect of skin color. Our team engaged in extensive debates on how to handle this crucial issue. One option was to follow the example of Hom and use a palette of skin colors. However, after careful consideration, we realized that a realistic colorimetric approach could be limiting due to its restricted nature.

Another approach we considered was using intentionally extravagant representations, such as a blue shirt (our main color) or violet (the secondary color). However, we recognized that this might overshadow the intended design and place illustrations in a more dominant role than necessary.

Ultimately, we decided on a unique solution — incorporating negative space. We implemented a gray line that elegantly defines the silhouette of our characters (see below). This approach not only retains diversity but also allows for a distinct and inclusive design.

By embracing these creative decisions, we believe our illustrations will successfully convey the importance of diversity and inclusion while maintaining their primary purpose in the overall design.

In our pursuit of diversity, we value representing users with disabilities and have incorporated accessibility rules into our design system. Though we acknowledge the historical lack of disability representation, we strive to address this responsibly. We are actively exploring fair ways to portray disabilities, including invisible ones, in our illustrations. Our commitment to inclusivity is an ongoing journey, and we aim to create a product that embraces and respects the diverse experiences of all users.

Research

Step 2: Refining our choice

Once I had sharpened the illustration style, I began to imagine and iterate several scenes. The objective here was to visualize how our illustrations would be used in our products before embarking on their large-scale creation.

At Mirakl, we offer a suite of digital products that cover a large number of situations in multiple contexts, so it would be very easy to get lost in all the possible illustration opportunities. Our features can have a big impact on the business of our users, so we took some time to understand situations where it would be nice to guide and support them in order to avoid errors and anxieties as much as possible.

Firstly, we made a non-exhaustive list of events that we thought were interesting and not very complex to illustrate. Then we sorted them in order of recurrence in our products. We gathered a first selection of key moments to illustrate:

Technical error

A technical error occurs when the server is configured incorrectly or when the internet connection is interrupted. We know them as errors “403” (access denied), “404” (page not found), “500” (server error). In each case, an appropriate illustration and text appear to inform and guide the user as to what can be done.

Onboarding

Onboarding is a key moment when a person first arrives on a page and gets their first impressions. Adding an illustration can help to communicate about the product and its benefits.

Empty state

There is nothing worse for a user than to be faced with an empty page, table or map without understanding why there is no information displayed. For this type of situation we have designed scenes that may have:

• Just a title
• A title accompanied by a short description
• A title, a short description and a call to action

Product evolution

Like any digital product, our software always evolves. We thought of these evolutions as a great opportunity for design to help, accompany and educate users. A simple illustration with a well-thought explanation may save the day by changing a new, different experience into a great introduction.

These key points of the user journey then constituted our “crash-test” panel in order to find unity and coherence among each of them.

Step 3: establishing guidelines

Our philosophy is as follows: illustrations do not have an exclusively aesthetic use. Their goal isn’t just to transform our designs into pretty images, and we are convinced about their useful role in the overall user experience.

Therefore, to ensure their correct use, it seemed essential to set up an “Illustration System” integrated into our design system. In this dedicated part of the design system, we sort illustrations into themes to guide Product and Content designers in their choices.

Also to remove all personal biases and in order to align with a single style, we have documented and structured illustration rules in 6 key points:

• Principles of our illustrations
• Dos and don’ts for colors
• Style elements: template, size, background, minor elements, stroke width, patterns and texture
• Dos and don’ts for their use
• Situations in which they may be used
• Examples of layouts

The final results

So here are our final illustrations!

Panel of final illustrations

They follow the guidelines we set at the beginning of the creative process: a unique style that is recognizable and consistent with our brand image (youpi!). The fact that they are hand-drawn makes them even more human and accessible. They have become a key element of Roma, our design system, by providing:

Utility

Illustrations are useful in the overall user experience. They are catchy enough to capture the user’s attention where it seems important. Illustrations must be used to guide, reassure, and help users with their daily tasks.

Adaptability

Illustrations have to be adapted to all situations to support and facilitate the experience of our users.

Optimism

Illustrations act as messengers to help us communicate with our users. They also help to lighten monotonous tasks into a more joyful experience.

As a design team, our main goal is, of course, to constantly improve the user experience of Mirakl. Creating from scratch our own illustrations was really important for our team as they would truly carry our principles. Designing and Integrating our own illustrations into the product is like “the icing on the cake”: it brings a final but important touch to reach our product excellence goal. They also allow us to quickly express our brand identity on our different platforms and bring coherence.

What’s next ?

We are delighted that these illustrations are coming to life in our applications.

We will continue to grow and enrich our library, especially on topics such as inclusion and diversity. It is a subject that is close to our hearts and also requires certain concessions because it is impossible to cover 100% of the human population, so it is up to us to find a balance so that all our customers feel included.

We also have other ambitions: to bring them to life by including motion design in certain situations, such as a waiting time. Or to create our own library of icons.

There is a lot of exciting work left to do and we look forward to sharing these new adventures with you!