While storytellers construct narrative arcs, UX designers create user journeys.
Brands are everywhere — our laptops, jackets, even water bottles are all branded.
But brands matter. When you buy a new water bottle, you don’t just buy any water bottle — you buy THE water bottle (whatever it means to you). This is where brands come in…you think of its visual identity, product quality, and values. You buy from brands that signify something to you.
According to Blair Brady, a company’s brand is its most important asset; no matter the industry or product.
Your brand isn’t just your logo. It’s how you interact with the world — from your customers to your employees — and it all stems from the brand.-Brady in “Your Brand Is Your Greatest Asset”
It’s not just a brand, but brand stories. A brand may have a defined mission, but it must show it to consumers (or users) at every touchpoint.
Yeti’s drink-ware and cookware product page
Brand stories are told with UX design. Since more users interact with websites and apps to purchase goods, UX is essential.
Let’s review how UX design is involved in brand storytelling, why you must treat the user’s journey like a narrative arc, then discuss storytelling tools you have in your toolkit.
How the heck is UX involved in brand storytelling?
Every company has an established brand. Some we know, like Apple and Coca-Cola, while others we can’t name off the top of our heads. What do well-known brands have in common?
They use brand storytelling to claim and personify their brands — connecting with their target users.
What goes into brand storytelling? How does UX design contribute to bringing it to life?
What is brand storytelling?
Brand storytelling represents a brand’s identity, and is conveyed through every user touchpoint (website interactions, physical stores, etc.) to engage, build trust, and develop lasting relationships.
To develop relationships, brands must connect with users at an emotional level.
Jeff Rosenblum, a digital marketing expert, recognizes that brands can’t only produce great products; they must resonate with users’ desires through every interaction.
“It’s about connecting with people authentically, filling the gaps in their journey, and providing real value.”-Rosenblum in “5 Principles Of Telling Great Brand Stories”
For example, think about Patagonia’s brand. Their mission statement is, “We’re in business to save our home planet.” Their identity is demonstrated throughout touchpoints — Instagram posts showing people wearing their apparel and their website offering discounted, used items (Worn Wear).
Examples of Patagonia Instagram posts
Patagonia uses narrative elements effectively, which creates a brand personality for users to relate and remember.
Before you create a brand’s narrative, you need to decide on the brand’s personality. Is the brand environmentally-conscious or is it innovative? Whichever the personality, every user touchpoint supports it.
UX design is the vehicle for storytelling
User experience design carries the brand’s story by clearly speaking to users. Because UX creates an intuitive digital journey, users are guided through a narrative the brand wants to tell.
But UX goes beyond aesthetics — Nielsen Norman Group (NNG) explains that brands are both experienced and expressed by visuals, tones, and behavior.
More specifically, UX tells the brand’s story through visual design, information architecture, and interactions. Let’s talk more about each.
I. Visual design
Fonts, colors, and imagery work cohesively to set the tone for the experience and reinforce the brand’s personality.
Coca-Cola uses a bright red alongside white and black to create an exciting, yet friendly personality. IBM uses a muted blue with white and black to convey professionalism and confidence. These visual elements combine to emotionally appeal and influence user behavior.
II. Information architecture
Information architecture (IA) creates the structure and organization of content presented to users. Organized websites help users navigate through digital touchpoints to comprehensively tell the brand’s story
Example structure of a website’s information architecture
Intuitive user flows make it clear what the brand stands for, what it offers, and why it matters to users. If the IA is cluttered, the brand’s story gets lost — leaving users frustrated (and abandoning the site).
III. Interactions
Every interaction, like a click or swipe, adds depth to the brand’s story by creating a dynamic experience.
An engaging notification after completing a task (a confirmation snackbar) makes users feel they are interacting with something alive. Interactions give users reassuring feedback and contribute to the overall emotional experience.
Treat the user journey like a narrative arc
The user journey functions like a narrative — every step, interaction, and decision builds towards a satisfying goal. But instead of the story’s hero living happily ever after, the user successfully completes a task.
This is done by creating a narrative through user flows, embedding emotional design in the UX, and adding personalization.
Create a narrative through user flows
Just like storytellers construct a plot, UX designers structure the user flow to be a logical progression. Adobe relates user flows to road-maps to drive users in the right direction; you must understand users, their goals, and what information they need to optimize the UX.
Each step in the flow (or road-map directions) leads the user forward in their journey without confusion.
But confusion happens, so flows account for both “happy” and “sad” paths. You want the user to succeed, but they may encounter errors. It’s important to recognize that narrative arcs can take a turn for the worse, and leave users locked up in a dungeon. This way, the UX helps the user make their escape.
The user flow as a narrative arc
The key to crafting the narrative through user flow is seamlessness. Transitions between actions are smooth and intentional, guiding the user between steps and moving them towards their goal (I.E., making a purchase or finding information).
Embed emotional design in UX
Emotional design focuses on positive, delightful experiences that make users feel something. A story, brand, or design without happiness, suspense, or anger is boring and monotonous.
The theory of emotional design has been around for over 2 decades with Don Norman’s Emotional Design: Why We Love (or Hate) Everyday Things, but didn’t begin trending in UX until recently.
“Everything has a personality: everything sends an emotional signal. Even where this was not the intention of the designer, the people who view the website infer personalities and experience emotions.”-Norman, “What is Emotional Design (ED)?”
Warm colors, rounded fonts, and appealing visuals make websites feel welcoming. Bold call-to-actions and intuitive navigation create a sense of confidence. Entertaining animations add layers of emotion to retain users.
Embedding emotions into UX design turns ordinary into a memorable experience to meet functional and emotional needs.
Add personalization
To deepen the narrative arc, personalizing the story makes each user feel like it’s uniquely theirs.
Personalization tailors the experience based on user data and behavior, like recommending products based on browsing history. Nielsen Norman Group (NNG) encourages personalization to deliver what users need when they need it, but with intentional execution.
When a user sees content speaking directly to their preferences, it creates a sense of recognition and strengthens their brand connection.
For example, Spotify is well-known for their “Spotify Wrapped,” which gives users a personalized data compilation of their year’s activity. A “Wrapped” tells a user their top-5 artists, what city they have the most in common with based on music tastes, and allows users to share their results on social media.
Example of a “Spotify Wrapped,” released in December 2024
Rather than passively consuming content, users are given a personalized experience that adapts to them — creating a sense of ownership in their relationship with a brand.
Visuals and interactions as storytelling tools
Designers have many storytelling tools in their kit (fonts, colors, imagery, oh my!) they can use to optimize a brand’s story — let’s look at each.
Set the tone through fonts and colors
Fonts communicate a brand’s character before a single word is read. A sans-serif font (Helvetica) makes the brand feel modern, while a serif font (Merriweather) suggests the brand is more traditional.
Colors influence users’ mood and perception on a subconscious level. A brand’s color palette ensures visual harmony and reinforces the brand. In “Here’s why all fast-food signs are red,” it’s suggested that fast-food brands use red not because it make us hungry, but because it’s a stimulating and exciting color. In contrast, big-tech companies choose calming blues to project a sense of reliability and security, shown below.
Contrast of colors and perceived feeling between IBM and McDonalds
Fonts and colors act as the brand’s conversation starter to users, and users decide to continue the conversation or leave simply from these visuals (it’s that powerful). Fonts and colors shape the user’s associations the moment they encounter a design, which makes or breaks their brand connection.
Choose imagery to speak volumes
Imagery can be implemented with photographs, illustrations, or custom icons; whichever one selected, the visuals communicate the brand’s message.
Tech startups opt for futuristic imagery and minimal iconography to emphasize characteristics like innovation. Wellness brands use organic imagery and rounded icons to convey tranquility. Regardless of style, the imagery must be consistent and aligned with the brand’s voice.
When imagery is thoughtfully chosen and consistently applied, they illustrate the brand’s message and emotionally connect with users.
Bring the story to life with animations
Microinteractions, like a button changing color when hovered over, strengthen the storytelling experience by making it feel interactive. They create small moments, but boost user engagement and tell more about the brand. For example, a cheerful, bouncy button on a children’s site reflects the brand’s lightheartedness, while a polished transition on a luxury brand’s site conveys sophistication.
Animations establish the pacing of an experience. They guide the user through content in a controlled, deliberate way. Val Head, an animation expert, says animation captures and directs the user’s attention to the most important content through hierarchy.
Of all the available design tools at our disposal — such as color, type, and layout — animation is the one that talks with its outside voice.-Head in “Six Principles of Using Animation in UX Design”
The style of animations and microinteractions support the brand’s core values. Sustainable brands (Kowtow) use slow, organic movements in its website elements to convey calmness. Tech startups (Mailchimp) use jumpy, precise animations to emphasize efficiency.
Brand stories are not just about marketing campaigns, and UX design is not just about creating pretty interfaces. They are combined forces which shape how users experience and connect with a brand.
From the deliberate use of fonts, colors, and imagery to smooth navigation and dynamic interactions, UX design tells the brand’s story. By integrating emotional design and personalizing the user journey, brands can engage users and develop lasting relationships.
Plot twist: How UX design can tell your brand’s story was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
