Illuphor? Meta-stration? No. That’s definitely not it.
Using Metaphor in Product Illustration
So here’s a question I’ve been answering a lot lately:
“What do you look for when you’re hiring an illustrator?”
My answer: Use of metaphor.
Nope, not having a unique style. Nope, not a variety of styles. Nope, not your impressive client list or places your work has been featured. Sure, they don’t hurt. But when I’m hiring to my team of illustrators, I want to see that you understand how to use metaphors to deliver complicated ideas in a delightful and easy to understand way. We can teach you the rest.
I’ve been surprised to see how surprising this is to both students as well as my peers, so here we go, how we use and think about metaphor on the Shopify illustration team.
A thesaurus (or more realistically, the built in mac dictionary) is an illustrators most frequently used tools, right next to pencil, stylus, and probably coffee. At the risk of massively over generalizing how every illustrator works based on a sample size of one: it’s how we kick start the process of finding the right angle to approach the illustration. Because, to be clear: there is an angle. Though I have dug my heels firmly in the design camp — and don’t you dare stop calling me a designer — I’m ready to admit: illustration is content. Like the writer who tells the story of how a product fits seamlessly into our lives, illustrators use literary tools to connect complex ideas to the relatable experiences behind them, working to unearth the deeper reasons and intangible benefits that drive us to use a product.
To use metaphor effectively in product design, it’s important to choose a single core message to communicate. It’s a common mistake to allow multiple goals or messages creep into a graphic, allowing an icon to include two objects instead of one; allow a background item take up too much focus in a scene (because you just liked it). Metaphor can be a great tool for anything from 16px icons to elaborate scenes, but in both cases there needs to first be a specific purpose for the graphic. Something that will help the user understand better how to navigate the product. As complexity in the illustration grows, a hierarchy needs to be developed, each subsequent level contributing to the overall story surrounding the core message of the illustration. As each element is added, it’s important to ask yourself: “How does this add to the story?” “Is this part of the core message?” and be prepared to remove elements when the answer is no.
Types of Metaphor (in product design)
Well, I’m not sure how you made it this far without knowing what a metaphor is — kudos, really — but just in case, and because it feels weird not to define it at before getting into the types: a metaphor (or simile) is a literary device that connects two ideas in a way that is not literally applicable, but instead amplifies one idea, or the way they interact.
Pure Metaphor
This thing, for right now, is that thing. No need to show your actual product, we get it, you were never really talking about ice cream. You just wanted to capture the feeling of everyone starting with the same thing, and looking around the store to pick out each one of your favourite treats and leaving with something that you made just for you.
This is particularly useful in product design, where the product is often intangible, complicated, and/or exists on a computer screen.
Fused Metaphor
This thing plus that thing makes our thing. This use of metaphor, although slightly more heavy handed, is used significantly more in product illustration. Or design in general for that matter. It’s the shortest route to taking your product (or feature) and telling the user exactly why they should care by fusing it with the selling feature. Yes, you already know that we have a button, but look I put a paint brush next to it — I must be able to change the colours, based on what I know about paint brushes. It’s also frequently used in icon design, as well as branding and marketing.
Analogue analog
This thing, but, like, if it wasn’t on a computer. I don’t think this is a real type of metaphor, but I’m giving it its own section in the case of product design. Metaphor is often used to be aspirational, capture the positive feelings around an event or action. However, mirroring the content team, and ways that we choose to speak to our user, we often want to be neutral in presenting our information. We don’t want to tell you how to feel, we just want to deliver the information concisely. In illustration terms, we just want to draw the thing, exactly as it happens. Of course, when we’re talking product, most of just drawing the thing would be drawing things happening on a computer screen — which, when you have 20+ empty states to contend with, can get pretty repetitive. This is where we began adding the analogue version to our repertoire of ways to communicate to the user. Like yeah, okay so actually if you had a discount you would just give people the code to type in, but what would that look like if you had a sale IRL? Probably a lot of stickers, and red markers with the new prices on them. We can remain neutral, still plainly presenting the information, while m̶a̶i̶n̶t̶a̶i̶n̶i̶n̶g̶ ̶o̶u̶r̶ ̶s̶a̶n̶i̶t̶y̶ adding delight with new and unexpectedly nostalgic illustrations.
WARNING: there is a risk of excluding gen z when you use analogue, obsolete or dated objects to communicate an idea.
Using Metaphor in Product Design
Whenever we are approaching a new idea, trying to find the right angle to tell the right story, we start by asking ourselves Why does the merchant care? followed by what are the intangibles of that experience, and how can we tell that story?
Try, something as simple — and admittedly bland — as buying a custom domain
Note: these concepts are all from our awesome illustration intern, Erin, who is working on custom domains right now. We just talked about it this morning, and I am far too lazy to come up with a fake example when I have a perfectly good one real example floating around in my brain.
Why does the merchant care?
They care because they don’t want to tell people their URL is breadpoetsociety.myshopify.com anymore. They want to be taken seriously, as the pumpernickel peddling, crumpet carrying, donut dealing establishment they are committing to be.
What are the intangibles of that experience?
They are ready to get serious making Bread Poet Society a reality — no longer just a casual weekend sourdough, but a full fledged business — and all the excitement, and anticipation that comes with it.
How can we tell that story? What’s the angle?
Pure Metaphor — It could be captured as a house or store. To live in a space online is to live in a space in real life. A concept which could be executed in a variety of ways, depending on which elements you choose to focus on, and how zoomed in or out you choose to go.
eg. entire store vs. realtor sign vs. store interior.
Fused Metaphor — Fusing the ideas of “home/store” and “domain/online” it could be captured in any number combinations of representations of each object.
eg. a home and a router; a store and series of nodes; a sign and some cats (cats are the internet, right?)(Erin, this is not permission to just draw cats for this one)(ok just one cat tho)
Analogue analog — It could be captured as a business card. The analogue counterpart of committing to a name, and adding it to a tangible item. With it, capturing the excitement of finally seeing your business name written out and claimed as your own for the first time — be it in print, or online.
Our users come to our product to make tangible decisions based on the data we can provide them at any step of the way; pricing plans, sales channels, visitor behaviour. We use illustration to capture the intangibles: the freedom manage your own schedule; the satisfaction of building something that is all your own; the sincere joy of your first sale. These intangibles can never be a part of the UI or a measured in the reports section, but they are such an integral part of the product — and lifestyle — we’re selling. It would do the product a disservice not to acknowledge and showcase them as a real benefit. Metaphor becomes the proxy for those aspirational feelings that have not yet been experienced. They complete the story beyond the tangibles to the core of what compels a user to love our product.
