Enhancing brand identity with custom illustrations

Dorota Owczarek - June 18, 2018

If you haven’t been living under a rock for the last year, you probably already noticed the increased appearance of illustrations in digital products. Illustration has made its way into product design in a big way and shows no signs of slowing down. Custom imagery is nowadays a crucial element of digital products. Why? Using illustrations in your app or website will make it easier to understand, more trustworthy and engaging, topping it all up with an overall pleasant experience. Illustrations can tell a story and convey a distinct personality. Custom illustrations can be especially impactful. They can make your audience feel personally connected to your digital product while adding value to brand’s concept and mission.

What happened to stock imagery?

In print, custom illustration has always played a major role but when you think of digital media it has never been too popular. Its place was taken by cheap stock photography. The accessibility of stock left imagery underutilized in digital products.

Stock photography is often forgettable, boring, and bland. To find the image that will match your brand and sell your product you need to go through thousands of stock photos looking at ridiculously happy people in silly poses. Unless you have a budget to hire a professional photographer (and usually models) you are stuck with stock galleries. Although real photography is great it is also limited. Being consistent with the brand might be harder to execute and metaphorical meaning is not that easy to convey. Most web products cannot even be represented by photos e.g. how to show cloud solutions?

Services offered by Digital Ocean are not tangible and do not really exist in the real world but their illustration team does a great job in bringing this complex tech concepts closer to the user.

The power of illustrations in product design

This is where custom imagery comes into play. Illustration in product design can be of great assistance going far beyond the limitations of photography (not to mention stock photos). Developing custom illustration style and imagery is not super easy either. Though the potential of this asset is like no other.

You might think that the main goal of illustration in product design is decoration but it is most definitely not. The main objective is communication. The illustration is an integral part of modern UI because of its unique ability to communicate content. Words can tell you something but an illustration can show you something and we all know that a picture is worth a thousand words.

Custom imagery works best when you need to simplify complex ideas. It is especially important in tech products where it helps users to bridge the gap between theoretical knowledge and intuitive understanding. As digital products and services are getting untouchable illustrated metaphors are becoming the most compelling tool in finding a way to articulate what is happening in a digestible and relatable way.

Illustration in product design enhances your brand identity. It gives you a chance to create a unique, memorable style that will live long in the memory of your users. Illustrations can capture and communicate feelings creating a powerful emotional connection and making online experiences feel more personal. They create a lot of opportunities to bring life, humanity and immediate warmth to a design.

Insurance companies are hardly ever a nexus for inspiration. Team behind Oscar Health created a hand drawn illustration style that brings a brighter, more enjoyable and approachable face to healthcare.

Guide your user

We put well-thought images in the product to show the user that we’ve got his back and we’re always there to guide him through the digital experience. Illustration in product sets out to be successful in making this experience smooth and informative. It explains the current situation, provides a wider context, adds clarity, or leads the user to the next action.

For empty and zero states illustration is there to tell the user there is currently nothing going on there, guide him what to do next and promise the future state. Something brakes in your app (and don’t say never, cause let’s be honest, it happens to all of us)? Reassure your user it’s neither their fault nor a serious matter. Let him take ownership of that failure by explaining what happened and navigating back to the track.

User interface screenshots can be dull but Slack has its own way to bring life to them. Friendly organic illustrative characters blended with crisp and colorful UI components make it easier to explain functionalities available on Slack.

On-boarding screens are driven mainly by illustrations as they can so quickly tell a story behind the product or a new feature. When you create an engaging and interactive walkthrough filled with meaningful illustrations it will surely profit in a quick explanation and better understanding of the features you’re trying to introduce. And eventually by invoking the user’s interest in the app at the initial step itself aids better conversion.

Another common reason to use illustrations is to show the user his progress and reward for the efforts. Any kind of accomplishments like account setup completion, new feature usage, placing a reservation can be represented with artwork giving a user a positive experience that will give him the confidence to use it more and more.

You cannot replace content strategists with illustrators but you can definitely boost the usability of your product by minimizing the copy with an additional illo here and there. There is no need to use paragraphs of words that nobody reads if you can support this information using visuals.

Metaphorical imagery showing business owners using a unified color palette and style still changing the tone and message in a really smooth way. Round of applause to Meg Robichaud (@megdraws) and her team at Shopify. Not only a great illustrator but also a design word-meister.

The mascot effect

Nowadays, we try and use a lot of products on a regular basis, but only a few of them create a truly memorable experience and we stick to them.

