October 26 2017

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

Olga Shavrina
– 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.
Illustrations work perfectly in cases:
1
Empty states – if there is no content on the page yet, it's good to show there an illustration and explain what should be here.
2
Onboarding – greet the user, educate, help and introduce new features.
3
Notifications – notify about important events, add emotions to messages, confirm actions.
4
Progress indication – show system or customer status.
5
Making the choice easier – emphasize the difference between options, speed up perception, reduce the amount of text.
Empty states
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.
Mobile apps: Coinbase – for crypto currency trading and Alfa bank – mobile bank
Onboarding
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:
Onboarding slides in spanish delivery on demand service Glovo
Notifications
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:
Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.
Successful payment popup in Convead
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:
Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.
Animation that confirms email campaign sending in MailChimp
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.
Animation after you have send an email campaign in MailChimp
Helpscout uses illustrations to notify customers about new service updates right at the sign up screen.
Illustration draws customer's attention to an important update in Help Scout
Progress indication
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.
My progress page in the Lingualeo app
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.
Order delivery progress in AliExpress
An example below shows progress indication in HubSpot (online marketing platform). How can you possibly not feel happy looking at this page, huh?
Characters
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.
Making the choice easier
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.
Account type choosing on the 1Password web site
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:
Autimation section in Convead
How to make illustrations work for the product and not against it
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.
Last but not least
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!
Intercom ads in the Facebook
Summary
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!
Olga Shavrina
Product UX designer
Made on
Tilda