Behind the Scenes of a New Illustration Style for Usabilla

Late last year, I had the opportunity to revamp my company’s product illustration style. It was a busy and exciting project that has finally seen the light. Usabilla’s CX analytics solution recently launched to all customers, and we are really proud to share the new illustrations.

The context and problem

Illustration is one of the strongest communication systems on the Product at the moment. From next steps, errors, and how to use certain features.

The existing illustration style was crafted beautifully and worked great in the early days of our new Product. However, it soon became undeveloped as we sped up our delivery of new features. We had limited resources to create illustrations, and so we needed a workflow that supported our changing team and Product.

Our goal

Achieve a delightful Product that our users enjoy using, while informing and educating.

🚀 Elevate the quality of our product illustrations and communication with users. By maturing our style, we can bring our Product interface to life.

👩‍🎨 Create guidelines for future and existing designers. By documenting our guidelines, so the end result looks consistent like it was drawn by the same person.

🎨 Set the product standards for the future of the Product. As it evolves, the illustration principles should grow with it.

With the right goals set, we identified what would make our project a success:

• Document the basic guidelines for color usage and essential style elements
• Establish clear metaphor guidelines to reproduce anytime
• Set a smooth and stress-free tooling process

The process

So, let’s get started, right? Well, not quite yet. Our project had one last crucial ingredient remaining: the Product tone of voice.

As a company, we have existing guidelines and brand values. However, these were not yet extracted and applied to the Product. We picked up this task during the process, as it was key to understanding if our drafts were up to our standards. In simple terms, we needed personality traits for reference.

For the exercise of setting our tone profile, we used the Nielson Norman framework.This framework defines four dimensions for the product tone of voice, based on a long list of adjectives that describe personality traits. It also gives some guidelines to evaluate the tone.

It proved to be quite effective, and after some rounds of internal feedback and conversations, we landed our tone of voice for the Product. We were now able to use these to create our illustration principles, in which we would base our characteristic choices.

Now, the real work began. We spent months testing and exploring new styles and compositions. When we thought we were close to being done, the next challenge appeared.

It was a circular process, we considered necessary to research best practices and analyze the competition. We captured some learnings as take-aways, and continued exploring more visual styles. We documented these in a moodboard (of course!), both physical and digital (inVision board).

We worked with existing briefs, exploring different options to gather feedback.

We documented what we liked and did not like for each iteration. We were two designers working together on this project, but I was allocated mainly in developing the style.

We made quite a great deal of progress, but the clock was ticking and it was time to make decisions.

The tooling

We still felt that the process and tooling we were trying to design with was not working perfectly for us. Our ideal composition was dynamic, fluid and natural.

Working with vector-based software can be tricky, as you probably know. You need to spend quite some time getting curves and points just right, to make your character look human and not like a stick figure. This process was of course time consuming, something we had not much of.

At the same time, I was working working on my personal projects with my beloved tool Procreate. I started using the tool a few years ago, during my college days and it soon become my go-to for sketching.

Credits to Proceate

I naturally started using it to brainstorm and sketch concepts for our illustrations. My colleagues were not familiar with the software, and soon became really interested. As it usually happens, I was soon drawing the new illustrations with my iPad.

Switching to this setup was the best decision we made, if you ask me. We were able to produce up to three new illustrations per day. Working with high resolution pixel-based images turns out to be no big deal, and the result is just as awesome as in vector-style.

Documentation

I had high expectations on the end result of our documentation. As I was developing the style and imagining it all in my head, it was important to share this knowledge with the team. Documentation would be referred back to in the early stages, and we had to align back and forward with every new illustration.

We documented guidelines on Confluence, our existing documentation tool, which made it easy to get everyone onboard. So far, it’s working well!

We have a long way to go with our guidelines, but so far we’ve documented the following:

• Principles
• When to use illustration
• Types (glyph vs icon vs spot vs scene)
• Metaphor guidance
• Construction
• Colour
• Exporting

In our backlog we have character anatomy, supporting characters, perspective, graphical elements, best practices, and inclusion.

You can check out some of our final illustrations bellow…

To conclude

We are still in the process of transitioning all of our illustrations to the new style. It was a hard decision to make, but with with limited resources on our team and the project, we had to cut some corners.

Our priority at this stage is completing all of our empty and error states, as well as onboarding modals for new users. Next, we are very excited to add animation into the game, and also include rewarding messages of support.

I am a Digital Product Designer who also enjoys illustration, art, helping people and technology. I’m currently based in Amsterdam and part of the team at Usabilla.

Feel free to chat over Twitter about your ideas on the topic, or anything really! and if you liked the illustrations on this article, you might want to see more of my art on Instagram.