The Power of Metaphor in Design: A Tool for Driving the Design Process and Delivering One of a Kind Experiences

Melissa Quintanilha at UXDX Community: Agile Design, Team Building & Metaphor-Driven UX. Video: https://youtu.be/YuC8LNSwNr8

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

What a metaphor is, and why design uses them

[00:00:01] Hello everyone, and thanks so much for having me today. I'm going to start us off with a couple of questions. When was the last time that you felt like your life was a roller coaster? Comparing life to a roller coaster is a way to paint a vivid imagery that goes way beyond what we can describe in words. Roller coaster in this example is a metaphor to describe a complex concept, which is life. And when was the last time you met somebody who was a shining star? This is another example of a metaphor, used to describe somebody who's exceptionally talented.

[00:00:33] Metaphors are figures of speech that have been used in human language for thousands of years, and they work by relating concepts we're familiar with to explain complex concepts. The same way we have lots of complex concepts in language, there's no shortage of those in the digital world we interact with every day, and because design is a form of communication, metaphors have been used as a design tool since the first graphical user interface came out.

[00:01:02] Today I'm excited to share the behind the scenes of how we've been leveraging metaphors at Dupla Studios to design the most one-of-a-kind experiences. Dupla is a digital product design studio founded by industry veterans of Microsoft and Amazon, and for the past eight years we've been designing experiences for a variety of clients, including industry giants such as Microsoft, Google and Amazon, to midsize companies and startups.

[00:01:26] And metaphors have been the key ingredient that we found for creating the most approachable, unique and timeless experiences. Not just because we think metaphors are cool, it's because they always perform way better in the lab. So this is not just our opinion, it is backed by data.

The desktop metaphor and experience metaphors

[00:01:43] In fact, a metaphor is what brought computing to the masses. Let's go back to the early 80s, when the first graphical user interface became feasible in personal computers. An interesting UX challenge emerged: how do you communicate the complexity of something that people had never seen before? Until then they were using a command line interface, and now you have this brand new graphical interface.

[00:02:10] Designers at Xerox PARC decided to leverage something familiar to explain something brand new. They looked at the desktop that everybody had in their homes and they created the powerful desktop metaphor. In the desktop metaphor they leverage people's familiarity with several concepts, such as a working surface, files, folders, trash cans, calculators. This analogy of a simple everyday desk allowed them to communicate the complexity of an entire new system that nobody had ever seen before.

[00:02:46] Since then, metaphors have been used to guide our navigation with familiar visual markers. We drag things to tiny trash cans to throw them away. We put things in shopping carts when we're buying goods online. We click on floppy discs to save things, even though we haven't seen a floppy disc in a long time. And we click on little paper clips to attach files to emails.

[00:03:10] But metaphors can do a lot more than guide our navigation with these familiar visual markers. When a metaphor is used to tie an entire system of interaction together, even the most complex systems can become approachable and intuitive. At Dupla we call these system-wide metaphors experience metaphors. They are a framework for UX design, tying entire experiences together and making them intuitive for people.

[00:03:37] Let's go back to the desktop metaphor. While it may not look visually like a desk in the office, we interact with our desktops the same way we would with our desks in our office. We throw files here to access quickly, we stack similar files in folders, and sometimes we let it get a little messier than what it should be. We interact with our digital desktops as the home base of our day-to-day work, the same way we interact with our desks in our homes. So the metaphor here is way more than visual. It shapes the experience holistically.

Time Machine: making backup approachable

[00:04:17] Let's look at another example. Let's say we have a challenge of designing a backup application. It could look like this. We could have rows representing the different snapshots of the computer. You can look down the list, they go back in time, I can click on one of them, I can click restore, and I can bring that back as my main computer image. It works, it has all of the functionality required. However, it requires a lot of mental load on the user to really understand what's going on here exactly. And this also looks like a lot of applications that we've used. It looks like my email, for example, or a spreadsheet.

[00:05:03] What Apple did when they wanted to make backup approachable to everyone is that they leveraged a metaphor. They thought, okay, you have these things going back in time, what is something that people can relate to that has that similar concept? And they created the Time Machine metaphor, also the name of the feature. Early versions of Time Machine had stars coming at you like you're watching the Star Wars opening credits, and here they have still things going back into the distance. They're representing the snapshots of the computer by these screenshots of your files, so you know these are snapshots of where my files were, and they go back into space, and I can go back and retrieve something and bring that back to the front. So leveraging this metaphor allowed them to make backups intuitive and approachable, and also fun.

Example one: dating and eye tests for style preferences

[00:05:57] Now let's look at a couple of examples of how we leverage those at work at Dupla. Our first example is of a service that matches presentation experts to people who want to create a presentation. The first thing we do when we approach a design problem is that we start with research. We understand three things first: user needs, user insights and business needs. So we do our user interviews, we do our stakeholder interviews, to understand these three ingredients.

