One of the great challenges that cities face all across the United States (and arguably in most places in the world not named Holland) is how to lessen the gridlock and environmental damage caused by an excessive number of cars on the road.
The problem facing most cities is two-fold: On the one hand, it’s hard to force people to change their ways, especially in cities like Los Angeles where car culture has long been a big deal. The other problem is that in most cities (like L.A. for instance!) the public transportation options are either terrible or almost non-existent.
Here in New York City, which has an embarrassment of riches when it comes to public transportation options, the majority of people have long gotten around the city via the subway, while also utilizing cabs, buses, and walking. But despite its strong reliance on public transportation, New York has the fourth-worst traffic congestion in the U.S., which can likely be blamed on the fact that there are roughly 8.4 million people living here.
And so, in 2013 the city’s Department of Transportation (DOT) launched its Citi Bike program (with Citibank being its primary naming sponsor), initially starting with 6,000 bikes available at stations in select parts of Manhattan and Brooklyn. But one question facing the DOT when it launched Citi Bike was whether it could convince New Yorkers who never rode bikes to start getting around the city on two wheels.
About six years after the program launched, it’s been an unmitigated success: The blue bikes have become ubiquitous all over the city, and more than 140,000 members have signed up for the program as of May 2018. Many New Yorkers would probably attribute the success of the Citi Bike program to the well-documented problems plaguing the subway system—and that could be true.
But in a city with so many options for getting around town, a struggling subway system isn’t necessarily enough to convince a non-bike rider that they should hop on a bike; you have to sell them on the idea of bike riding. And one of the best ways to sell people on your product is to give them a good story.
Visual storytelling is an essential part of UX design because it provides your product a narrative that helps to better connect with a user. And while visual storytelling is generally thought to mostly revolve around elements such as photos, videos, illustrations and other graphics—in other words, all the visual components on the platform—you can still build the foundation for your storytelling by looking to the written word; in fact, you can go all the way back to the ancient past when Aristotle established his rules for storytelling.
It was in his Poetics where Aristotle defined a Tragedy as “an imitation of an action that is complete, and whole, and of a certain magnitude,” with the whole being something “which has a beginning, a middle, and an end.” Aristotle’s beginning, middle, and an end continues to provide the foundation for most creative works in literature, film and theater—and provides the foundation upon which experimental artists in these mediums have rebelled against through the years.
Within the context of product design, you “should show you’ve used storytelling to predict your target users’ actions at every level possible,” according to the Interaction Design Foundation. The IDF explains:
"
Use storytelling throughout the design process, incorporating user personas to help map out users' likely experiences and gain empathic insights. This will enable you to watch your users' world as you develop prototypes that can match their expectations, built rapport, surprise them with appropriate nice-to-haves, and leave positive, lasting impressions.
"
On Citi Bike’s website, you’ll see how visual storytelling is effectively utilized to try and inspire New Yorkers to use their bikes to get around the city. A clear narrative is established around a “users’ likely experiences” with images of fellow New Yorkers using a Citi Bike: The visual narrative shows how you Unlock the bike, you Ride the bike and then you Return the bike.
Citi Bike’s website also offers users “appropriate nice-to-haves,” including a detailed map showing where you can access a bike stations around the city, an illustrated explainer of how to follow the rules of the road while riding your bike, and a visual breakdown (including a couple of videos) showing the different parts of the bike itself. And probably as a nod to tourists visiting New York—who also comprise Citi Bike’s user base—the website provides a pictorial list of popular rides to take in and around the city.
“Visual storytelling in UX design is about trying to help users along their journey so that it runs as smoothly and easily as possible,” notes Tom Clarke, marketing content editor at Justinmind.com. “For UX design, visual storytelling is an underlying methodology, and a way to deliver the best possible user experience. Yes, it can be used to encourage a user to click a call to action, but the aim should be more on encouraging a positive decision-making process.”
The ultimate goal of Citi Bike’s website is of course a call to action—namely, to use their bikes and hopefully buy an annual membership. But the visual narrative is constructed in a way that makes it more about the experience of riding a bike around New York, emphasizing the user over the service its marketing.
In the very traditional sense, every good story is supposed to have a hero, which is something we learned at a very young age, when our mom or dad would read us a bedtime story. On Citi Bike’s website, the user is the hero of the story and the bike service (its call to action) is just there to take him or her across the beginning, middle and end of their adventure.
But besides a hero—and to be clear, the hero in UX design is always the user—what else should visual storytelling include? According to Dan Nessler, head of UX design at Zurich-based Hinderling Volkart, there should also be a reason for your story, a conflict, structure, creation of awareness and virality.
The reason in your visual storytelling, Nessler notes, should clearly address “the higher purpose of why you are doing what you are doing.” In other words, you should think about what your product or brand is supposed to stand for when the user engages with it.
With the conflict, your UX design is aiming to solve a problem that the user is facing, which means starting “with a good understanding of your user and a user’s pain points,” according to Nessler. The structure refers to the beginning, middle and end of your narrative, which in the case of Citi Bike shows the process of renting a bike (to solve the conflict of getting around town), riding the bike and then returning it.
The creation of awareness “is about triggering emotional reactions,” Nessler points out, which means that “you probably want to relieve your user for a negative emotion and aim for joy in most cases.” And virality means that users hopefully share their positive experiences with your product on social media.
It’s important to note also that while visual storytelling mostly makes one think of using visual elements, storytelling in UX design will also always include text.
“It’s much easier to tell an engaging and appealing story with words,” SEO expert Bill Widmer explained on the UserTesting blog. “Doing so with just pictures is possible, but not easy.”
What’s important is to understand the “brand’s story and personality” in order to use text that fits in with the story that’s being told, Widmer notes. This includes whether your wording will be more formal or more conversational, or something that’s in between the two styles.
“The user and her goals are the most rudimentary components of a story, upon which empathy, context, conflict, plot, and insight can be built,” Sarah Gibbons, chief designer at Nielsen Norman Group, explains. “A good UX story should be simple yet engaging enough and accessible to a range of audiences: young to old, beginner to expert.”
One of the challenges that UX designers face is finding ways to better engage with users and improve their experience with a product. With visual storytelling you are able to create a narrative that makes for a more memorable experience for users, creating a story where the user is its main character.