The use of a fictional brand mascot in a user interface is a popular marketing strategy to personify the brand. A good mascot is an icon we strongly identify with a certain product. They become a metaphorical face of the brand and with that symbolic nature, they create a more memorable experience. These mascots can come in hand when you’re trying to communicate on a personal level, breathing in life into the product. They work as an interconnector between the interface and the user. It is especially crucial for web-based brands that have no tangible product or service that exist in the real world, here a unique mascot gives users something concrete to connect to. As any other illustration, your mascot should be used thoughtfully to enhance the experience. It should help the user rather than distract them.

Hand-drawn illustration style with narrative that explains the concepts behind the complex services offered by Intercom. Bold colors and quirky animals give the brand a strong identity differentiating it from other tech companies.

Afterwords

Custom artwork and illustration helps create a visual language that can make your product easier to understand and more engaging with an overall heartwarming look but there’s a catch. Just as illustration gains popularity in product world, our understanding of how and when to use it strategically falls way behind. If you are unaware of the theory and techniques behind product strategy and illustration your efforts might harm your product. In the following weeks, I’ll share with you my thoughts on how to develop an illustration style that works based on the work we did at Nexocode.

About the author

Dorota Owczarek

AI Product Lead & Design Thinking Facilitator

With over ten years of professional experience in designing and developing software, Dorota is quick to recognize the best ways to serve users and stakeholders by shaping strategies and ensuring their execution by working closely with engineering and design teams. She acts as a Product Leader, covering the ongoing AI agile development processes and operationalizing AI throughout the business.

Find us on

Need help with implementing AI in your business?

Let's talk blue circle

This site uses cookies for analytical purposes.

Accept Privacy Policy

In the interests of your safety and to implement the principle of lawful, reliable and transparent processing of your personal data when using our services, we developed this document called the Privacy Policy. This document regulates the processing and protection of Users’ personal data in connection with their use of the Website and has been prepared by Nexocode.

To ensure the protection of Users' personal data, Nexocode applies appropriate organizational and technical solutions to prevent privacy breaches. Nexocode implements measures to ensure security at the level which ensures compliance with applicable Polish and European laws such as:

  1. Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of natural persons with regard to the processing of personal data and on the free movement of such data, and repealing Directive 95/46/EC (General Data Protection Regulation) (published in the Official Journal of the European Union L 119, p 1); Act of 10 May 2018 on personal data protection (published in the Journal of Laws of 2018, item 1000);
  2. Act of 18 July 2002 on providing services by electronic means;
  3. Telecommunications Law of 16 July 2004.

The Website is secured by the SSL protocol, which provides secure data transmission on the Internet.

1. Definitions

  1. User – a person that uses the Website, i.e. a natural person with full legal capacity, a legal person, or an organizational unit which is not a legal person to which specific provisions grant legal capacity.
  2. Nexocode – NEXOCODE sp. z o.o. with its registered office in Kraków, ul. Generała Henryka Kamieńskiego 51, 30-644 Kraków, entered into the Register of Entrepreneurs of the National Court Register kept by the District Court for Kraków-Śródmieście in Kraków, 11th Commercial Department of the National Court Register, under the KRS number: 0000686992, NIP: 6762533324.
  3. Website – website run by Nexocode, at the URL: nexocode.com whose content is available to authorized persons.
  4. Cookies – small files saved by the server on the User's computer, which the server can read when when the website is accessed from the computer.
  5. SSL protocol – a special standard for transmitting data on the Internet which unlike ordinary methods of data transmission encrypts data transmission.
  6. System log – the information that the User's computer transmits to the server which may contain various data (e.g. the user’s IP number), allowing to determine the approximate location where the connection came from.
  7. IP address – individual number which is usually assigned to every computer connected to the Internet. The IP number can be permanently associated with the computer (static) or assigned to a given connection (dynamic).
  8. GDPR – Regulation 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of individuals regarding the processing of personal data and onthe free transmission of such data, repealing Directive 95/46 / EC (General Data Protection Regulation).
  9. Personal data – information about an identified or identifiable natural person ("data subject"). An identifiable natural person is a person who can be directly or indirectly identified, in particular on the basis of identifiers such as name, identification number, location data, online identifiers or one or more specific factors determining the physical, physiological, genetic, mental, economic, cultural or social identity of a natural person.
  10. Processing – any operations performed on personal data, such as collecting, recording, storing, developing, modifying, sharing, and deleting, especially when performed in IT systems.

2. Cookies

