14 awesome services that do not hesitate to use illustrations in the interface

– We are a bank! What illustrations are you talking about? Are you insane?

Many teams consider their product too serious to use illustrations in it. Like it is too childish. And in the meantime, world-renowned companies draw images, win users' trust, facilitate UX, differentiate from competitors, live and prosper.

I delved deeper into the topic and found illustrations in such unexpected places as bank mobile app, CMS-platform, help-desk system, password encryption service and even a crypto-currency trading platform.

Designers (and so am I) often forget to design an empty state of the page. It seems less important than a full content page version. However customers see these empty stages much more often than we used to think. E.g. after a customer signes up he found himself in the empty interface, puzzles, doesn't understand what to do and leave. Old customers feel the same while opening a new interface section.

Guys from Shopify – popular CMS – sat together, worked through all the possible empty states and draw unique illustration for each of them.

Look how illustrations fit into the application style and don't outweigh the main button on the page.

Another example – Help Scout - help-desk system kills two birds with one stone – indicates empty stage and praises the customer that he successfully fulfilled all his tasks.

An illustration shouldn't be necessary something coloured huge and funny. It can be monochrome and simple. If it fits in a product style and improves customer experience – why not to use it in a serious app.

Apps use onboarding tips to engage users and explain them how to deal with interface. Customers skip these tips quite often. But if you use meaningful illustrations and less text for onboarding, customers will be more likely to read and understand it.

It is also important that first screens your customers see make the first impression. And it is better to make your customer smile then to drive him into frustration :)

E.g. spanish delivery on demand service Glovo made awesome onboarding slides:

Customer should be notified from time to time about important events. Sometimes we praise him, warn or just pay his attention to something. I'm not telling about frequent events, such as a new email but about quite rare meaningful moments: copmleting important step, making an order etc.

E.g. after making an order our Convead clients see popup with a trophy illustration:

If you ever used MailСhimp you have to remember an email campaign confirmation screen with a red button and a hairy paw with droplets of sweat :)

Looking at this animation you immediately focus and carefully check all the settings of the email once again:

And after email campaign is sent, monkey high-fives you and you can go and drink coffee with a satisfaction of having done your duty.

Helpscout uses illustrations to notify customers about new service updates right at the sign up screen.

User's progress indication deserves a separate article. The question is closely connected to gamification (using game-design elements in non-gaming context), and I'll write about it if you are interesting.

Progress indication problem is perfectly solved in English learning app Lingualeo. It shows user's progress in two ways: at a progress bar at the right side of the screen, plus as a development of an in-app character – lion Leo. The higher the user's level – the more advanced the character – he grows, gets clothes, stuff etc.

Illustrations can be useful to show not only user's progress but a progress of the app as well. E.g. AliExpress shows order delivery state with tiny illustrations.

An example below shows progress indication in HubSpot (online marketing platform). How can you possibly not feel happy looking at this page, huh?

We've met with Lingualeo's character above. But I don't want you to think that characters are useful only in educational projects, so let's look into some more examples:

Legendary robot Roger – a character in MOZ (complex SEO instrument):

Monkey Freddie in MailСhimp:

Hipmunk Chipmunk – a squirrel in a flight tickets search service Hipmunk:

Character does not only make the product look unique and recognizable. But it also helps you to communicate with a user in the app, in social media or email.

When a user has several options to use in many cases it's easier for him when each option has a valid illustration than if they contain the text only.

Password manager 1Password illustrates the choice of an account type: "just me", "my family" and "my business" with an armchair, sofa and an office chair. Awesome metaphor. By the way, guys have a lot of fine illustrations on the website – go ahead and have a look.

In Convead we have an "Automation" section where we lead customers to choose marketing scenarios and launch it one by one. The sidebar shows where to start and how to proceed. Each scenario page has a unique illustration that helps to understand what is it about:

Distinguish illustration and decoration. Illustration adds a meaning to a content, gives an added value. Decoration is just a picture that you can throw out and the meaning will not be lost.

Do not distract from the interface. An illustration should support the main purpose of the page and never distract the user. If after you added an illustration your users don't see an important button – the picture is a failure.

Fit firmstyle and brand. Illustrations should look naturally near the rest interface elements. Firm colors, fonts, volume or flat style, etc. E.g. a glossy three-dimensional image won't fit the flat interface.

Strict visual style. Outline width, gradients, corners radius, light direction etc. should be the same in all the illustrations. Style disagreement looks cheap and reduces the credibility of the product. If you have more than one illustrator on the project make sure you have properly described illlustration's style and everybody understand it.

Maybe the main benefit illustrations can give you is helping your marketing. This is a way to distinguish from competition, help users to recognize and remember your product. An illustration is a visual language your app speaks to the customers, builds trust, establishes an emotional connection.

The success will depend on the quality of your customer research. You should figure out user's background and preferencies, choose the style of illustrations that fits user's mental model. And of course draw them perfectly.

Guys from Intercom (multichannel communication platform) changed their visual style about 3 years ago.They made dosens of illustrations with funny characters-animals who play roles of customers and managers and showed how it's easy for them to communicate inside the product.

Website visual style fits the product interface perfectly. They managed to make interface simple and easy but at the same time colored and positive. Every section contains a video with the same characters-animals who describe how to use a section.

The same style is used in the ads. It looks attractive, recognizable and professional. Bravo!

Illustrations are not obligatory. If you don't want to use – do not. But you should know you have this instrument in the arsenal and be aware of it's benefits.

And if you still think illustrations are for kids and you are too serious for them – look around. Maybe your competition use them already and get huge market share. Make the best you think is good for your business and vay the Force be with you!