How Brands are Using Illustration to Resonate with Users

best business podcasts

roger-the-robotDigital brands can often suffer from the lack of a tangible product for consumers to relate to. Creating a captivating product when it only exists on a screen can often be a difficult proposition, especially if these products are competing in an already saturated marketplace. One tactic that seems to be increasing popular with digital-only brands is utilizing illustration.

Illustration in web design is not new. For years websites have used brand mascots and illustrated user interface design to help create memorable and engaging web experiences. However in recent years there has been an emerging trend of using illustration to tell stories and create resonance with users. Illustrations are no longer there to just be looked at.

Donald Norman, usability consultant for the Nielsen Norman Group, states that design affects how people experience products. This occurs at three levels:

  • Visceral Design – How we subconsciously react to design, either in a positive or negative way.
  • Behavioral Design – How the product functions and the experiences we feel from using it.
  • Reflective Design – How we feel after seeing and using a product and the value we place on it.

A good web illustration doesn’t just sit in the realm of visceral design; it also should merge seamlessly into behavioral and reflective design.

Here are four examples of digital brands that are using illustration to create memorable brand experiences and tell engaging stories. is a music streaming app that uses simple but compelling visual design to create a memorable and seamless user experience. Co-founder Tum Nyugen stated that the name ‘bloom’ came from a happy accident when a team member suggested the name ‘balloon’, but was misheard as saying ‘bloom’.

It’s almost hard to believe the truth of this anecdote when using the app, as the brand experience seems so meticulously planned. The app uses a navigation structure that resembles a flower, with a single genre or artist at the center, while sub-related genres and related artists surround it in petal-like circles.


The brand mascot of a single bee continues to tie together the rest of the visual

language; the brand colors rarely deviate beyond yellow, black and white, while additional navigation uses a hexagonal layout akin to honeycomb. is a great example of how illustration can transcend visceral design. The visual design and strong branding of the app has managed to give it a platform to compete with music streaming heavyweights like Spotify and


Xero offer online accounting software, which is hardly the most engaging topic for users. Despite this Xero have managed to create a brand experience that feels captivating and lives up to their mantra of offering ‘beautiful accounting software’.


Xero’s site uses simple diagrammatic illustrations to promote the features of their product.


They have managed to take a product that would be expected to typically have low emotional resonance with user, and managed to create an experience that is involving and memorable.


Brandwatch is a social media monitoring tool which aims to turn the overwhelming noise and chatter of social media conversations into something digestible and understandable. Their brand experience is conveyed with the use of worm characters which are integrated through the site. The simplicity of the worm designs means they can adapt and expand the characters to reflect different topics or appeal to different personas.


Here Brandwatch have created different variations of the worms to represent their different customer base.


Brandwatch regularly create complex data visualizations which measure and monitoring social media reaction to major events. The visual identity of the worm characters are adapted to reflect each events and then integrated into the data visualizations to help create a more enjoyable brand experience.


Moz specialize in SEO software and marketing analytic tools. They were previously known as SEOMoz, and recently re-branded to better reflect their broader range of products. One thing that didn’t get lost in the re-brand is their brand mascot: Roger the Robot.


Matthew Heilman was the employee responsible for Roger’s creation back in 2010. He states that Roger was created to help “establish SEOmoz into its own sort of brand niche”.


Roger is used in a variety of contexts, ranging from the rejection of faulty credit card number to error notifications within their software. The brand mascot helps turn situations that would normally result in user frustration into positive emotional experiences.

What the four examples above show is that illustration isn’t just about being flashy and catching the users attention; it’s about giving something for users to take into the wider world and creating experiences that makes them want to come back to your product.

Author bio: Kristian Bannister is Creative Director at No Pork Pies – a conversion rate optimization agency in Brighton, UK. He enjoys writing about UX, UI design and usability. Twitter: @YeahKristian and Google+.

Social Media Marketing 2019, PPC on 10+ Platforms.

Social Media Marketing courseLearn how to market via Twitter, Pinterest, Instagram, YouTube, Facebook, Google and more advertising platforms! This must-have course has a 4.5 rating out of 4,235 ratings with more than 37,000 students enrolled.

Take a look at the social media marketing course

Priit Kallas

Priit is the founder and CEO of DreamGrow Digital, an internet marketing and social media company. With his 20+ years internet marketing experience he is Helping companies to understand and use the digital marketing to reach their target audiences. He's also writing on a personal growth website He has spoken at hundreds of seminars and conferences on different aspects of internet marketing. Priit is also the organizer of Digital Elite Camp, a leading traffic and conversion event.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.