The Website is secured by the SSL protocol, which provides secure data transmission on the Internet. The Website, in accordance with art. 173 of the Telecommunications Act of 16 July 2004 of the Republic of Poland, uses Cookies, i.e. data, in particular text files, stored on the User's end device.
Cookies are used to:

  1. improve user experience and facilitate navigation on the site;
  2. help to identify returning Users who access the website using the device on which Cookies were saved;
  3. creating statistics which help to understand how the Users use websites, which allows to improve their structure and content;
  4. adjusting the content of the Website pages to specific User’s preferences and optimizing the websites website experience to the each User's individual needs.

Cookies usually contain the name of the website from which they originate, their storage time on the end device and a unique number. On our Website, we use the following types of Cookies:

  • "Session" – cookie files stored on the User's end device until the Uses logs out, leaves the website or turns off the web browser;
  • "Persistent" – cookie files stored on the User's end device for the time specified in the Cookie file parameters or until they are deleted by the User;
  • "Performance" – cookies used specifically for gathering data on how visitors use a website to measure the performance of a website;
  • "Strictly necessary" – essential for browsing the website and using its features, such as accessing secure areas of the site;
  • "Functional" – cookies enabling remembering the settings selected by the User and personalizing the User interface;
  • "First-party" – cookies stored by the Website;
  • "Third-party" – cookies derived from a website other than the Website;
  • "Facebook cookies" – You should read Facebook cookies policy: https://www.facebook.com/policy/cookies
  • "Other Google cookies" – Refer to Google cookie policy: www.google.com/policies/technologies/types/

3. How System Logs work on the Website

User's activity on the Website, including the User’s Personal Data, is recorded in System Logs. The information collected in the Logs is processed primarily for purposes related to the provision of services, i.e. for the purposes of:

  • analytics – to improve the quality of services provided by us as part of the Website and adapt its functionalities to the needs of the Users. The legal basis for processing in this case is the legitimate interest of Nexocode consisting in analyzing Users' activities and their preferences;
  • fraud detection, identification and countering threats to stability and correct operation of the Website.

4. Cookie mechanism on the Website

Our site uses basic cookies that facilitate the use of its resources. Cookies contain useful information and are stored on the User's computer – our server can read them when connecting to this computer again. Most web browsers allow cookies to be stored on the User's end device by default. Each User can change their Cookie settings in the web browser settings menu: Google ChromeOpen the menu (click the three-dot icon in the upper right corner), Settings > Advanced. In the "Privacy and security" section, click the Content Settings button. In the "Cookies and site date" section you can change the following Cookie settings:

  • Deleting cookies,
  • Blocking cookies by default,
  • Default permission for cookies,
  • Saving Cookies and website data by default and clearing them when the browser is closed,
  • Specifying exceptions for Cookies for specific websites or domains

Internet Explorer 6.0 and 7.0
From the browser menu (upper right corner): Tools > Internet Options > Privacy, click the Sites button. Use the slider to set the desired level, confirm the change with the OK button.

Mozilla Firefox
browser menu: Tools > Options > Privacy and security. Activate the “Custom” field. From there, you can check a relevant field to decide whether or not to accept cookies.

Opera
Open the browser’s settings menu: Go to the Advanced section > Site Settings > Cookies and site data. From there, adjust the setting: Allow sites to save and read cookie data

Safari
In the Safari drop-down menu, select Preferences and click the Security icon.From there, select the desired security level in the "Accept cookies" area.

Disabling Cookies in your browser does not deprive you of access to the resources of the Website. Web browsers, by default, allow storing Cookies on the User's end device. Website Users can freely adjust cookie settings. The web browser allows you to delete cookies. It is also possible to automatically block cookies. Detailed information on this subject is provided in the help or documentation of the specific web browser used by the User. The User can decide not to receive Cookies by changing browser settings. However, disabling Cookies necessary for authentication, security or remembering User preferences may impact user experience, or even make the Website unusable.

5. Additional information

External links may be placed on the Website enabling Users to directly reach other website. Also, while using the Website, cookies may also be placed on the User’s device from other entities, in particular from third parties such as Google, in order to enable the use the functionalities of the Website integrated with these third parties. Each of such providers sets out the rules for the use of cookies in their privacy policy, so for security reasons we recommend that you read the privacy policy document before using these pages. We reserve the right to change this privacy policy at any time by publishing an updated version on our Website. After making the change, the privacy policy will be published on the page with a new date. For more information on the conditions of providing services, in particular the rules of using the Website, contracting, as well as the conditions of accessing content and using the Website, please refer to the the Website’s Terms and Conditions.

Nexocode Team