[00:06:30] In the example of this expert matching service, the main user need from the expert side was that they wanted no back and forth. They didn't have time to be going back and forth with the user to understand exactly what they needed, and that would also create a lot of variation in the output that they were creating. The user insight from the non-designer user is that it was hard for them to communicate style preferences. That was a key pain point that we leveraged in our creation of a metaphor. It was hard for them to communicate in terms of fonts and colors, and also describing things as modern or classic, their understanding was different than the expert's understanding. And the business need was to reduce abandonment rate. They had a regular form-filling interface and people were not completing. They were starting but they were not finishing it.

[00:07:26] This is an example of where a conventional UX wouldn't cut it. Our client had a conventional interface, a form-filling interface. The way you expressed your styles was about making choices, but that was a key pain point for people. So metaphors come in handy when you have a pain point, for example, that is specifically hard to be expressed with what we have today in interfaces.

[00:07:51] So with an understanding of user needs and business needs, we go into metaphor ideation. We look at the world around us, and it can be digital, it doesn't have to be only physical, it can also be a concept such as a time machine. It can be anything as long as it's familiar to people. And we start brainstorming and ideating which metaphors fulfill the design requirements.

[00:08:14] In this case, we knew that for users it was hard for them to communicate their style preferences, but once they saw something they would know whether they liked it or not. So we thought, what if we show them things and they can react to them? And that made us think of a dating metaphor. What if we do dating for styles? We show them something and they say like it or don't like it. This was good but not good enough, because we had to narrow down their style preferences among a variety of styles that are possible, and we also understood from our research with users that it's hard for them to look at one thing and say they like it or not. They might say, I don't know if I like this, maybe. But if we show two images side by side it's easier for them to say, oh, I prefer that one, or I prefer this one.

[00:09:02] So that brought us to another metaphor, which is an eye test metaphor. For those of you who wear glasses, when you go to the eye doctor they usually show you a pair of images and they ask you which one is more clear, this one or that one. So that's what we leveraged for the style preference issue.

[00:09:21] So let's take a look at a flow here. We start by saying, now we're going to learn about your style preferences. What we do is that we show them a pair of images and we just ask them what do you like, and based on what they choose — in the background these images have tags and all kinds of descriptors — based on what they choose we start going into other options that are similar to what they've chosen. So let's say they make a choice here, and we reflect back to them: we see that you like images that are classic and corporate, and the next choices will help us fine-tune your style.

[00:10:00] This speed bump was an addition that we put in after usability studies, because even though people enjoyed playing the game, they wanted to understand what was happening, why am I doing this. So we would keep going and just show them a pair of images, and depending on what they chose we would take them down a certain path. So it's like they were going through a decision tree, but for the user they would just really be playing a game. And then when they open the side panel we would explain at a high level that by completing this step we're collecting what you like about colors, illustrations, etc.

[00:10:35] At the end we leveraged another metaphor, which is the metaphor of a personality test, and we were reflecting back their top tags of their style: so, modern, bold and dynamic, we really like your style. That tested really well in the lab. Everybody understood what they were doing, they were engaged, and this enabled people to accurately communicate their style preferences. And because the entire experience was engaging, we were able to reduce the dropout rates, which was the business need.

Example two: producing live events without the debacle

[00:11:09] Let's take a look at a second example. Now our client is the producers behind big events such as the MTV Video Music Awards and the NBA All-Star Game. They have a software that they use to manage all the aspects of the production. The software is called Debacle, which stands for Database Organizing Chaotic Logistics, and it's also a way for them to make fun of their own industry, because they say that every event eventually turns into a debacle.

[00:11:43] Imagine what it takes to produce an event. You have to get all these celebrities out of their homes to their flights, you need to book their flights, you need to give them a ride when they get to the city from the airport to the hotel, you need to book the hotels, you need to get everybody to the venue, you need to get what they needed in their green room, you need to get them to rehearsals, not to mention all the technical specifications, all of the chaos and everything else that needs to happen behind the scenes. And it's all in a very fast-paced environment.

[00:12:17] When we interviewed producers at a variety of levels, the main user need that they had was that they needed to see what needed to get done. They needed to find information synchronized across different teams, and it had to be quick, because it was time sensitive. They were dealing with an event where things had to happen by a certain time.

[00:12:35] The main user insight is that they needed more than just to see each piece of data. They needed to be able to see how it all fits together, they needed this picture of how everything's connected, they needed to navigate quickly, and they needed to be able to see the big picture but go from big picture to details. So they needed to be able to zoom out to a big picture to see what else do I need to get done, and zoom in to get something specific.

[00:13:01] The main business need was to create something that was fun and light. We learned from our client that people go into entertainment because they like entertainment, they like to create fun experiences for people, so our client wanted the experience for the producers to also be fun and light, in work that is usually very stressful and arduous. In our interviews we learned that producers are so stressed and under such pressure that they forget to eat or drink or go to the bathroom.

[00:13:33] This is another example of where a conventional UX wouldn't quite cut it. We could have, for example, a list of all the tasks that had to be done. You could click on a task and see everything that was related to it. But you don't have a view of the big picture here, and it would take you a long time to navigate back and forth, and it also doesn't feel light, it feels like work.

