Illustrations in UX Design — It’s more than what meets the eye

As an Illustrator who has recently entered the world of pixels and interface design, the transition from illustrating for print and graphic design to the digital sphere has been a challenging, and therefore an interesting one. The switch from the old trusty pen and paper to flat, vector-based illustrations (and the occasional motion graphics) has made me realize that illustrations are not just art but adds immense value to User Experience Design.

One may think that UI conventions and patterns constrain the ability to be creative but in fact by giving focus on impact and purpose behind illustrations, they push you into problem-solving mode which requires more out of the box thinking and really gets the creative juices flowing. Contrary to popular belief that Interface Design is highly technical and “by the book”, it actually allows creativity while adding meaning and user delight with proper use of illustrations and animations. Juxtaposed with other elements of the layout, illustrations not only help guide the user but makes the entire experience a more enjoyable one.

Here are some instances where I used illustrations on my projects at Parallel Labs and how they add value to our work.

Brand Recall

Like in real life, first impressions rely heavily on visuals. Distinguishing yourself from the crowd with unique and custom-made visual elements which are exclusive to your product leads to designs that create brand recall. Illustrations enhance your brand experience and help create a very personal connect with users. On the other hand, relying heavily on stock photography and typography provides limited or no personality to your design.

Order Confirmation Illustrations for Eatfresh

While designing experiences for Eatfresh, we really wanted customers to feel that their meals are being prepared by world class chefs specially for them. Hence we designed a character for the product — a chef who regularly makes his appearance throughout the app providing a visual treat for the users as well as guiding them through its flow.

Illustrations provide visual aid

Simply put, an instruction manual with images is easier and faster to understand than a lengthy explanation. This is because illustrations have the benefit of being unambiguous and direct whereas people are skimmers and rarely attentive. Icons are universally recognizable symbols, thereby removing language barriers and facilitating understanding among a larger audience. In many instances, text is replaced or clubbed with iconography/illustrations to provide breathing space in an otherwise, cluttered screen. Adequate amount of empty space (in the appropriate spaces!) allows the eye to navigate easily and freely.

Illustrated icons for Appjoy.org

On Appjoy, which is a platform that allows developers and designers to access resources, templates, tutorials etc. we had categories which were difficult to explain. But we managed to distill abstract ideas such as “Build”, “Deploy” into meaningful and relevant iconography.

Illustrations creates delight

Straight up — Illustrations are likeable. Even the most banal of softwares can be livened up with illustrations. They bring forth a sense of wonder, playfulness, whimsy and an overall positive vibe. They add value beyond functionality and can be used for different purposes like on-boarding, empty states, errors and spinners.

Empty states for Eatfresh

For Eatfresh app, we designed illustrations around food that complement the friendly and cheerful tone of their branding.

Dessert
Holiday
Drinks

Many times we like doing small gestures for people like taking them out for a coffee, gifting a spa etc. Citrus app allows you to gift cash to your loved ones for these small gestures like coffee, holiday, spa day etc. In order to evoke the feeling of actually receiving gifts though they were receiving cash, we designed short animated illustrations to make receiving them a joyful experience.

Illustrations for better conversions

An engaging and interactive walkthrough automatically invokes the users interest in the app at the initial step itself. Onboarding screens introduce the key features or benefits of app to the user which helps set expectations and improves overall experience, a lack of which can be confusing. A well done walkthrough can make the user happy and feel eager to start using the app.

A simple and playful walkthrough explaining the functions of Citrus app
A minimalistic animated walkthrough for Boomer Marketing app

All said and done, it’s not a hard and fast rule that illustrations should be incorporated in your design. There are diverse reasons for which they are required. Use your best judgement as not all experiences require one. But if used well, illustrations can help in taking digital experiences to the next level.