Storytelling in UX

 

Everyone loves a good story, it’s how we connect and communicate with one another. Storytelling in user experience is no different. The benefits are more than just communicating and connecting with your audience – by approaching UX through the lens of a storyteller, one can significantly strengthen both the presentation as well as their own understanding of research and findings.

 

Listed below are some of the benefits of storytelling in UX

  • Offering a way of communication: Stories offer a different way of communicating with each, whether between clients and UX professionals, or the various teams involved in the research process.
  • People are more likely to remember stories: More memorable than plain facts, stories make information easier to digest. Cognitive research has extensively studied the impact of storytelling on a person’s ability to retain information and how we learn new things.
  • Stories can be persuasive: One of the most powerful tools of storytelling is the ability to inspire people into action, they can positively impact how users interact with a product or a brand, or persuade clients to make changes for improvement.
  • They entertain: Stories capture attention. Typically, a site/product has around 10-20 seconds to grab a user’s attention before they leave and move on. Stories offer a way to draw users in through entertainment.
  • They create shared experiences: Stories are more than just a transfer of information, they help build connections with the audience. When stories bring relevance to the lives of their audience, they’re drawing on the concept that people are not logical creatures, rather we engage through our emotions.

Now that we’ve addressed some of the benefits of storytelling, how do we incorporate them in UX? Below are the key fundamentals to telling a good story.

  1. Reason

The most important fundamental of storytelling is the WHY. Start by addressing why you are doing what you are doing. What is the main point you want your audience to take away? Without a reason, you have no story.

  1. Main character

The main character is the hero of the story. The hero is not you, or the brand or product, the hero is the user that you are serving. You are there to assist and help the user through their journey. You are the Alfred to their Batman and you help the user get things done (Dan Nessler, 6 Storytelling Principles to Improve Your UX).

  1. Conflict

The conflict is where you illustrate a point of pain. This helps your team see a problem from the user’s perspective. UX is all about seeing from the user’s perspective, it’s about finding and resolving the conflicts that they deal with.

  1. Structure

This is how the story will be organized. The most common and successful method is the three-act structure (beginning, middle, and end). This can align with customer journey mapping and can help you understand the users’ motives and end goals.

  1. Relevance

A good story creates awareness in the listener by sharing something they can relate to. As previously stated, people are not logical, we engage more when our emotions are involved. Stories unite ideas with emotions. The goal is to tell a story that triggers emotion in the hopes that the audience will walk away with a positive experience and a desire to share those experiences.

Storytelling in UX combines the power of cognition and emotion. Don Norman expands on the power of emotion through his three levels of processing: visceral, behavioral, and reflective.

 

But maybe storytelling isn’t for everyone, some people may not feel confident enough in their ability to tell a good story. The great thing about storytelling in UX is that it doesn’t require you to have a background in creative writing or literature, stories are being told through various methods currently commonplace in UX design and research. User personas, journey maps, interactive design elements, scenarios, and gamification are just a few examples. These methods offer ways to visualize and organize your findings and research and they serve as storytelling elements. A story is just another way to frame user experience, and a compelling one at that.

“Stories are a powerful tool in user experience design. They can help you understand users—and their experiences—better, communicate what you’ve learned, and use that understanding to create better products.”

-Whitney Quesenbery & Kevin Brooks, Storytelling for User Experience

Design Critique: Sweat (iOS App)

 

Sweat is a fitness lifestyle application created by Australian personal trainer Kayla Itsines. The app is based on her world-famous Bikini Body Guide (BBG) training program and her healthy meal guides. It provides workouts and meal planning all within a mobile device, acting as both a fitness instructor and nutritionist. This critique focuses on aspects in the “Food” and “Activity” modes of the app.

Strong Discoverability in “Food” Mode

One of the most complex, yet well-designed areas of the app is the “Food” mode. The section employs strong use of signifiers, communicating where and how an action takes place, in this case by tapping and swiping. Meal options are available for each day of the week, and the arrows above the week signify that the user can view meals for previous or future weeks. To view a recipe, just tap on the meal.

Good Design in a Digital Grocery List

The checklist icon brings the user to an overview of groceries for the week. By tapping on a food group item, a detailed list appears for that group. Checkboxes to the right of the list signal that tapping one will fulfill that requirement and the user receives feedback with a checkmark in the box and a line through the list item. A conceptual model is formed by this grocery list layout, and in providing the knowledge of what is needed for each meal, the app reduces the need for knowledge in the head.

Flexible Settings

Another component of “Food” mode is the settings option. The settings provide flexibility for the user’s diet and their measurement preferences. This would be considered an inclusive design, in that many users can benefit from this section.

Confusion in “Activity” Mode

The app’s design is complex with many functions, offering instruction from how to do a push up to how to make a chia seed omelette. Most of the app deals with good complexity. As Don Norman argues, “complexity is essential: it is confusion that is undesirable.” An area of the app where complexity turns into confusion is in “Activity” mode.

“Activity” mode lets users view their workout history and affords planning future workouts. I’m going to focus on an issue that comes up while viewing previous weeks. Say the user is in Week 3 of their program. If the user taps the arrow provided at the top left of the screen next to the specified dates, the app will show the previous week’s history. Say the user goes back before week 2, before week 1, and enters into the history for the week before the program started, this is where the app’s design fails. If the user views a week before they started the program, the app mistakenly transfers the information for Week 1 into what should be a blank week. This causes confusion for the user, so they try to backtrack. Now if the user tries to go forward in time (to Week 1 of the program), the app will show Week 2’s info on Week 1’s page. This causes the user to feel frustrated while trying to remember what exercises they did that week. A gulf of evaluation is formed when the user is confronted with inaccurate and inconsistent information.

Solutions

One solution can be to place a physical constraint, a forcing function (e.g. notice alert), if the user tries to view weeks prior to the program’s start week. This forcing function can be a pop-out box notifying the user that they are about to view weeks that are before the user’s start date of the program.

Another solution is using a physical constraint to block the user from even viewing any weeks prior to Week 1 of the program. Make it so that the left arrow is absent on Week 1’s page, making it no longer a possibility for the user to go further back in time.

And yet another solution is to keep all weeks prior to Week 1 completely blank, eliminating the user’s need to look further back.

Through the use of signifiers, feedback, and conceptual models, the app’s discoverability and understandability is strong, but can be greatly improved with the use of constraints. Overall, good outweighs the bad for Sweat, but there’s room for upgrades.