“Welcome Home.” This is what the AirBnB site greets visitors with. Airbnb is the alternative to staying in a hotel when visiting a city. The idea is that, rather than staying at a hotel where the experience is often impersonal, you can rent a room or home for a more personal and local experience — sort of a home away from home. Airbnb has done a masterful job in weaving storytelling into the core of their product. And indeed, every element on their website — from the visuals to the copy on their website — is a call to explore the world and connect with people. Even their calls to action to learn more about travel are accompanied by images of two users who love searching for local experiences.
I work to weave the story of customer success into the core of the product. The fundamentals of designing for storytelling in tech products can be woven into the overall strategy of nonprofit organizations. The first step is articulating a strong story about the organization, then making sure that every element on the website reinforces that. People are more likely to show an interest in something when they feel a deep emotional connection to it and therefore are more likely to donate. It’s also important to ensure that any images or visual design reinforces the content on your website. The content is what people should focus on. If you take a look at AirBnB’s website, the images aren’t there simply for the sake of having pictures — rather, they serve the purpose of reinforcing their story.
When deciding on the visual language of a site and the visual content to include, it’s important to keep in mind that the focus should be the content, not the design. In general, a nonprofit organization has a story that needs to be communicated, and design that gets in the way of that or a design that sacrifices function for the sake of form is a barrier to a deeper emotional connection. Form should always be reinforcing function. Take a look at the New York Times’ website. The design is simple because the content is the focus — they are the ultimate storytellers and therefore cannot have visual design distracting from their content. Even when you look at their visuals and infographics, it reinforces their content and it does so in a way that’s usually elegant. In fact, the NYTimes has an entire graphics department dedicated to creating graphics around data visualization. Many of the graphics seen on their site use minimal colors so as to convey the information and focus attention on the story.
Here is a more concrete example: On the right is a pie chart with made-up statistics to show an example of visual design getting in the way of communicating effectively with your audience. It may be colorful, and initially eye-catching, but the visual design distracts from the content. While pie charts may be fun to look at, it’s difficult to really understand proportions when looking at a pie chart. In this particular visual, the overwhelming amount of colors and forceful design distract from the content — in this case, pies.
Conversely, on the left, is a bar chart — again, with the same made up statistics — to show an example where the visual design is muted a bit so that the user focuses on the content. Bar charts may feel “boring,” but they can convey the same information pie charts do in a more effective manner. In this visual, the design is reinforcing the content: While the design may not be the focus, it actually is a stronger design because it’s reinforcing the content. If this were part of a news story or on my site, it would likely be a stronger graphic to reinforce the storytelling than the previous graphic. If my product or website had something about pies at the core of its story, this chart would be far more effective in communicating with my users.
To weave storytelling into the core of a site or your product, a good story is necessary to having a strong emotional connection with your audience; it doesn’t matter how beautiful your site is if the story isn’t there. Good design can’t help weak storytelling, but it can certainly reinforce your story.