User interface as a character

A storytelling approach to design.

A year ago, I had the pleasure of reading Design is Storytelling, by the fabulous Ellen Lupton, and I can safely say that it is one of those books that changed my life. Since I majored in Animation, and my background leans more to storyboard and illustration, I have always defined myself as a storyteller.

I have worked as a Storyboard Artist, I have been a Character Designer, a UX and UI designer, and I am convinced we can approach every new design, and every new product, thinking of it as if it was a character.

User interface as a character

So you received the briefing and you have to start designing. Of course, every project will be different: Are you designing an app, a website, maybe a Virtual Reality experience? So I recommend, before you start dancing with your pencil on your paper (sketching is still my favorite way of landing an idea), ask yourself this basic question: If my app were a person, who would she or he be? Or maybe you are designing for a company that already has a thorough design system in place, well great! Then the task becomes: I have to create a character that fits this universe that already exists, so who is this character?

To think of a product as if it was a person, take Instagram. If Instagram were a person, I imagine it being a cool popular guy who is going to talk you up in front of a group “Check out my boy here! He likes caramel macchiatos and inspirational quotes, hashtag blessed!”

Or maybe you are designing a product for a company that does not have a design system in place yet. This is when thinking in terms of character can help you to shape this new product. What is this product voice like? Is it for a target demographic of teenagers, adults…?

Our capacity to understand a character is powerful, we can very well picture Instagram, Facebook, or Amazon as a person, and this approach works for every product we use. If the app I use to pay my taxes were a person, I think this person would be pretty significant and intimidating. A person who hates everyone and everything and, to add insult to injury, is not very helpful. Also, I might add, it does not help my experience to know that I am going to lose money by using this app.

So we can imagine every existing product as a character. My approach is to imagine a product that does not exist yet, as a character. And it makes sense for branding.

The interface as a guide

Almost every business would like to have a great user experience, and they would like the user experience of one of their stores to be translated to the users’ phone. Sometimes I like to think of this interface character as another worker who is in charge of walking the client through the journey of accomplishing his particular goal. Does he want to open a bank account? Does he want to track the cheapest flight to go to Lima? In this case, the perfect app would be like an employee who knows everything there is to know about that process, and who will guide this particular user to accomplish their goals. Let’s remember a useful guide can make a long journey seem less intimidating. This is why crafting a great Costumer Journey Map is so important.

So the role of your interface is to provide guidance, support, or even motivation (think of the Duolingo owl). This is important because while the app will do its job if it helps the user to complete the journey, it is not enough. Your interface also has to do it while adhering to a brand image, matching a particular color palette, absolute values, and a specific tune. It has to have your company voice.

Imagine you are reading the Divine Comedy, and instead of ancient, beautiful prose, Virgil rhymed his words like a Dr. Seuss character. It would certainly take you off your rhythm and would make you ask: What just happened? Virgil would not say that! Your previous knowledge of the character would prompt your reaction, and the expectations set by this knowledge.

Why is this important for designers?

Thinking about your user interface on these terms allows you to flesh out your app, to understand it better, and answer basic questions like which word to use when you have two options. (Also, I think it’s worth mentioning that in Spanish we use two levels of formality, which is also something to consider when you are copywriting.)

Also, we are humans, and we are used to understanding character. That’s why we can understand motivations on roles in movies, so it helps the process to imagine the product you are designing as a character: Would my character express his thoughts in this particular way? Are you designing for a bank? Then the character would be cordial and formal, is this an app for kids? Then the character will be enthusiastic and fun.

The same way creating user personas can help us understand our public, treating the very app as a persona can help us make decisions to make the best app we can make. Not only web pages and mobile applications, but it also helps in any product we develop.

Michael Worthington, in his Calarts course, says that a great example of an interface for everyday use is the ATM, the intermediary between you and your money. An ATM offers a great example of an interface that guides you through a straightforward process: insert your card, get the card out, enter your PIN, select the amount to withdraw, get your money, press the option that lets you get out of the process, thank you screen.

Well, next time you use the ATM, I suggest you pay attention to the details of this interface. Remember, someone had to program every aspect that you see: The colors of the buttons, the typeface of the letters, the number of steps taken to accomplish your transaction, and (often overseen) the language that it uses to communicate the steps. I can assure you, this machine displays the utmost formality and will show the words that a bank employee would perhaps pronounce.

The ATM will greet you. It will say please and thank you, and more often than not, will finish the transaction with a pleasant message that reads close to “Thank you, it was a pleasure to be of your service.” I am willing to wager you can almost see the ATM smiling when it greets you. I bet if I asked you to imagine this ATM as a character, you would probably picture him wearing a suit and tie matching the colors of the building. Also, you would imagine him as very cordial and formal, like any bank employee. I think about this every time I use an ATM and think to myself: How does a machine feel pleasure about helping me?

To summarize, the way you judge a person when you first meet them is the same way you are going to form your first impressions of the app you are using. Is it well put together? Does it need a better layout, the same way a person might need a haircut? Does it present errors on the surface, like a person would display a mustard stain on his shirt? Thinking of applications as characters helps us to imagine better the dos and don’ts of the app we are designing. Would the character say this? Would he phrase it like that? Would he wear those colors?

Every day I realize that the overlapping between storytelling and design is more significant than we used to think and that one can easily find analogies and similar ways of working. Or similar intellectual ways to approach a particular visual problem. Let’s remember that the Gestalt design principles started in the field of psychology. Keeping these concepts in mind not only help us to make better decisions about our designs, but it also makes our interface more human, because there is nothing more human than stories and characters in them. In the words of Térence (The Roman play writer): “I am human, and nothing human is alien to me.”