Being the same “voice” in your illustrations from first-touch to every corner of your app.
Vend has moved from super-fun to super-serious, and up and down this spectrum throughout our life as a company. A couple of years ago we wanted to return to our roots as a challenger brand, so we could stand out from the crowd a little bit (many POS companies had followed our move to “professional” and we like standing out!) We also really wanted to recapture a part of our company culture in our brand that we reflected to the world.
So we got together with our Founder, Vaughan Fergusson, to put words to that persona. After going through a couple of iterations we landed on a very short (but oddly descriptive) brief: “The New Yorker meets Dr. Seuss”.
Tone of Voice
When it comes to our illustrations: our tone of voice can be described as “The New Yorker meets Dr. Seuss”—we want to be fun and whimsical but have something to say through humour.
This was important because we wanted to bring the feeling of ease of use and delight and amplify it in our illustrations. We also wanted this voice to be consistent throughout Vend––from marketing material, all the way to the product. One of our company’s values is to “Delight our Retailers” which is manifested in how we solve problems, talk to, and help our retailers. We also wanted this value to extend into our branding.
Representing diversity and inclusion was an important part of this work—we wanted to represent people that are using our product; diverse people, diverse retailers, and diverse retail verticals in our illustrations. We have another company value, “Bring Your Best Self to Work”—we all have diverse thoughts, backgrounds, and perspectives. We value these differences as they make our workplace, and product better. This was another value we wanted to extend into our branding.
Illustration Fidelity Spectrum
As we wanted to use this illustration style in a variety of contexts (from marketing material to the product), we developed a spectrum to help us understand how much of this personality to embed in a particular context. The spectrum describes how fun and whimsical these illustrations can get throughout Vend (in which we convey this with design elements like line, form, composition, and colour).
High Fidelity
These illustrations are of higher fidelity—i.e. have a lot of textures, sketchy lines, and detail. These are exported as PNGs (and at different sizes to cater to the different places we’d show these illustrations), we don’t have to worry about vectors and SVGs. We have the freedom to be as expressive, and humorous as we want, as these illustrations sit with large bodies of text, like articles on Vend’s blog (which is external to the product).
It is also used to grab readers’ attention in other places external to Vend (e.g. LinkedIn), to get readers to read the article, which would lead them to Vend’s blog which also further promotes Vend.
Medium Fidelity
There are places in the product that promote extra features or add ons. We have illustrations to accompany these areas, as they also feature text. We wanted to get the message of “this is how efficient and easy retail management could be if you have this!” across to our users.
We start to worry about vectors here, because we export these illustrations as SVGs. We tone down the fidelity just a bit, but not too much to sacrifice the whimsical tone to entice our users to buy the add ons. This means that there are less textures, less details, the lines are smoother, and there are less elements in the illustration’s composition.
Low Fidelity
There are more technical areas in the product, where we give our users step-by-step instructions on how to carry out tasks. The job of the illustrations in these areas are to supplement the text, rather than grabbing the attention away from the important text—hence the lower fidelity. We use less texture, smoother lines, a lot fewer elements in the composition with a monochrome colour scheme. Fidelity is also toned down for technical reasons, fewer points in a vector means faster load times for our users.
How has this worked in practise?
Across this spectrum, we try to make sure that the fun and whimsical, “The New Yorker meets Dr. Seuss” tone of voice is consistent. We push and pull the different levers of line, form, composition, and colour (and other design elements) depending on the context for where these illustrations would sit.
There are still other areas in the product where we have illustrations (like the “Need help?” section on every page), and others that don’t even have large bodies of text (like empty states, or error pages). We place these on the spectrum—considering how much personality is appropriate for the particular context and then applying the appropriate levels of design elements to reach the desired energy level.
The spectrum is helpful—it helps us answer questions about fidelity for cases which didn’t exist (or weren’t specifically considered). It’s also a useful tool for every designer to understand and use when they reach for the illustration tool in their tool belt: across Marketing and Product Design.
Thanks to Brad Fafejta for being the “Marketing hand” in our illustration collaboration, and especially for teaching me how to illustrate with personality!
Thank you to my fellow designers, Dayna Jackson, Emily James and Ludwig Wendzich for helping to proof-read this article.