Overlaying a relational graph with a map

[00:13:57] So we thought, okay, this is an example of where a metaphor would be appropriate. What we did is that we looked at all the different pieces of data that were part of this system and we thought, what if we made the connections visible? We leveraged a data visualization metaphor here, of a relational graph, so we visually connected all the items. But we still had the requirement that they needed to be able to see the big picture but zoom into the details quickly, so we leveraged another metaphor on top of this one, which is the metaphor of a map.

[00:14:33] When you look at a map with semantic zooming, when you're zoomed out you can see the broad contours of a city, you zoom into a neighborhood level and you start seeing some more details, and you zoom into the street level and you see even more details. So this is an example that a metaphor doesn't have to be a one-to-one relationship. You can actually overlay metaphors, you can modify them a little bit, because this is the digital world, we have some freedom, as long as there's some familiarity that helps with that understanding of a system.

[00:15:03] So let's walk through a flow here. When you first log in you see the broad contours of the event. The center bubble is telling me — we called it the Town Square, the center where you have announcements, everything that everybody in the production has to know. And you had overviews of different areas: people, schedule, tasks and travel. People are the people, the ones that would bubble up are the people that I most frequently interact with. Schedule is where I had to be today, tasks I need to get done, and travel that I'm monitoring.

[00:15:38] Now let's say I want to zoom into people. Once I zoom into people, people become center stage and I start seeing more details about everybody that is part of a production. I start seeing departments and sub-departments and everyone that I can reach out to. So let's say I get a call from Adele's manager and they need some document from her, so I can zoom in all the way to a single person, so going from a neighborhood level to a street view. So now I'm zoomed in all the way on Adele, and instead of just seeing her picture I see all the connections that are related to her. I can see the people that are part of her team, files that are attached to her, schedule, tasks, notes, travel that is related to her. In the background it was all tagging, but you could visually see all of the connections.

[00:16:32] So here's an example of it in motion. As you zoom into a different area you could see a little more detail on that area. You can pin things open to show more of the connections, and you can zoom into specific artists to see all of the connections for that artist. So as you zoom out you see less, you see more of an overview, and as you zoom into different levels you start seeing more.

[00:16:59] This system is currently in production. For a recent music event our client was able to produce with half the staff required. It enabled them to have a hybrid production model, so not everybody has to be on site to help with the production. It provided way faster onboarding time, and this is also a finalist in the 2024 IxDA Interaction Awards.

Why experience metaphors matter

[00:17:25] So in summary, why are experience metaphors important for both users and businesses? For users it's leveraging their sense of familiarity to help them make intuitive use of complex systems. And for organizations, it provides a cohesive and consistent design language, which helps with a sense of reliability and trustworthiness for an application. It gives a more enjoyable, less intimidating learning process. People can onboard faster, higher retention rates, and they're also more willing to explore. And it creates more memorable and competitive brand experiences, so it allows you to set your application apart from your competitors.

A five-step framework

[00:18:09] And now you must be thinking, but wait, how do I apply this in my work? I'm going to walk you through a five-step framework that you can use in your work for next time that you find that a metaphor will be appropriate for a specific problem.

[00:18:25] First step is understanding. It always starts with the user and the business. You have to gather three pieces of information: user needs, user insights and business needs. User insights: ask yourself, is there something about the nature of the work that is particularly different or special that would warrant a good metaphor, or is there a particularly gnarly pain point that a metaphor would be a good solution for? And the business needs is whatever the business needs: reduce dropouts, increase conversions, make it light and fun.

[00:19:03] Once you look at all these pieces and they describe the design solution, these are your design requirements. So once you have your design requirements, you look at the world around you for a metaphor that fits that design description. A metaphor can be anything, physical, digital, real, imaginary, as long as it's familiar to most people. And then you go off and generate as many ideas as you can, and involve the whole team. This is not just a designer-only activity. At Dupla we have designers and researchers, everybody ideates metaphors, and if you have developers and PMs on your team, involve them in the process. Everybody is creative. It should be familiar to most people, it's all about making things approachable.

[00:19:47] After you have generated many ideas, we narrow it down to the top three ideas that best represent the design, and then we take it back to the users and the business. We have the business eliminate one idea, and we take the other two to the lab, so back to the users, and we have the user select the winner.

[00:20:06] Once you have the winning metaphor, you have the essence of your product experience. So you use that, that becomes your guiding framework for the entire system of interaction of the application. This guides how every flow works and how everything looks and behaves, and your business and users will thank you for it. You have a consistent and unique and approachable application.

[00:20:30] At their core, experience metaphors are about creating an emotional connection with the user. As designers we don't have to stop at making people's lives easier and more convenient. We can go beyond usability, with more intention, to create experiences that show that we really care. We can create experiences that make people feel good and inspired, and users will notice, they will keep coming back, and they will tell all their friends about it.

[00:21:01] Thank you so much for listening. I would love to continue the conversation, please reach out to me at melissa@duplastudios.com. I would love to hear how you've been leveraging metaphors in your work.