• Reviews / Why join our community?
  • For companies
  • Frequently asked questions

story telling in ux case study

How to Create Effective UX Case Studies with Aristotle’s 7 Elements of Storytelling

So, you want to create case studies for your UX design portfolio. But what kinds of UX case studies should you write? And how do you make them targeted and strong? After all, irrelevant and weak case studies are one of the most common mistakes in UX design portfolios , according to the prototyping tool UXPin. Thankfully, you can use the Greek philosopher Aristotle’s 7 elements of storytelling to craft relevant and compelling UX case studies. Let’s find out how.

In 335 BCE, Aristotle wrote Poetics , the earliest surviving work of dramatic theory. In it, he laid out 7 elements of storytelling, which he ranked in order of importance:

You should go through these 7 elements before you create your UX case studies. This way, you can define exactly what you want to say. You’ll therefore sharpen the focus of your UX case studies and make your message crystal clear to recruiters who read it.

Let’s go through how each of Aristotle’s 7 elements relates to your UX case studies. For each element, we’ll give you questions you should answer before you write your case studies.

1. Plot: The Story Your UX Case Studies and Portfolio Tell

Aristotle regarded plot as the most important element, and for good reason. Plot is what happens in a drama—for instance, a tragic plot tells the story of a hero’s downfall. A bad plot can spoil an otherwise good drama—and the same is true of UX case studies.

Your UX case studies, and by extension your portfolio, should tell a relevant and compelling plot about yourself . For instance, you can tell the plot of a “self-made UX designer who is passionate about accessibility ”. Think about the plot you want to tell through your UX case studies.

You should also tell the same plot throughout all of your UX case studies . This way, your portfolio sends a cohesive message. For example, if you want to become a UX researcher, all your case studies should contain UX research work. Otherwise, you’ll send mixed signals to a recruiter, who will not be able to gauge whether you can perform well in the role you’ve applied for.

story telling in ux case study

Make sure your UX case studies tell a cohesive plot about you as a designer.

© Teo Yu Siang and the Interaction Design Foundation, CC BY-NC-SA 3.0

Tell the Right Plot: Checklist of Questions to Ask Yourself

What plot do you want to tell? What’s your story—from a career perspective?

Do your UX case studies tell the same story about yourself, or do they contradict one another? If they contradict one another, then angle them so they don’t or delete the case studies which send mixed signals.

Which past projects should you choose to tell the plot you want your recruiters to see?

2. Character: Your Role and How You Work with Others

In a drama, the main character serves the plot with the help of supporting characters. The main character, according to Aristotle, should be good, appropriate and consistent.

In your case study, you are the main character . Like Aristotle’s main character, you should appear in your UX case studies to be:

Good : That is, you should showcase your craft in design.

Appropriate : You should display a level of expertise that makes sense. For instance, you cannot claim to have led a team of designers when you’re a junior UX designer.

Consistent : You should play a consistent design role throughout all UX case studies.

Character is also about how you work with your team-mates . It’s because you’re not the only character in your story. You work with peers, managers and other stakeholders . Show how you work well with others.

story telling in ux case study

Communicate your skills, expertise, design role and ability to work in a team in your UX case studies.

© Teo Yu Siang and the Interaction Design Foundation, CC BY-NC-SA 3.0.

Write the Right Characters: Checklist of Questions to Ask Yourself

What role do you play in the design process ? In other words, are you a UX generalist who covers the entire design process, or a specialist such as a UI designer?

Do you play the same role in all your UX case studies? If not, which case studies can you tweak or remove so that you play a consistent role?

How does your “character” interact and work with other “characters”? Is there conflict or harmony?

Who else should you include in your case study? Who are the important co-contributors (or even leaders) you should acknowledge?

3. Theme: The Context of Your Project

Theme refers to the setting or context in a Greek drama. Just like in a drama, you have to set the scene in your UX case studies.

Provide readers with your project’s context : your main goals, the obstacles you faced and your motivations that explain why you took on the project. You’ll help your readers understand your project better and create a compelling purpose around your case study.

story telling in ux case study

Explain your goals, obstacles and motivations to set the context of your UX case studies.

Set the Right Theme: Checklist of Questions to Ask Yourself

What’s your main goal in the project?

What are your main obstacles that you had to overcome?

Why did you take on the project? Why are you proud of it?

Remember to set the stage early—lay out your theme in the beginning of your UX case studies.

4. Diction: Your Tone of Voice

To Aristotle, diction (or dialogue) was the way the characters speak to each other. Audiences can tell a lot about a character from that person’s tone of voice. Good communicators are characters who get their points across with the right words—and don’t hide behind them or try to outsmart their audience because they love the sound of their own voices.

In the same way, your diction or writing style influences your UX case studies’ reading experience . Master how to write effectively. Use plain English, avoid technical terms and choose a friendly but professional tone of voice to help recruiters appreciate your UX case studies.

story telling in ux case study

Use plain English in your case study to provide a pleasant reading experience.

Use the Right Diction: Checklist of Questions to Ask Yourself

What is your tone of voice, and is it appropriate for a case study?

Can you avoid technical terms? If you need to include them in your case study, can you explain them?

Have you learnt how to write in plain English?

Which parts of your case study can you convert into bulleted or numbered lists ?

Remember to triple -check your case study for spelling and grammatical errors (tip: read it aloud)!

5. Melody: Rouse the Emotions of Your Reader

Actors often perform musical choruses in a Greek play. These choruses—or the melody—reflect the average person’s emotional response to the characters’ actions.

In your UX case studies, melody relates to how you stir up the emotions of the reader . Your case study is not a factual report, but a story to get a recruiter interested enough to meet you.

Don’t be afraid to let your emotions shine through in your UX case studies. Show your passion. Melody can reinforce your case studies’ theme—your project goals and obstacles should be charged with emotion , just like in real life. Remember to keep it appropriate and professional, though. There’s a fine line between maximizing the dramatic potential in your story and blustering like someone who sounds too over the top to work with.

story telling in ux case study

Spend a little time to make sure your case studies tell your emotional journey, too.

Sing the Right Melody: Checklist of Questions to Ask Yourself

How do you show not only your technical expertise but also your passion in design?

Can you insert a hook to your UX case studies to draw the reader in?

Remember to show your emotional journey throughout your projects, too.

6. Décor: The Look and Feel of Your UX Case Studies

In plays, décor refers to stage design. In your UX case studies, it refers to the visual design.

Your portfolio is a designed product, so it should look and feel good. Use images of your works in progress to tell your story. Make sure your portfolio has readable text. Your portfolio should be usable , effective and pleasant.

story telling in ux case study

Your recruiters expect your portfolio to look polished and professional.

Apply the Right Décor: Checklist of Questions to Ask Yourself

Did you remember to take lots of photos and screenshots of your works in progress, so you can use them in your UX case studies? If not, perhaps you can easily reconstruct some of the processes. In future, remember to take photos and screenshots of your work processes.

Do your projects contain sensitive information? If so, you should get clearance to use them in your UX case studies. You can also show only non-sensitive parts of your project.

How can you make your UX case studies and portfolio look consistent with your own visual style?

7. Spectacle: The Wow Factor

To Aristotle, the spectacle of a drama was least important. A story’s talking point, wow factor or plot twist will let audiences remember it, but it alone will not make a good play.

Incorporate spectacle into your UX case studies if possible, but never do this at the expense of the six other elements of your story. You can create a spectacle through an unexpected user insight, a massively successful outcome or a thoughtful lesson learnt.

story telling in ux case study

It’s great if you can wow your recruiter, but don’t try to do it at the expense of your overall story.

Create the Right Spectacle: Checklist of Questions to Ask Yourself

Does your project contain any unexpected “plot twists” that forced you to change direction? You could use this to create a sense of spectacle.

Did you achieve an impressive result? If you won an award, achieved commercial success or generated great reviews, highlight it in your case study.

Did your project end in a relative failure or lukewarm response? If so, turn it into a learning point. Earnest reflection can be a spectacle, too.

Do your elements of spectacle interfere with your story? For instance, will you withhold key information just to deliver a “plot twist”? If so, remove the spectacle to deliver your story well.

Plan Your Case Study Well to Maximize its Impact

Now it’s your turn to answer the questions we’ve posted for each element. Failing to plan is planning to fail! Spend time to plan your UX case studies to save time (and career opportunities!) in the future. And remember, please make sure your UX case study is short and sweet, since recruiters will usually spend no more than 5 minutes reading it.

To help you, we’ve created a template you can download, which contains the 7 elements of a case study as well as the key questions you should answer.

Create a Compelling UX Case Study with Aristotle’s 7 Elements of Storytelling

The Take Away

Your UX case studies need to tell stories that are targeted and that send the right message. To achieve this, make sure you cover all 7 of Aristotle’s elements of storytelling.

Each of your UX case studies should contain (in order of importance):

A compelling plot that is consistent throughout all UX case studies;

A good, appropriate and consistent main character (i.e., you), as well as supporting characters;

A theme which sets the context of your project and propels you forward;

Pleasant, friendly and professional diction ;

An emotional and/or passionate melody ;

Effective and attractive décor such as images; and

A spectacle that makes your story memorable.

References and Where to Learn More

Jerry Cao from UXPin shares the most common mistakes in UX design portfolios here .

Aristotle’s 7 elements of storytelling came from his treatise Poetics , which you can read in full.

If you struggle to decide whether to be a generalist or specialist designer, our article can help you.

Hero image: Teo Yu Siang and the Interaction Design Foundation, CC BY-NC-SA 3.0.

How to Create a UX Portfolio

story telling in ux case study

Get Weekly Design Insights

Topics in this article, what you should read next, test your prototypes: how to gather feedback and maximize learning.

story telling in ux case study

The persuasion triad — Aristotle Still Teaches

story telling in ux case study

  • 8 years ago

Methods to Help You Define Synthesise and Make Sense in Your Research

story telling in ux case study

  • 3 years ago

The Power of Stories in Building Empathy

story telling in ux case study

  • 2 years ago

8 Writing Tips to Supercharge the Quality of Your UX Work

story telling in ux case study

How to Create Visuals for Your UX Case Study

story telling in ux case study

The Use of Story and Emotions in Gamification

story telling in ux case study

5 Great Ideas to Improve the UX of Your Copy

story telling in ux case study

  • 7 years ago

Aristotle on Storytelling in User Experience

story telling in ux case study

How to Create Engaging UX Case Studies with Freytag’s 5-Part Dramatic Structure

story telling in ux case study

Open Access—Link to us!

We believe in Open Access and the  democratization of knowledge . Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change , cite this article , link to us, or join us to help us democratize design knowledge !

Privacy Settings

Our digital services use necessary tracking technologies, including third-party cookies, for security, functionality, and to uphold user rights. Optional cookies offer enhanced features, and analytics.

Experience the full potential of our site that remembers your preferences and supports secure sign-in.

Governs the storage of data necessary for maintaining website security, user authentication, and fraud prevention mechanisms.

Enhanced Functionality

Saves your settings and preferences, like your location, for a more personalized experience.

Referral Program

We use cookies to enable our referral program, giving you and your friends discounts.

Error Reporting

We share user ID with Bugsnag and NewRelic to help us track errors and fix issues.

Optimize your experience by allowing us to monitor site usage. You’ll enjoy a smoother, more personalized journey without compromising your privacy.

Analytics Storage

Collects anonymous data on how you navigate and interact, helping us make informed improvements.

Differentiates real visitors from automated bots, ensuring accurate usage data and improving your website experience.

Lets us tailor your digital ads to match your interests, making them more relevant and useful to you.

Advertising Storage

Stores information for better-targeted advertising, enhancing your online ad experience.

Personalization Storage

Permits storing data to personalize content and ads across Google services based on user behavior, enhancing overall user experience.

Advertising Personalization

Allows for content and ad personalization across Google services based on user behavior. This consent enhances user experiences.

Enables personalizing ads based on user data and interactions, allowing for more relevant advertising experiences across Google services.

Receive more relevant advertisements by sharing your interests and behavior with our trusted advertising partners.

Enables better ad targeting and measurement on Meta platforms, making ads you see more relevant.

Allows for improved ad effectiveness and measurement through Meta’s Conversions API, ensuring privacy-compliant data sharing.

LinkedIn Insights

Tracks conversions, retargeting, and web analytics for LinkedIn ad campaigns, enhancing ad relevance and performance.

LinkedIn CAPI

Enhances LinkedIn advertising through server-side event tracking, offering more accurate measurement and personalization.

Google Ads Tag

Tracks ad performance and user engagement, helping deliver ads that are most useful to you.

Share Knowledge, Get Respect!

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this article.

New to UX Design? We’re giving you a free ebook!

The Basics of User Experience Design

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

New to UX Design? We’re Giving You a Free ebook!

Skip navigation

Nielsen Norman Group logo

World Leaders in Research-Based User Experience

Storytelling in ux work: study guide.

Portrait of Megan Chan

March 8, 2024 2024-03-08

  • Email article
  • Share on LinkedIn
  • Share on Twitter

Storytelling is a powerful tool for connecting our teams, stakeholders, and products. Stories that engage and persuade audiences can help us advocate for our users and increase buy-in. Beyond just sharing information, stories can evoke emotions, encourage reflection, and inspire action.

In This Article:

Storytelling fundamentals, turning data into stories, presenting to teams, storytelling artifacts.

If you’re new to UX storytelling, start here.

After collecting data, turn it into a clear narrative. Rather than just passing the data on to our audience, it is our job to shape the data into a story that highlights the main insights. Use the following resources to turn complex data into a digestible story for your audience.

Use the following resources to actively engage stakeholders during presentations, convey the value of UX projects, and navigate challenges that may arise.

UX professionals use various storytelling artifacts to engage and communicate with audiences. While this list does not include all storytelling artifacts, it serves as a good starting point.

Related Courses

Storytelling to present ux work.

Persuade and engage while presenting research findings and design ideas

Interaction

Product and UX: Building Partnerships for Better Outcomes

Understand UX and product roles (PM and PO) to better collaborate in product development

Successful Stakeholder Relationships

Get buy-in, manage expectations, and build trust

Related Topics

  • Study Guides Study Guides

Learn More:

story telling in ux case study

Successful Projects: 7 Steps for Better Collaboration

Tim Neusesser · 4 min

story telling in ux case study

Shine in Your UX Job Interviews with STAR

Evan Sunwall · 4 min

story telling in ux case study

Measuring DesignOps with REACH

Kate Kaplan · 4 min

Related Articles:

UX Stakeholders: Study Guide

Sarah Gibbons · 2 min

Accessibility and Inclusivity: Study Guide

Tanner Kohler · 5 min

UX & Marketing: Balancing Business Goals and Supporting Users

Samhita Tankala · 7 min

Omnichannel Journeys and Customer Experience: Study Guide

Kim Salazar · 4 min

Visual Design in UX: Study Guide

Kelley Gordon · 3 min

Information Architecture: Study Guide

Page Laubheimer · 5 min

An spiriting UX designer sitting at a desk, smiling at the camera

How to Craft an Outstanding Case Study for Your UX Portfolio

CareerFoundry Blog contributor Jonny Grass

Writing case studies for your UX portfolio can feel opaque and overwhelming. There are so many examples out there, and often the ones that make the rounds are the stunning portfolios of top visual designers. It can be inspiring to see the most beautiful work, but don’t let that distract you from the straightforward format of a good UX case study. 

At the core, a UX case study relies on excellent storytelling with a clear, understandable structure . This article breaks down the anatomy of a UX case study to help you tell a simple and effective story that shows off your skills. We’ll start with some general guidelines and structure, then break it down one piece at a time:

UX portfolio overview

What is a ux case study, general guidelines, how to structure a case study, how to fill in the details, defining the problem, understanding your users, early or alternate ideation, final design solution, next steps and learnings.

  • Final thoughts

1. Before we get started

Before we dive into all the art and science of the case study, here’s a quick refresher on what a job-winning UX portfolio looks like. In this video, pro designer Dee analyses various design portfolios to pick out what works—and what doesn’t:

Simply put, a case study is the story of a design project you’ve worked on. The goal, of course, is to showcase the skills you used on the project and help potential employers envision how you’d use those skills if you worked for them.

A case study is typically written like a highly visual article, with text walking readers through a curated set of images. Curated is an important word here, because it should be short and sweet. It’s a chance to share what you want potential employers to know about your work on this project.

With that in mind, case studies are really a UX designer’s secret weapon in two ways. First, they get you in the door by showing more about your work than a resume and a top UX cover letter ever could. Another benefit is that they’re really handy in job interviews. If someone asks about a past project, you can walk them through the case study you’ve already created (this is sometimes a requirement anyway).

I mentioned that UX case studies are about storytelling. I’d actually say they’re about stories-telling, since they need to tell two intertwined stories .

The first is the story of your project. This answers questions like what problem you solved, who your users were, what solutions you explored, and what impact they had.

The second story is about you as a designer and your process. This is more about which methods you chose to use and why, how you worked within constraints, and how you worked as a member of a team (or without one).

So what are the steps for an effective case study? Well, like most things in design (and life), it depends. Every case study will be different, depending on what stories you’re telling. The six-part outline below, though, should guide you through an effective format for any UX project story. Here’s the outline (we’ll dive into each component in just a minute):

  • Defining the Problem
  • Understanding your Users
  • Final solution

UX designer looking at a whiteboard with rough prototypes

It’s worth it to add a few general notes before we dive into each of the list items above. For each section, include 1-2 short paragraphs and an image of a deliverable that visually tells the story your paragraphs explain. A reader should be able to either just read or just look at the images and roughly get what this moment in the story is communicating.

When choosing images to include, focus on quality over quantity.  Choose your best deliverables for each stage and briefly relate them back to the larger narrative. It can be tempting to overload the page with everything you created along the way, but these extra details should stay in your back pocket for interviews.

Lastly, make sure your case study is scannable . In the best of circumstances, people don’t read word for word on the web. Make sure your text is reasonably concise, use headers and strong visual hierarchy, and use bullet points and lists when possible. If you need a refresher on how to achieve this, check out our guide to the principles of visual hierarchy .

Ok, let’s take a look at each step in a bit more detail.

2. Anatomy of a UX case study

Close-up on UX designer's hands, writing on a stick note over a whiteboard mockup

Like any story, the introduction sets the stage and gives much of the necessary context readers will need to understand your project. This is one section where people actually might take some extra time to read carefully as they try to discern what this case study is about. Make sure they have all the details they need.

Some key questions to answer are:

  • What is your company and/or product?
  • What user problem did you try to solve?
  • What was your role?
  • What tools and methods did you use?
  • What are the major insights, impacts, or metrics related to the project

After introducing the project, dive more deeply into the problem you tackled. You touched upon this in the introduction, but this section is an opportunity to make a strong case for why this project exists. Did a competitor analysis or market research demand a new product? Was there past user research in your company that suggests a needed redesign of the product?

Remember that you’ll want to create a through line in the narrative, so try to lay out the problem in a way that frames your design work as a solution.

Deliverables that work really well for this section would be:

  • Analytics or usage data
  • Market research of internal business metrics
  • Survey results or interview highlights

After explaining the problem, show how it impacts your users and their interaction with your product. If you did original user research or you’re seeking user research-oriented jobs, sharing interview scripts, affinity maps , and spreadsheets can be useful in showing your process.

However, this section shouldn’t be only about your process. A key goal of this section is articulating who your users are and what their needs are. These findings should set up your design work that follows, so try to set up that connection.

A few types of the deliverables you might share here are:

  • User personas
  • Mental models
  • Journey maps or customer experience maps

Keep in mind you want to communicate users’ key motivations and challenges, as well as any more specific user groups you identified.

Close-up on a UX designer's hands, working on a set of paper prototypes

This section can really scale up or down depending on what you have to show. Research shows that hiring managers  don’t just want the final product , so it’s clear that showing some of your process is helpful. Especially for students or designers without a fully built product to show, this can be a moment for you to shine.

Don’t worry about the low fidelity of these documents, but the rougher they are, the more you’ll need to guide readers through them. Everything you show here should teach the reader something new about your process and/or your users.

Artifacts you might include are:

  • Pen and paper or low fidelity digital wireframes

If you did early testing or faced constraints that determined your future design work, be sure to include them here, too.

This section should include the most final work you did on the project (e.g. wireframe flows or color mockups) and any final product it led to (if you have it). Be clear, though, about which work is yours and which isn’t.

Explain any key decisions or constraints that changed the design from the earlier stages. If you incorporated findings from usability testing, that’s great. If not, try to call out some best practices to help you explain your decisions. Referring to Material Design, WCAG, or Human Interface Guidelines can show the why behind your design.

If you’re able to show the impact of your work, this can take a good case study and make it outstanding. If your project has already been built and made available to users, have a look at any analytics, satisfaction data, or other metrics. See what you could highlight  in your case study to show how your design improved the user experience or achieved business goals. Ideally, you can refer back to your original problem statement and business goals from the introduction.

If you don’t have any way of showing the impact of your project, lay out how you would measure the impact. Showing you know how to measure success demonstrates you could do this on future projects.

Lastly, conclude your case study by sharing either your next design steps and/or some key insights you learned from the project. This isn’t just fluff! No project is perfect or final. Showing next steps is a great way to demonstrate your thinking iterative approach (without having to do the work!).

Also, many companies do (or should do) retrospectives after each project to identify challenges and improve future processes. Use this process and the insights you gain from it to inform your case study. Letting employers know you’re capable of reflection shows humility, self-awareness, and the value you can bring to a team.

3. Final thoughts

Since each case study is a unique story you’re telling about your project, it’s a little art and a little science. But starting with the structure laid out in this article will show who you are as a designer and how you solved a problem. And those are two stories companies want to hear!

If you’d like to learn more about how to craft a great UX portfolio, check out these articles:

  • 5 Golden rules to build a job-winning UX portfolio
  • The best UX design portfolio examples from around the web
  • The best free UX/UI portfolio websites to use
  • Salary negotiation for UX designers
  • Marli Mesibov
  • Apr 15, 2022

How To Use Storytelling In UX

  • 17 min read
  • UX , Storytelling , Emotional Design , Product Strategy
  • Share on Twitter ,  LinkedIn

About The Author

Marli Mesibov is a Lead Content Strategist at Verily Life Sciences. She has been helping people understand doctors, hospitals, and health insurers for over a … More about Marli ↬

Email Newsletter

Weekly tips on front-end & UX . Trusted by 200,000+ folks.

As human beings, we love stories. And stories come in all shapes and sizes. Children love fairy tales; teenagers ask “and then what happened?” when their friends recount gossip; history buffs explore biographies for insight into famous personalities; science lovers enjoy documentaries that offer explanations of the world around us; and everyone likes a satisfying conclusion to a good workplace drama or romantic exploit — be it fiction or fact.

We tell stories in our day-to-day lives. In fact, according to Scientific American, 65% of the conversation is stories ! They’re in commercials to grab attention, in nonfiction books to make learning more personal, and in meetings — think of how storyboards help sell management on new product features. Magazines and news shows also tell stories rather than simply listing facts to make readers and viewers care about the information.

This is why, to quote Conversion Rate Experts on websites:

“You cannot have a page that’s too long — only one that’s too boring.”

We use storytelling skills to create positive user experiences as well, though it looks a little different when a story is a part of a product. Learning how to tell a good story with a digital experience will help people care about and engage more deeply with the experience. What’s more, using the same concepts that help create a good story will help you build a better product . A good story will influence marketing material, create a product that fits into the user journey, and highlight the opportunities that need more descriptive content or a more emotional connection to the end-user.

In this article, we’ll go over five steps to building a good experience using the steps an author uses. For consistency’s sake, we’ll also look at a single product to see how their choices can be evaluated through the five steps. I’ve chosen Sanofi’s Rheumatoid Arthritis Digital Companion , an app I helped to build in 2017. This product is a beneficial example to follow because it followed best-in-class storytelling practices, and also because it is no longer available in the app store, so we can look at it at a moment in time.

But before we get into any of that… why does storytelling work?

Why Does Storytelling Work?

In “ Thinking, Fast and Slow ” (Ch. 4, The Associative Machine), psychologist Daniel Kahneman explains how our brains make sense of information:

[…] look at the following words: Bananas Vomit […] There was no particular reason to do so, but your mind automatically assumed a temporal sequence and a causal connection between the words bananas and vomit forming a sketchy scenario in which bananas caused the sickness. As a result, you experience a temporary aversion to bananas (don’t worry, it will pass).

Kahneman refers to the mind “assum[ing] a temporal sequence and a causal connection” between words. Put another way, even when there is no story, the human brain makes sense of information in two ways:

  • Temporal Sequence Assuming things happen linearly, or one after another.
  • Causal Connection When one thing causes another to happen.

Hubspot’s “ Ultimate Guide to Storytelling ” says the same thing as Kahneman, in a more readable way:

“Stories solidify abstract concepts and simplify complex messages.”

Our brains are built to find and understand stories. Therefore, it’s no wonder that a story can improve UX. UX is all about connecting an experience to a person’s mental model.

Learning how to tell a good story with a digital experience will help people care about and engage more deeply with the experience. “

But writing a story is easier said than done. A story is more than just a list of things. It requires the “causal connection” that Kahneman referenced, and it must be emotionally charged in some way. Let’s review five steps that authors use which will also help you build a story into your user experience:

  • Choose your genre ;
  • Create context ;
  • Follow the hero’s journey ;
  • Revise, revise, revise ;
  • Write the sequel .

Step 1: Choose Your Genre

Let’s forget about UX and digital products for a moment. Just think about your favorite story. Is it a murder mystery? Is it a sitcom? A romantic comedy? It’s probably not a murdery-mystery-romantic-comedy-sitcom-movie-newspaper-article. That’s because stories have genres.

Before beginning work on a product, it’s important to identify the genre. But where an author calls it a genre, in UX we might call it a “niche” or a “use case” . This is different from an industry — it’s not enough to be creating something “for healthcare” or “for finances.” Your product “genre” is the space in which it exists and can make a difference for the target audience.

One way to determine your product’s genres is to create an elevator pitch . The team at Asana suggests that the core of an elevator pitch is the problem, solution, and value proposition.

Another way to find the “genre” of your product is to fill in the blanks:

“We want to be the _____ of __________.”

Next, write a sentence or two explaining what that means to you. The key is specificity: the second blank should specifically describe what your organization does. This is your genre.

Here’s an example:

“We want to be the Amazon of find-a-doctor apps. That means we want to be known for offering personalized recommendations.” or “We want to be the Patagonia of ticket sales. We want people to know us for not only what we sell, but the ways that we care for the environment and the world.”

When my UX team worked on Sanofi’s Rheumatoid Arthritis (RA) Digital Companion , we took this approach to identify what features to include, and what a “digital companion” should do for someone with RA. We knew our audience needed a simple way to manage their RA symptoms, track their medication, and exercise their joints. But they also needed to feel supported.

Thus, the genre needed to reinforce that mentality . Internally, our UX team chose to focus on being “the Mary Poppins of medication adherence apps. That means we anticipate what the patient needs, we’re generally cheerful (though, not cheesy), and we focus on what works — not what’s expected.”

Step 2: Create Context

Step two is to add context to the experience. Context is everything that surrounds us. When I use an app I use it differently if I’m sitting at home giving it my full attention than if I’m at the grocery store. The noise, the visual stimuli, and the reason I’m logging in are all context. A UX designer also creates visual context by including headers at the top of screens or breadcrumbs to show someone on a website where they are in the grand scheme of things.

In Lisa Cron’s book Story Genius , she has a section called “What Kindergarten Got (And Still Gets) Very Very Wrong.” In it, Cron explains that too many people mistake a list of things that happen for an actual story . The difference is this idea of context: a good story is not just a sentence, but a descriptive sentence: the descriptors add the context.

To give a product context, it needs to be developed with an understanding of what the background of the audience is and the context in which they’ll be using the product. For UX, some of this comes from personas. But there’s more to it than that .

In storytelling, Cron believes the problem starts in kindergarten when students are given “What ifs” like these, which are used in a school in New Jersey:

What if Jane was walking along the beach and she found a bottle with a message in it? Write a story about what would happen next… What if Freddy woke up and discovered that there’s a castle in his backyard? He hears a strange sound coming from inside, and then… What if Martha walks into class and finds a great big sparkly box on her desk? She opens it and inside she finds…. […] The problem is, these surprises don’t lead anywhere, because they lack the essential element we were talking about earlier: context. […]Because so what if Freddy discovers a castle, or Martha finds a big box on her desk or Jane finds a message in a bottle? Unless we know why these things would matter to Freddy, Martha, or Jane, they’re just a bunch of unusual things that happen, even if they do break a well-known external pattern. Not only don’t they suggest an actual story, but they also don’t suggest anything at all, other than the reaction: Wow, that’s weird! — Lisa Cron, Story Genius

Cron suggests amending a “what if” to have a simple line providing context for the character. Joseph Campbell would call this “equilibrium” or “stability” in his well-known story structure, the Hero’s Journey (more on this in the next section ). Both Campbell and Cron are saying that an author must show what stability looks like before the hero receives their call to adventure (or “what if”).

For example:

  • What if Jane, who had been waiting for years to hear from her long-lost father, was walking along the beach and she found a bottle with a message in it? Write a story about what would happen next…
  • What if Freddy, who dreamed of adventure in his small town, woke up and discovered that there was a castle in his backyard? He hears a strange sound coming from inside, and then…
  • What if Martha, who believed she had no friends and hated school, walks into class and finds a great big sparkly box on her desk? She opens it and inside she finds…

For your product, context means going beyond the moment someone uses your product . The UX context includes the problem that someone has, what prompts them to find the product, and where they are when they use the product. Simply having a new tool or product won’t help someone to use it or feel connected to it.

Make sure to ask these questions instead:

  • Who is my audience?
  • Where do they spend their time?
  • What were they thinking, feeling, and doing before seeing my product?

These questions will start to create a context for use. For the RA Digital Companion, we began by creating a journey map to pinpoint all the things someone with RA experiences in their daily life . We sketched out the steps of the journey map on a storyboard, focusing on moments of pain, frustration, or concern. These became the areas where we thought our app could have the most impact.

For example, we wrote the story by starting with Grace (our person with RA) waking up in the morning, her hands already hurting. We hypothesized that she reaches for her phone first thing, maybe turning off the alarm on her phone. This became an opportunity to suggest a quick “game” on her phone which would challenge her to exercise her fingers . While we might have thought of the game without the journey map or storyboard, we also might have missed this opportunity to connect to a moment in Grace’s life.

Step 3: Follow The Hero’s Journey

As exciting as a story that goes on forever might seem, ultimately it would bore the audience. A good book — and a good product — has a flow that eventually ends. The author or UX team needs to know what that flow is and how to end the experience gracefully.

In his book, The Hero with a Thousand Faces , Joseph Campbell outlines 17 steps that make up a hero’s journey (a common template of storytelling). While the hero’s journey is very detailed, the overarching concept is applicable to UX design:

So, where does your story end? At what point will your product’s story reach its climax and successfully allow your end-user to be a hero? For a tax accounting software like Turbotax, the climax might be the moment that the taxes are filed. But the story isn’t over there; people need to track their refunders. Even though Turbotax doesn’t have that information in their product, they still help set expectations by creating infographics and other content that benefits their users as an “offboarding” process . In other words, where some products would leave users on their own as soon as they don’t physically need the product anymore, Turbotax offers materials to benefit users even when they’re done using the Turbotax product.

Designing for this type of offboarding is just as important as designing for onboarding. When someone uses TurboTax, they don’t want to feel harassed to come back to the app long after tax season is over. TurboTax is better off letting users stop using their product and return on their own when they need to. That’s how they keep their users happy .

When your design team identifies your offboarding point, you might try creating your user’s Hero Journey. One way to do this is to literally write a story about the user’s hero journey. Feel free to be silly, and position the user of your product as a knight in shining armor. Use the Hero’s Journey template to think about the emotional, mental, and physical state of the person using your product (remember your context from before!).

For example, let’s take a closer look at the well-known laundry detergent brand Tide and one of their commercials, “ Princess Dress ”:

We could break it down like this:

Important note : Notice where the product is used and where the user steps away from Tide and continues on with their life.

Ideally, with an app like the Digital Companion , a user could use our app for years. But there will be ebbs and flows. Building off our storyboard we created numerous vignettes for our user “Grace”.

When Grace needs to take her injection, we knew from user research she would be worried, uncertain, and even likely to skip the medication. Instead of seeing this as a static phase in her life, we imagined her on the “Road of Trials” in the Adventure of the Hero. This imagery became a part of the language we used to encourage users to overcome their fears and bravely give themselves their injections. Over time, as the app encouraged “Grace” to build a habit of taking and recording her injections, our app copy treated her like a conquering hero, moving through the Hero’s Journey to become a “Master of Two Worlds”.

Step 4: Revise, Revise, Revise

“Good writing is good editing,” so the saying goes. The same is true with UX. For an author, finishing the story is only the first step. They then work with an editor to get more feedback and make numerous revisions. In UX, we rely on user research , and instead of “revisions,” we have iterations. Usability testing, A/B testing, user research, and prototype testing are all ways to get feedback from the target audience.

But in UX we have a major advantage. Once a book is published, the feedback can’t be acted on. But digital products can be adapted and improved even after launch. Websites get redesigns, and apps get bug fixes.

For example, when healthcare.gov launched, it immediately crashed . Harvard Business School reported:

“The key issues discussed above resulted in the rollout of the healthcare.gov website ballooning the initial $93.7M budget to an ultimate cost of $1.7B. It is easy to observe that the launch of healthcare.gov was a major failure.”

Yet healthcare.gov didn’t fail. The website still exists, and in 2021 alone more than 2.5 million people gained health coverage during the special enrollment period , allowed by the website. A failed story is simply a failure. A failed product can be iterated on.

In some cases, even a physical product can be updated to succeed. Consider a product like the Garmin watch. Even within one year there are multiple designs and styles . Some are flops, and others are major successes. The product designers learn from the flops and improve on each watch style every few years.

Although the Digital Companion is no longer available on the app store, we did have multiple releases after the initial launch. Even before that first release came out, we had ideas about how to build on the product and expand its capabilities . For example, we were able to start desirability testing on having multiple “finger stretching” game options and A/B testing video instructions for taking injections. These concepts didn’t need to wait on results from our initial release — such is the way of UX work!

Step 5: Write The Sequel

Once a product is out in the world, it’s time for the sequel. Many great stories have excellent sequels. Sometimes it’s a planned sequel like adding a new beverage to the Starbucks line. Other times it’s more of an add-on based on demand or need. A good sequel either completes a planned series or builds off the previous story . Think of these like the Star Wars trilogies versus the movies labeled “a Star Wars story.” A trilogy is a planned storyline. A one-off film may be built on the previous story and add to the world.

But some sequels do a bad job of building on the original story. Specifically, they erase characters or facts. Many Game of Thrones fans, for example, were furious with the last few episodes of the series. They saw the episodes of ignoring a key character’s growth, ignoring the rest of the series to create a nice ending.

This can happen to products as well. The tobacco industry had to find a new story for the problem their product solved after the 1964 Surgeon General’s report labeled smoking a health risk. It wasn’t the sequel they had planned, but in the words of their fictional ad man Don Draper:

“If you don’t like what people are saying, change the conversation.” — Mad Men: Change the Conversation

As a result, they changed the product itself (adding filters to more cigarettes) as well as the advertising around it, to claim that filters were healthier and protected the smoker from tar and nicotine (they do not). And it worked!

According to an article in the medical journal BMJ Journals :

“The marketplace response was a continuation of smoking rates with a dramatic conversion from “regular” (short length, unfiltered) products to new product forms (filtered, king-sized, menthol, 100 mm).”

Each UX designer, UX writer, and engineer on the RA Digital Companion product has gone on to make our own sequels. What I learned from the RA Digital Companion — about user needs, rheumatoid arthritis, and behavior change — has played into my work, most recently at Verily . That product created a story to be shared with the end-user, but the sequels may affect health-tech as a whole.

Tell A Story And Connect

Ultimately, telling a story is how we connect to one another as humans. Whether you use Lisa Cron’s Storygenius , Joseph Campbell’s Hero with a Thousand Faces , or simply the mindset of Daniel Kahneman, you can use storytelling to adapt your product to your user’s needs and wants.

As a Forbes article stated back in 2018:

“As human beings, we’re often drawn to the narrative; in part, because our complex psychological makeup wires us for the sharing of information through storytelling and in part due to our natural curiosity.”

Products are no exception: a good user experience takes the form of a story . The IA feels familiar and gives context and flow. The product itself will fit into a user’s sense of their own life story, and users are drawn to that.

To tell a story, you need to focus on a genre or a type of product and audience. You need to build out a world or context for your audience. Limit your scope to where you can have the most impact, revise with user feedback, and then think about the sequels. All in all, storytelling is a powerful tool for any UX designer . It will help you to create your product and understand the people who use it.

Related Reading on Smashing Magazine

  • How To Design Powerful Narratives On Mobile
  • Once Upon A Time: Using Story Structure For Better Engagement
  • The Future Of Mobile Web Design: Video Game Design And Storytelling
  • Great Expectations: Using Story Principles To Anticipate What Your User Expects

Smashing Newsletter

Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use.

Front-End & UX Workshops, Online

With practical takeaways, live sessions, video recordings and a friendly Q&A.

TypeScript in 50 Lessons

Everything TypeScript, with code walkthroughs and examples. And other printed books.

Gulf Bank

The Art of UX Storytelling: Resonating With Users

Oleksandr Valius

Oleksandr Valius Head of Product Design

The Art of UX Storytelling: Resonating With Users - Qubstudio

Table of contents

What is storytelling in ux design, benefits of storytelling for user experience, how to make a good story.

  • Dan Harmon's Story Circle as a Storytelling Framework

The Working Backwards Method

Storyboarding workshop method, ux storytelling with qubstudio.

Have you ever used a product or service that felt like it truly understood you — your goals, views, and lifestyle? It’s an empowering feeling, isn’t it?

But connecting meaningfully with users’ diverse needs is no small feat. We each carry complex inner worlds, shaped by personal backgrounds, cultural trends, and historical events. Many companies don’t strive to comprehend these subtle differences and rely on broader assumptions instead.

So, how might you create experiences that resonate with users’ authentic experiences? The answer is thoughtful UX storytelling.

Why should UX research and storytelling go hand in hand, and how does this combination foster understanding between product creators and users?

And, most importantly, how can you use this approach to satisfy your customers and benefit your business?

Read on to learn more.

The essence of storytelling in UX boils down to creating narratives to understand users better and design products to meet their needs. It’s about seeing product design through the lens of users’ motivations and pain points. Stories enable us to connect on an emotional level. Products that share a similar narrative will foster the same sense of relatability.

storytelling ux

User personas are a powerful UX storytelling tool. Well-developed personas transform raw user research into engaging profiles that humanize target segments. These fictional-but-factual archetypes bring accuracy through background details of their context and unique wants.

Thus, with storytelling for user experience, you imagine the user as the key character in their own story. They may face rising tension and conflict in their quest for resolution. But what should that conflict be? Visualizing the arc of a target user can reveal this. Let’s explore a common example below.

Fintech products tend to be complex, with loads of data and tables. You could create a story about a person who misses the bygone days of laying out their budget with a few spreadsheets, which was much easier, although not that effective. Now, they feel overwhelmed navigating interfaces filled with information. Understanding this tension allows you to better understand the barriers facing your users and uncover opportunities to streamline their user experience.

With this arc in mind, you can then introduce a succinct fintech app’s microcopy , explaining the context and reasoning behind each screen. Or you can reveal information progressively instead of all at once.

Therefore, UX design storytelling relies on familiar narrative structures and, thus, allows for creating sticky user experiences.

Let’s explore the benefits of transforming a utility-driven UX into a matching design.

Slick interfaces and neat features are great. But they’re useless if they don’t resonate with users. Here’s how you can benefit from storytelling in UX design:

  • Guide unified decision-making. Stories keep the customer front and center in decision-making processes. From ideation and design to post-launch optimization, storytelling in UX reminds cross-functional teams of actual living target users with goals and obstacles that products and services must address. So, there’s less temptation to accidentally switch to technical feasibility.
  • Humanize complex data. The raw data from surveys, interviews, and analytics tools often fails to reveal underlying behaviors and motivations. UX storytelling transforms this complex quantitative and qualitative data into relatable stories about target users and brings those “aha moments” to the table.
  • Explore edge cases. Typical user personas concentrate on mainstream archetypes like “busy moms” or “working professionals.” But smaller niche segments still make up pieces of the total pie. Storytelling will allow you to cover all bases.
  • Increased trust and loyalty. Scientists have found that good stories release the hormone oxytocin , which promotes social bonding. When you approach your end users with empathy and deliver products that fully align with their needs, that forms a connection. Users will know they’re seen and listened to and will be coming back for more.
  • Enhanced team collaboration. Storytelling in UX design not only helps end users directly but also fosters teamwork. Product teams may struggle to balance design ambitions with development constraints. However, sharing real-life stories about users helps connect these differing perspectives.

Ultimately, well-crafted narratives will allow you to see real users’ preferences and struggles and offer them corresponding solutions. Now, let’s bring these benefits to life with UX storytelling tips and best practices.

When starting a new digital product design project, it’s best to lay the groundwork before putting on your writer’s hat and diving into a story.

storytelling process

  • A — Your starting conditions. Fully immerse yourself in understanding users’ current realities and business priorities. It’s necessary to uncover existing pain points across all audience groups and define their main goals.
  • B — How the final result should look. Equally crucial is envisioning the ideal future state that addresses the needs of both customers and the company. What emotional, cognitive, or behavioral shifts do you want to achieve?
  • The third element is the one that guides you from A to B, and this is a story. The story connects the initial user struggle to an eventual solution, bridging knowledge gaps and empowering people to address their needs with your product.

Aside from the basic tips outlined above, there are some comprehensive frameworks for your UX design storytelling.

Dan Harmon’s Story Circle as a Storytelling Framework

Joseph Campbell’s “Hero’s Journey” structure is one of the strong narrative frameworks that reveals common plot rhythms across myths and legends over centuries. Dan Harmon’s Story Circle model is a modern interpretation used extensively today. Let’s review this and more frameworks further.

circle for storytelling in ux design

Dan Harmon is a writer best known for creating the TV shows Community and Rick and Morty. One of Harmon’s most useful concepts for fellow writers is something called the Story Circle.

The idea is pretty simple: All good stories tend to follow a similar narrative arc. Harmon’s Story Circle captures that arc in a lean eight-step framework.

Let’s walk through those steps briefly and how they translate into user experience terms:

This step represents the users’ default state before encountering your product.

Possible questions to answer: Who is our user? What’s their background? What are their technical skills? What is their job?

Let’s take Dave as an example.

Dave is a young professional in his early career. Technical proficient. Works in a bottom-line position.

Next comes articulating the users’ conscious or subconscious desires for improvement. This sows the seed that the status quo may not fully meet evolving needs.

Possible questions to answer: What is their problem? Is the need big enough? Why is the need so big that our hero starts our adventure?

Dave works hard and is willing to prove he’s the best. Spending time cooking isn’t a priority, but he still needs to eat every day, and preferably, healthy food.

Now, users step outside their habitual comfort zones and engage with new approaches. In user experience terms, this may be finding, downloading, and opening an app.

Possible questions to answer: What is the starting point of the interaction? How does the user find the entry point? Do they require guidance? Do they need onboarding? What is the medium the user is working with? Do we speak the same language as the user?

Dave hears colleagues mention a new app, Eatr. The app offers meals from local restaurants with healthy, mouth-watering options. Dave decides to try it out. He opens the app, and the screen becomes filled with delicious offers for dinner. The interface is straightforward, so Dave starts browsing right away.

Much like a hero embarking on a quest for treasure in uncharted territory, users start looking for what they need using your solution.

Possible questions to answer: What is the actual user flow to reach the goal? How fast should they learn? What challenges are they facing?

Dave eagerly browses the app’s selection of salads, grain bowls, and other nutritious meals within his budget.

Foreign concepts start fulfilling previously unmet needs, i.e. users find what they need with the help of your solution.

Possible questions to answer: What is the final reward? Is that enough? Is that what the user was looking for? What is the shape of it? How is it represented? How do you deliver it?

Dave quickly finds a suitable meal from his favorite cafe.

At this stage, the user actually takes what they need. Your task here is to make this process as seamless as possible.

Possible questions to answer: What is the interaction cost? Are there any blockers along the road? Do we nudge the user nicely to finish the interaction? Do we thank our users enough for that? Was it an emotional revelation?

Dave places an order. Eatr offers intuitive checkout, so the process takes him a couple of taps. Dave presses “Confirm the order.” He receives a notification that his dinner is being prepared and will arrive in 25 minutes.

Users return to the familiar situation, i.e. complete the interaction.

Possible questions to answer: How does a user go back after the interaction is finished? What are the challenges abound the way? Do they have a shortcut? Do they understand the way to go back?

Nothing else Dave needs to do. Dave puts the phone aside and returns to what he was doing before. As the order is being prepared, he gets status updates, such as “Your order has been confirmed”, “Your order has started to be prepared ”, “Your order has been picked up”, and so on.

In user experience terms, change means that a user’s need has been addressed — that is, the initial state has changed. Your task is to communicate this change to the user properly and ensure that this change will linger (i.e. the user will continue using the solution).

Possible questions to answer: How has the system been changed? What is the new state? Has the need been addressed? How do we communicate the new state? What are visible changes a user sees? Are those changes permanent?

After Dave gets “Your courier is waiting for you”, he opens the door and the courier hands him the order. Once the order is completed, Dave receives a reward (20 tokens) for the order: 10 tokens are equal to a dollar, which Dave can use to order something for free. It turns out that eating healthy doesn’t require much time and a big budget. What’s more, the reward program makes the process fun.

The Story Circle provides a template for a user’s journey when adopting a new product.

By following these stages, from established routines to potential struggles associated with trying new tools, you can design products that truly match the user’s worldview and needs.

Furthermore, you can derive even more insights from your UX storytelling by mixing the Story Circle with the following frameworks.

Used by Amazon, Working Backwards flips the typical product development order — you start by defining the ideal end vision before jumping into requirements and execution.

Say you’re creating a new HR tech SaaS product. Instead of fixating on features, you focus first on creating a narrative arc of your potential user journey.

storytelling ux methods

Here are the steps:

  • Envision the end customer experience and market offering , summarizing them in a press release. You might outline how your HR tech product would delight users by making leave request approvals fast and transparent while reducing managers’ workloads.
  • Use the draft press release to evaluate whether this concept is worth further investment. You might assess the demand for automated leave management balanced against the cost of its development.
  • Research potential design solutions to deliver the customer experience outlined in the press release. Interview target users on solutions feasibility and refine based on feedback. You might consider creating simple one-click approval interfaces that allow managers to monitor employee requests and history.
  • With a validated concept, map out a high-level roadmap to deliver value incrementally. The initial phase might focus on employee self-service for common leave requests. The next phase could layer in manager approval workflows. The last phase may incorporate expanded HR analytics and customizations.
  • Break down the roadmap releases into actionable sprints.

Within this framework, team members sketch flow storyboards while discussing challenges. This method lets you identify the user journey’s logical gaps and opportunities earlier on when changing course is cheaper.

methods of storytelling in ux

Here are some tips to host effective UX storyboarding workshops:

  • Frame the task clearly around a priority user flow , such as onboarding, search, and purchase. Name a key persona. Offer a sentence summary like “First-time Etsy buyer finds handmade gifts.”
  • Brainstorm and sketch the rough story panels individually. Using pencils and sticky notes, quickly capture key moments that communicate the essence of the user’s emotional journey and key actions.
  • Pair up to share narratives. Discuss differences in sequence, assumptions, and questions that arise. Refine together — the diversity of perspectives leads to richer storyboarding.
  • In the wider group, present key details from your narrative and gather feedback. What resonates/surprises about the sequence? Where might users disconnect?
  • Reflect on what you’ve learned. Identify promising ideas and open questions to prototype later. Prioritize the most uncertain areas to explore first after the workshop.

By sketching narratives centered on critical user interactions, you can reveal a diversity of perspectives and ultimately connect planned experiences with user expectations.

Each framework has unique strengths that address different aspects of effective UX design. Dan Harmon’s Story Circle offers a fundamental narrative arc. The Working Backwards method puts the ideal user vision first before technical specifics. And collaborative storyboarding workshops uncover diverse insights early.

Our team of 75+ professionals has successfully served clients from various niches, including healthcare, EdTech, logistics, and more. We know that no two businesses are alike and that there are real people with struggles and desires behind every product.

That’s why we make UX storytelling central to our design process and dive deep to understand your customer’s needs and perspectives.

Creating digital products that resonate with users can be challenging. People have diverse perspectives shaped by individual life experiences. Furthermore, designers may carry their own biases that influence solution designs. This gap between team assumptions and user realities threatens project success.

Thoughtful UX storytelling bridges this gap. It provides frameworks for deeply understanding target users beyond simplistic personas. Combining UX research and storytelling allows you to immerse in users’ struggles and uncover the authentic emotional and practical needs waiting to be addressed.

Why is storytelling essential in UI/UX design?

UX storytelling allows designers to make a genuine connection with users. Rather than viewing target audiences as data points, storytelling encourages seeing them as complex individuals on personal journeys full of aspirations and obstacles. Understanding user needs and contexts helps build products that resonate long after the first use.

What are the elements of storytelling in UX?

Impactful UX design storytelling includes the user’s current state (their existing environments, habits, pain points); the ideal future state where users’ needs are fully addressed; user personas that humanize target segments; and frameworks like Harmon’s Story Circle to map narrative arcs.

Expert contributed this article:

Oleksandr - Head of Product Design

Head of Product Design

Recent Articles

Customer research as an essential part of digital transformation in financial services.

Daria Rolina

Daria Rolina Business Analyst

Open Banking and Customer Experience Unveiled: A Finance Revolution

Customer experience design: attracting and retaining customers in the financial sector.

Nadia

Nadia Chief Executive Officer

This site uses coookies to provide you with a great user experience. By browsing our website, you provide consent to our use of cookies.

The Complete Guide to UX Case Studies

Cassie Wilson

Updated: October 23, 2023

Published: August 21, 2023

Writing a UX case study can be overwhelming with the proper guidance. Designing for the user experience and writing about it in a case study is much more than writing content for a webpage. You may ask, “If my design speaks for itself, should I include a UX case study in my portfolio?”

person reviewing a ux case study on a laptop

Yes, you should include UX case studies in your portfolio. And here’s why.

Download Our Free UX Research & Testing Kit

You need to make your portfolio stand out among the crowd. A UX case study is a great way to do that. Let’s take a minute to define what a UX case study is and look at some examples.

Table of Contents

What is a UX case study?

The benefits of ux case studies, examples of ux case studies, tips for creating a ux case study.

UX portfolios are essential to showcasing UX designer skills and abilities. Every UX designer knows better designs bring better results. Sometimes, it’s easy to let the design speak for itself — after all, it is meant to engage the audience.

But, in doing that, you, as the designer, leave many things unsaid. For example, the initial problem, the need for the design in the first place, and your process for arriving at the design you created.

This is why you need to include UX case studies in your portfolio.

UX case studies tell a curated story or journey of your design. It explains the “who, what, when, where, and how” of your design. The text should be short and sweet but also walk the reader through the thinking behind the design and the outcome of it.

[Video: Creating a UX Case Study: Right and Wrong Way to Approach It]

There are many benefits to including UX case studies in your portfolio. Think of your UX portfolio as a well-decorated cake. The designs are the cake, and UX case studies are the icing on the cake— they will catch your audience's eye and seal the deal.

Take a look at the benefits of adding UX case studies to your portfolio.

UX Case Study Benefits Showcase skills and abilities. Explain your thinking. Highlight (solved) user issues. Define your personality.

Provide links.

Another thing to remember when writing a UX case study is to provide links when applicable. For example, if you have made improvements to a live app and wish to reference certain pages, like the homepage or a shopping cart, anchor keywords with a link to those pages.

By providing links, you are inviting the reader to interact with your app or website. This will give them a hands-on feel of what to expect from your UX designs.

Getting Started

UX case studies are an essential part of any portfolio. In fact, most companies or clients will ask to see a UX portfolio before deciding to work with you or your company. UX case studies highlight your skills and abilities better than any resume or CV. So stay ahead of the curve and start writing your UX case studies now.

ux templates

Don't forget to share this post!

Related articles.

Website Navigation: The Ultimate Guide [Types & Top Examples]

Website Navigation: The Ultimate Guide [Types & Top Examples]

What Is End-User Experience Monitoring? [+Tips For Implementing It]

What Is End-User Experience Monitoring? [+Tips For Implementing It]

What Is GUI? Graphical User Interfaces, Explained

What Is GUI? Graphical User Interfaces, Explained

Horizontal Scrolling in Web Design: How to Do It Well

Horizontal Scrolling in Web Design: How to Do It Well

UX Accessibility: Everything You Need to Know

UX Accessibility: Everything You Need to Know

Your Guide to Creating UX Problem Statements

Your Guide to Creating UX Problem Statements

UX Prototyping: Your Complete Guide

UX Prototyping: Your Complete Guide

The Chrome UX Report: How to Use It to Improve Your Website UX

The Chrome UX Report: How to Use It to Improve Your Website UX

Building Your First-Time User Experience: How to Get It Right

Building Your First-Time User Experience: How to Get It Right

Perfecting Your Digital UX Design — The Tips You Need to Know

Perfecting Your Digital UX Design — The Tips You Need to Know

3 templates for conducting user tests, summarizing UX research, and presenting findings.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

Visual storytelling for UI-UX design with examples

Visual storytelling for enhanced UX

Visual storytelling is a powerful tool in a designer’s arsenal. Let’s see how it affects users and how you can get started, along with some great examples

Web users are becoming impatient. There’s a lot of content on the internet nowadays. This makes it harder for businesses to stand out and leads to shorter attention spans in users. Merely providing a dry list of features that your website or product offers no longer cuts the mustard.

Start designing new products today. Enjoy unlimited projects!

cta download

People crave stories. But stories can be long as well, and as we’ve said, most users are pressed for time and have less patience. That’s where visual storytelling comes in. Ever hear the cliche a picture tells a thousand words? Visual storytelling is a powerful way of quickly resonating with your users.

The possible impact on your website’s UX from using visual storytelling is astronomical. It has the ability to turn your website into something relatable for the user and help it stand out from the rest of the competition.

In this post, I’m going to explore how visual storytelling affects people and why it’s such a successful method. I’ll also look at some techniques to get you started, along with some shining examples from across the web! Good storytelling and a powerful prototyping tool are allies you definitely want.

What is visual storytelling?

Why use visual storytelling in web ui design, the science behind visual storytelling, the human eye in website visual storytelling, techniques for visual storytelling, choosing your visual storytelling content, 5 great examples of visual storytelling in websites.

We see visual storytelling at play everyday in infographics, commercials and social media. But to nail down the idea for websites isn’t so straightforward. To some, the term “visual storytelling”, synonymous with “visual narrative”, might sound a little abstract and open to various interpretations, especially if we don’t know the industry context.

Visual storytelling and UX design - Justinmind

To truly understand how the concept relates to UI and UX design, it might help to identify and contrast it to what it is not.

Visual storytelling is not:

Visual storytelling is not a complete avoidance of words and text, nor is it a substitution of the former with imagery. It’s not a company or brand presenting the user with a list of facts about their product to rote-learn. It’s not about ricocheting cliches right left and center off the wall, telling the user everything they want to hear. And it’s not about fooling or lying to your users.

Visual storytelling - counter definition

Visual storytelling is:

Now let’s look at what visual storytelling for web design is. It’s a concept that became linked to UI design in the mid-noughties as a graphic way of telling the user when they visit your site what they need to hear, based on your user testing and research.

Visual storytelling - definition

You might need to help your users understand how your website, app or product helps them. Visual storytelling is a technique to help you achieve this in the easiest and most exciting way possible, as people relate better to stories. This can involve a combination of imagery, text, animation and video, using some or all of these elements. Ideally, you’ll incorporate visual storytelling in your designs early on, even at the low-fidelity prototype phase.

A quick example of visual storytelling

Imagine you’re in a food delivery company that wants to include visual storytelling on its homepage. The first consideration should be “what does the user need to hear?”

Let’s say Brendan, the athletic working dad, hasn’t got enough time between work, raising his kids and hitting the tennis court to cook, meaning he has to hang up the racket indefinitely. Your message might be that if he subscribes to your service, he can get healthy, customized meal plans delivered to his door everyday and resume his hobbies again.

Instead of including a paragraph that lists off everything your service has to offer Brendan, you could show a poignant video, or a timeline of images depicting how busy people’s lives improve after using your services.

The goal of visual storytelling

Whatever the purpose, visual storytelling should improve UX and leave your users with a resonating message – all in a visual way. It can be complex, or it can be simple (the latter is always best where possible). You can convey it all in one image or in a 20 second video. It should invoke emotion or stoke interest.

Visual storytelling - user emotions

That’s visual storytelling in a nutshell. Now let’s look at some of the benefits of using it!

Let’s look at how visual storytelling improves communication between your website or product and your users.

Brand and product communication

Walking users through the features of your product with a progressive story composed of imagery and text, or with a hero video that starts playing automatically as soon as they land on the home page can be an engaging way to reel users in.

It can help them understand your goal, message and product much better than giving them a boring list of features and technical specs. It’s also a wonderful opportunity to implement your brand’s character immediately – first impressions count!

Make data easier to understand

Think about the infographic trend, which is also a form of visual storytelling. This phenomenon has its roots in information design and its main goal is to present data in a compelling, visual way.

Visual storytelling - data

Converting data into an eye-friendly story helps the user assimilate and remember it in the future, humans being the visual creatures that they are.

Improves learnability

Imagine you want to dedicate a page or section of your website to helping a user get to grips with your product. Sure, you could present them with a list of boring instructions. Or, you could design a product walkthrough , perhaps even a comic book strip, cartoon or a video of a real person using the product.

If, like me, you have a burning need to understand why people are visual creatures , we need to take into account the sciency part. Let’s open up the typical human head and examine the hardware:

  • The human brain is fine-tuned for processing visual information, and dedicates 30% of the cortex to visual processing, compared with 8% for touch and 3% for hearing.
  • The brain can identify images after as little as 13 milliseconds, far less time than it takes us to recognize and interpret a verbal cue.
  • 65-80% of us learn better visually.
  • Humans remember pictures incredibly well. In fact, we can remember 2,000 pictures to 90% accuracy over several days.

Incredibly, it’s not just that our brains are receptive to images and other visual stimuli. Research has found that the visual cortex makes simple interpretive decisions on its own, without waiting for the ‘decision making’ part of the brain to kick in!

Visual storytelling - information processing in the human brain

But it’s not just images that humans retain well. There are a few people in the world who are notoriously good at remembering numbers, with one of them being Yanja Wintersoul. Yanja appeared in The Mind in Netflix’s Explained series and could remember a page full of random numbers in 10 minutes.

Our first conclusion might be that she is gifted with photographic vision, but as she points out herself, that isn’t the case. She converts each number 1 through 10 into a sound and creates words with those sounds, ergo turning the numbers into a story.

What does that tell you? That, in addition to being moved more by images, your average human is also much more likely to remember stories than a list of facts or numbers!

So how do we relate the above science to web design? One of the factors evident from most heatmaps is that users tend to scan and read in patterns. At least for speakers of left-to-right languages, those patterns are Z and F.

F and Z patterns - visual storytelling - Justinmind

In both patterns, the eye explores from left to right and then down the page, with occasional left-to-right horizontal scans. That’s why it’s important to structure your content and your visual storytelling in a way that matches how your users read.

Here are some tips for leveraging F and Z patterns in visual storytelling for UI-UX design:

  • Making sure text is in a central column or slightly left of center. This helps the eye find its way comfortably.
  • Keep text to a maximum of around 75 characters per line
  • Limiting line length can dramatically improve a reader’s level of comfort, encouraging them to stay on the page and read more.
  • For progressive storytelling, use a Z pattern, like on the Justinmind homepage
  • Break up text with images, headings and other elements

With that knowledge, let’s look at how you might go about creating a visual narrative for a web page (or entire website!).

Visual storytelling, like everything in UX design, is about making the user’s journey run as smoothly and delightfully as possible. However, it’s not always easy to know where and how to get started. Here are some techniques to point you in the right direction:

Decide on your storytelling medium

How will you display your visual narrative? Will it be with a hero video that plays automatically when a user lands on the homepage? Will it be a text-and-image narrative that you tease down the page? Once you decide how you want to tell your story, you then need to choose your content.

Mood boards

Mood boards can help you decide on theme and style. While they’re not a necessary step in the process, they can make it easier to design your visual narrative. Research who your main users will be, then design your visual storytelling around that user. One useful way of assimilating all the data gathered from your user research is to use user personas .

Visual storytelling- mood boards help define color scheme and subject matter

Image taken from Flickr

Once you’ve decided on all this, you’re ready to put together a mood board that solidifies your chosen theme and style.

A mood board will help you define the color scheme that will drive the emotional impact of your visual storytelling. It will also help you settle on the types of graphics and imagery you’ll use in your visual storytelling. While designing your visual narrative, keeping your mood board close by will help you stay on-theme and on-brand.

Storyboards

Storyboards are a useful way to demonstrate in diagram format the direction your story will go in. It’ll display the touch points or crucial moments where they’ll interact with your company or product.

A storyboard can also serve as an outline or roadmap for making animations and videos. However, that isn’t their only use; they can demonstrate the kinds of emotions the user should experience as they progress through at each point in the story. They are also particularly good for demonstrating interactive visual storytelling (more on that below).

In terms of visuals, there are a number of different places where you can acquire compelling imagery. They can be stock photos, videos and illustrations, or they can even be your own custom shots! The same is true for sourcing icons and graphics, you can choose from stock or you can design your own.

Wherever it is you source your content from, make sure it’s consistent. An image that’s out of place will disrupt the story and the user’s comprehension, ultimately compromising the message you want to transmit.

Hero videos

Think of your value proposition: what is your story in one sentence? A great example of this came from a website for a financial advisor, whose statement was “we bring loans across the finish line.”

Visual storytelling - hero videos

Images taken from Jaguar

Their video was simple, concise and to the point, showing a cyclist crossing the finish line of a race.

But just like animations, background videos with too much movement can distract a visitor from actually understanding the visual context.

Add interaction for bonus UX points

Don’t forget that stories can also be interactive! In fact, stories that incorporate input from the user can be a great way of keeping them engaged and attentive to your message. This can be as simple as adding a little microinteractions , such as scroll or mouse hover effects.

Nonetheless, be careful not to overdo it. The last thing you want to do is create a narrative that’s distracting from the main message or overwhelms the user. That runs contrary to what visual storytelling is about!

A great way to avoid this is to ask yourself whether an animation makes sense in a particular location – does it add to the context?

Use of Space

Content is important for visual storytelling. But guess what’s equally important? No content! Or rather, space. Many designers forget just how powerful a tool space is when it comes to simplifying content and rendering it more intuitive.

Zendesk Z pattern - visual storytelling - Justinmind

You can use space to your advantage to guide your users’ eyes from one section to another. Think about the F and Z patterns mentioned earlier. These patterns wouldn’t be possible without the space inbetween.

Visual Hierarchy

Most websites have a “homepage”, “about” page and “services offered” page. Consider these as different chapters in your story, and the most important ones for convincing a user to stay on your site and use your services.

For this reason, you should make sure that your main target user gets to see the content that most strikes a chord with them on these pages.

Background images

Large background images can bake some much-needed depth into your visual storytelling. They can convert an entire page into a story and set the tone immediately. They are also a powerful way of utilizing color.

Parallax scrolling

Consider using parallax effects to help the user unfold the story at their own pace, putting them in control. It also creates a sense of depth, allowing for multiple simultaneous effects. Parallax scrolling, when done right, has the power to engage your visitors, draw them in, immerse them and discover your message themselves in an awesome way.

Here are some inspiring examples of visual storytelling done right.

1. Highline: Poor millennials

This excellent longform article from Huffpost’s Highline combines great writing with an inventive form of visual storytelling to deliver a truly original experience.

Highline - Poor Millennials - visual storytelling - Justinmind

The visual narrative, tracking virtual millennial Becky on her quest to understand structural disadvantage, makes an 8000+ word article feel light and readable. All you have to do is scroll and read. Despite the subject matter, a truly delightful user experience.

2. Rule of Three agency

Copywriting Studio Rule of Three uses a mysterious, esoteric visual narrative to engage potential customers.

Rule of Three - visual storytelling - Justinmind

Navigating through layers of black and white imagery, with sparse yet punchy copy, Rule of Three’s site is even dominated by three overarching sections – Awareness, Affect and Action. The only disappointment is: there are four of them in the agency. Still, you can’t have everything.

3. Patagonia

Outdoor clothing and equipment label Patagonia builds its values into its value proposition from the very start.

Patagonia - visual storytelling - Justinmind

Socially and ecologically conscious, the brand uses eco-friendly messages as taglines to sell eco-friendly apparel. Clever, well-executed and right on.

4. Typeform

Conversational data collection experts Typeform use a light and breezy visual narrative to communicate beauty, versatility and ease of use.

Typeform - visual storytelling - Justinmind

The illustration style is organic, abstract and free flowing, encouraging the user to keep scrolling to find out more. Neat and fun.

5. FT: Uber Game

The Financial Times came up with a novel way of presenting journalistic research into the lives of Uber drivers – an interactive visual game.

FT Uber game - visual storytelling - Justinmind

The Uber game encourages readers to think about the decisions an Uber driver needs to make in their day-to-day, and consider the difficulties of this form of employment. Sensitive, to the point and enlightening.

Visual storytelling - the wrap up

When you’re taking your user experience to the next level, you’ll want to include visual storytelling. It’ll take a bit of imagination, a lot of creativity and a fair deal of honesty and empathy to get it right. But the results can be spectacular. There are few more effective ways of creating a lasting emotional memory in a user’s mind. So what are you waiting for? Start working on visual storytelling for your next project now!

PROTOTYPE · COMMUNICATE · VALIDATE

All-in-one prototyping tool for web and mobile apps, related content.

story telling in ux case study

  • Prototyping tools
  • UI Design tools
  • UX Design tools
  • Collaboration
  • Design Systems
  • All features
  • Mobile app design
  • VR & AR design
  • Requirements
  • All integrations
  • Import from Sketch
  • Start from Adobe
  • Wireframe tool
  • Mockup tool
  • Login to account
  • Download Justinmind
  • Help Center
  • Design templates
  • Customer Stories
  • Learn UX design
  • Brand Assets
  • Privacy Policy
  • Terms of use
  • Download Free

UX Case Study Guide

Adam Fard

Case studies can often feel like a hefty, impenetrable task. Where do you even start? Compressing, structuring, and organizing a few weeks or even months of work in a few hundred words can be quite challenging to many of us. 

Fortunately, creating one isn’t really that complicated once you’ve learned the basics—and this is precisely what this article is all about. 

Read on to learn about the purpose of a case study and how you should go about creating one. Also, we’ll take a closer look at some valuable tips to get you through your first case study that’ll safeguard you from the most common pitfalls. 

story telling in ux case study

UX Case Studies

Take a look at the UX case studies we've created.

Okay, so what are case studies?

Basically, a case study is an in-depth exploration of the decision-making of a person or group of people. The idea behind them is to document the subject’s actions in a particular setting and analyze their behavior and choices. 

When writing one, think of yourself as a protagonist in a story or novel. While this may sound somewhat pompous to some, it’s actually a helpful approach to take when creating a case study, and there are a couple of reasons for that. 

First off, the point of a case study is to present your thought process and reasoning skills within your field of expertise. While most projects are undoubtedly different, they all have relatively similar phases they go through—the same goes for the types of decisions you make throughout these phases. Being descriptive and analytical about the types of issues you’ve faced as a designer and the solutions you’ve come across is an awesome way of showcasing your skills. 

Secondly, storytelling is an extremely powerful persuasion tool—and there’s an extensive body of research to support these claims. People are passionate about stories. We empathize with the characters in the novels we read and the movies we see, to a point where we can drop an occasional tear once in a while. We’ve never seen or known these people, but we still happen to care. 

Well, this is all fine and dandy, but why even create a case study in the first place? 

What might you need them for?

Case studies are a great way of outlining your qualities as a designer and decision-maker. However, these documents can take a wide array of shapes and sizes.  

Designers will often create case studies to showcase their creativity, analytical skills, quantitative reasoning skills, and communication skills during job interviews. 

On the other hand, design firms or agencies typically create them to highlight the quality of the services delivered and the impact that they had on the client’s bottom line, market share, or overall success. 

What does a UX case study include?

Before discussing structure, we’d like to mention that when working on the first of your case study, don’t focus on length too much. Later, you’ll have the opportunity to trim things down with some visual support. But for now, be as descriptive as you can be with the information that’s relevant to your input in the project at hand. Alright, let’s talk about structure.  

1. Outline the task at hand

The purpose of the outline is to provide your reader with a “big picture” understanding of the project. Typically, this section should be fairly brief—think of it as a really quick onboarding.

Here’s a fictitious example: 

Project title: Headspace App Redesign

Problem: The Headspace app is continuously losing engagement from its users. Their main areas of concern are:

High uninstall rates

Dwindling MAU

Solution: Rethink Headspace’s content strategy. Design better push notifications. Gamify the experience to create long-lasting meditation streaks.

2. Highlight your role and the process 

This section gives you the chance to expand on how you or your team has planned on delivering the solutions outlined above and what your personal contribution was in the grand scheme of things. 

For instance, you can state that your responsibilities on this project predominantly revolved around interaction design and visual design.  

Then, you can follow it up with a process outline that allows you to highlight the quality of your decision-making. Ideally, the process should abide by modern industry standards. 

3. Expand on the outcomes

It’s always a great idea to focus on hard numbers when speaking about outcomes. Of course, the quality of your design will play a significant role in how your work will be appreciated, but at the same time, the people reviewing your case studies are organizations or clients that need solid results. The more specific you can get about the impact your design has had on the clients’ bottom line, the better. 

Here are a few examples of outcomes that we’ve presented in some of our case studies: 

78% increase in conversion rates. Thanks to better usability, the schools are a lot more likely to upgrade their trial accounts and become paying customers.

4x increase in perceived value. Good-looking apps look more trustworthy and valuable, which is why we’ve invested our time in creating a modern and sleek interface.

Acquisition of new clients. Based on new tailored features and interactive prototypes, we helped acquire big Governmental and Corporate clients.

Reduced costs by 3x: Increased developers’ efficiency and reduced costs by having a user-centered design approach.

It’s always best to focus on actual numbers rather than arbitrary improvements. Your viewpoint as a designer is quite different from a client who probably has a different background and different goals in mind. By sticking with hard numbers, you’ll be able to accentuate the objective value your team or yourself can produce. 

Tips for writing a great case study

On the surface, writing a case study may appear simple. I mean, a project outline, the process, and the outcome—nothing complicated there. That’s only partly true. The hard part is creating an impactful and engaging case study. Below, you’ll find some useful recommendations to make your project overview captivating and legible. 

Storytelling

We mentioned storytelling above, and we’re going to do it again. Yes, storytelling is an incredibly overlooked part of creating a case study. Your goal here is to be descriptive—you want to get your readers to empathize with you. You want them to feel what you felt at the beginning of the project. Don’t hesitate to create some dramatic tension where you can (but don’t go overboard). 

Clear structure

Given that you don’t get too excited with the dramatic tension, you should think of a very clear and easy-to-scan structure for your case study. The person reading it should have a clear understanding of what section they’re reading at all times. 

Use bullet points where you can. They help organize the text, make the information much more accessible , and provide your case study with clear information architecture. 

Avoid large blocks of text

This is critical. There’s nothing more dissuading than a wall of text with no paragraphs. You’ve probably been there as well, reading something mildly interesting where you see a 20-line paragraph, thinking to yourself “Nah.”

Typically, it’s a good idea to keep your paragraphs up to 5 lines in length, but in a case study, it’s reasonable to even go with less. 

Add visuals where you can

Remember the wall of text we mentioned above? That applies to content that doesn’t have visual support as well. There are many reasons why you’d want to include some images in your case study, but the most important ones are:

After all, this is a highlight of your design skills;

You’re providing visual support to your storytelling, making it more compelling and captivating;

You make the text much more accessible by watering down all that text with some media while allows the eyes to rest a bit; 

Pet projects work too

Case studies don’t necessarily have to be about “Headspace-tier” redesigns. Feel free to write one about a pet project of yours—the most important part here is highlighting your thought process between a problem and a solution. 

Even if you can’t code, you can still showcase, come up with an idea, validate it, and come up with a UX solution. These ideas or problems don’t have to be anything too drastic either. We would suggest picking a struggle that you yourself are dealing with so that you have some insight into it right off the bat.

Seek inspiration

Check out the links below for inspiration:

https://growth.design/

https://adamfard.com/ux-project

The bottom line

By following the steps above, you’ll be able to knock out an awesome case study while also avoiding the most common pitfalls first-timers face. However, bear in mind that case studies have a wide array of purposes, and you should always adjust them to your particular needs.

Don't forget to share this post:

Want to improve your App?

We help you to resolve Usability, Retention Rate and Conversion issues:

Related Stories

Generate Wireframes in Figma with UX Pilot AI

Generate Wireframes in Figma with UX Pilot AI

Discover how UX Pilot AI transforms simple text prompts into detailed Figma wireframes in seconds. Tired of the endless sketching and revisions? See how UX Pilot's unique approach allows unlimited creative freedom, perfectly aligning with any design vision.

Generate UI designs in Figma with AI

Generate UI designs in Figma with AI

A step-by-step process to turn a simple text prompt into a hi-fi design in a matter of seconds, using AI

Does UI Design Matter? An Essential Guide for UX Designers

Is UI design the key to user engagement? Discover what experts have to say and case studies in this essential guide. Master the balance between aesthetics and functionality to improve user experience and elevate your design projects. Perfect for UX designers looking to innovate.

Exclusive UX Articles & Strategies

for Startups, UX Designers & Entrepreneurs

Get a free custom homepage design for your new website.

Design, UI, UX , Inspiration

15 excellent ux case studies every creative should read.

  • By Sandra Boicheva
  • October 21st, 2021

In a previous article, we talked about UX portfolios and how they carefully craft a story of how designers work. Interestingly enough, recruiters decide if a UX freelance designer or an agency is a good match within 5 minutes into the portfolio . In order to persuade these recruiters, the portfolio needs to present an appealing story that showcases the skill, the thought process, and the choices taken for key parts of the designs. With this in mind, today we’ll talk about UX case studies and give 15 excellent examples of case studies with compelling stories.

The Storytelling Approach in UX Case Studies

An essential part of the portfolio of a UX designer is the case studies that pack a showcase of the designer’s skills, way of thinking, insights in the form of compelling stories. These case studies are often the selling point as recruiters look for freelancers and agencies who can communicate their ideas through design and explain themselves in a clear and appealing way. So how does this work?

Photography by Alvaro Reyes

Just like with every other story, UX case studies also start with an introduction, have a middle, and end with a conclusion .

  • Introduction: This UX case study example starts with a design brief and presents the main challenges and requirements. In short, the UX designer presents the problem, their solution, and their role.
  • Middle: The actual story of the case study example explains the design process and the techniques used. This usually starts with obstacles, design thinking, research, and unexpected challenges. All these elements lead to the best part of the story: the action part. It is where the story unveils the designer’s insights, ideas, choices, testing, and decisions.
  • Conclusion: The final reveal shows the results and gives space for reflection where the designer explains what they’ve learned, and what they’ve achieved.

Now as we gave you the introduction, let’s get to the main storyline and enjoy 15 UX case studies that tell a compelling story.

1. Car Dealer Website for Mercedes-Benz Ukraine by Fulcrum

This case study is a pure pleasure to read. It’s well-structured, easy to read, and still features all the relevant information one needs to understand the project. As the previous client’s website was based on the official Mercedes Benz template, Fulcrum had to develop an appealing and functional website that would require less time to maintain, be more user-friendly, and increase user trust.

  • Intro: Starts with a summary of the task.
  • Problem: Lists the reasons why the website needs a redesign.
  • Project Goals: Lists the 4 main goals with quick summaries.
  • Project: Showcases different elements of the website with desktop and mobile comparison.
  • Functionality: Explains how the website functionality helps clients to find, and order spare parts within minutes.
  • Admin Panel: Lists how the new admin panel helps the client customize without external help.
  • Elements: Grid, fonts, colors.
  • Tech Stack: Shows the tools used for the backend, mobile, admin panel, and cloud.
  • Client review: The case study ends with a 5-star review by the marketing director of Mercedes Benz Ukraine, Olga Belova.

This case study is an example of a detailed but easy to scan and read story from top to bottom, featuring all relevant information and ending on the highest note: the client’s review.

Advertisement

2. Galaxy Z Flips 5G Website by DFY

This is a big project that covers every aspect of the website, including the UX strategy. The creative studio aimed to fully illustrate and demonstrate the significant upgrades over previous models and to enable two-way communication with the customers through an interactive experience.

  • Intro: Summary of the project and roles.
  • Interactive Experience: The main project goal.
  • Demonstration: Explains the decision to feature 360-degree views and hands-on videos instead of technical terms.
  • Screens: Includes high-quality screenshots of significant pages and features.
  • Ecosystem: Highlight a page with easy navigation across different products as a marketing decision that makes cross-selling seamless.
  • Essentials: Showcases a slider of all products with key features that provide ample information.
  • Showroom: Interactive experience that helps the user “play around” with the product.
  • Credits: As a conclusion, DFY features the stakeholders involved.

A strong presentation of a very ambitious project. It keeps the case study visual while still providing enough insight into the thought process and the most important decisions.

3. Jambb Social Platform by Finna Wang

Here we have a beautiful case study for a platform that aims to help creators grow their communities by recognizing and rewarding their base of supporters. It tackles a curious problem that 99% of fans who contribute in non-monetary ways don’t get the same content, access, and recognition they deserve. This means the creators need a way to identify their fans across all social platforms to grow their business and give recognition. To get a clear picture of what the design has to accomplish, Finna Wang conducted stakeholder interviews with the majority of the client’s team.

  • Intro: Listing roles, dates, team, and used tools.
  • Project Overview: The main concept and the reasons behind it.
  • Exploration: What problem will the platform solve, preliminary research, and conclusions from the research.  The section includes the project scope and problem statement.
  • Design Process: A thorough explanation of the discoveries and the exact steps.
  • User Flows:  3 user flows based on common tasks that the target user/fan would do on the site.
  • Design Studio: Visualization process with wireframes, sitemap, prototypes.
  • Design Iterations: The designer highlights the iterations they were primary behind.
  • Style Guide: Typography, colors, visual elements breakdown.
  • Usability Testing: Beta site vs Figma prototype; usertesting.com, revised problem statement.
  • Prototype: Features an accessible high fidelity prototype in Figma you can view.
  • Takeaways: Conclusions.

An extremely detailed professionally made and well-structured UX case study. It goes a step further by listing specific conclusions from the conducted research and featuring an accessible Figma prototype.

4. Memento Media by Masha Keyhani

This case study is dedicated to a very interesting project for saving family stories. It aims to help users capture and record memories from their past. To do so, the design team performed user research and competitive analysis. The entire project took a 6-week sprint.

  • Overview: Introducing the client and the purpose of the app.
  • My Role: Explaining the roles of the designer and their team.
  • Design Process: A brief introduction of the design process and the design toolkit
  • Home: The purpose of the Homepage and the thought process behind it.
  • Question Selection: The decision behind this screen.
  • Recording Process: Building the recording feature and the decisions behind it.
  • User research: a thorough guide with the main focuses, strategies, and competitor analysts, including interviews.
  • Research Objectives: The designer gives the intent of their research, the demographics, synthesis, and usability testing insights.
  • Propositions: Challenges and solutions
  • User Flow: Altering the user flow based on testing and feedback.
  • Wireframes: Sketches, Lo-Fi wireframing.
  • Design System: Typography, colors, iconography, design elements.
  • The Prototype: It shows a preview of the final screens.

This UX study case is very valuable for the insights it presents. The design features a detailed explanation of the thinking process, the research phase, analysts, and testing which could help other creatives take some good advice from it for their future research.

5. Perfect Recipes App by Tubik

Here we have a UX case study for designing a simple mobile app for cooking, recipes, and food shopping. It aims to step away from traditional recipe apps by creating something more universal for users who love cooking with extended functionality. The best idea behind it is finding recipes based on what supplies the user currently has at home.

  • Intro: Introducing the concept and the team behind it.
  •  Project: What they wanted to make and what features would make the app different than the competitors.
  • UI design: The decisions behind the design.
  • Personalization: Explaining how the app gives the user room for personalization and customizing the features according to their personal preferences.
  • Recipe Cards and Engaging Photos: The decisions behind the visuals.
  • Cook Now feature: Explaining the feature.
  • Shopping List: Explaining the feature.
  • Pantry feature:  The idea to sync up the app with AmazonGo services. This case study section features a video.
  • Bottom Line: What the team learned.

This UX case study is a good example of how to present your concept if you have your own idea for an app. You could also check the interactive preview of the app here .

6. SAM App by Mike Wilson

The client is the Seattle Art Museum while the challenge is to provide engaging multimedia content for users as well as self-guided tours. Mile Wilson has to create an experience that will encourage repeat visits and increase events and exhibition attendance.

  • Intro: Listing time for the project, team members, and roles.
  • The Client: A brief introduction of Seattle Art Museum
  • The Challenge: What the app needs to accomplish.
  • Research and Planning: Explaining the process for gathering insights, distributing surveys, interviews, and identifying specific ways to streamline the museum experience.
  • Sloane: Creating the primary persona. This includes age, bio, goals, skills, and frustrations.
  • Designing the Solution: Here the case study features the results of their research, information architecture, user flows, early sketching, paper prototypes, and wireframes.
  • Conclusion: Explaining the outcome, what the team would have done differently, what’s next, and the key takeaways.

What we can take as a valuable insight aside from the detailed research analysis, is the structure of the conclusion. Usually, most case studies give the outcome and preview screens. However, here we have a showcase of what the designer has learned from the project, what they would do differently, and how they can improve from the experience.

7. Elmenus Case Study

This is a case study by UX designers Marwa Kamaleldin, Mario Maged, Nehal Nehad, and Abanoub Yacoub for redesigning a platform with over 6K restaurants. It aims to help users on the territory of Egypt to find delivery and dine-out restaurants.

  • Overview: What is the platform, why the platform is getting redesigned, what is the target audience. This section also includes the 6 steps of the team’s design process.
  • User Journey Map: A scheme of user scenarios and expectations with all phases and actions.
  • Heuristic Evaluation: Principles, issues, recommendations, and severity of the issues of the old design.
  • First Usability Testing: Goals, audience, and tasks with new user scenarios and actions based on the heuristic evaluation. It features a smaller section that lists the most severe issues from usability for the old design.
  • Business Strategy: A comprehensive scheme that links problems, objectives, customer segment, measurements of success, and KPIs.
  • Solutions: Ideas to solve all 4 issues.
  • Wireframes: 4 directions of wireframes.
  • Styleguide: Colors, fonts, typeface, components, iconography, spacing method.
  • Design: Screens of the different screens and interactions.
  • Second Usability Testing: Updated personas, scenarios, and goals. The section also features before-and-after screenshots.
  • Outcome: Did the team solve the problem or not.

A highly visual and perfectly structured plan and process for redesigning a website. The case study shows how the team discovers the issues with the old design and what decisions they made to fix these issues.

8. LinkedIn Recruiter Tool by Evelynma

A fresh weekend project exploring the recruiting space of LinkedIn to find a way to help make it easier for recruiters to connect with ideal candidates.

  • Background Info: What made the designer do the project.
  • Problem and Solution: A good analysis of the problem followed by the designer’s solution.
  • Process: This section includes an analysis of interviewing 7 passive candidates, 1 active candidate, 3 recruiters, and 1 hiring manager. The designer also includes their journey map of the recruiting experience, a sketch of creating personas, and the final 3 personas.
  • Storyboard and User Flow Diagrams: The winning scenario for Laura’s persona and user flow diagram.
  • Sketches and Paper Prototypes: Sticky notes for paper prototypes for the mobile experience.
  • Visual Design: Web and mobile final design following the original LinkedIn pattern.
  • Outcome: Explaining the opportunity.

This is an excellent UX case study when it comes to personal UX design projects. creating a solution to a client’s problem aside, personal project concepts is definitely something future recruiters would love to see as it showcases the creativity of the designers even further.

9. Turbofan Engine Diagnostics by Havana Nguyen

The UX designer and their team had to redesign some legacy diagnostics software to modernize the software, facilitate data transfers from new hardware, and improve usability. They built the desktop and mobile app for iOS and Android.

  • Problem: The case study explain the main problem and what the team had to do to solve it.
  • My Role: As a lead UX designer on a complicated 18-month project, Havana Nguyen had a lot of work to do, summarized in a list of 5 main tasks.
  • Unique Challenges: This section includes 4 main challenges that made the project so complex. ( Btw, there’s a photo of sketched wireframes literally written on the wall.)
  • My Process: The section includes a description of the UX design process highlighted into 5 comprehensive points.
  • Final Thoughts: What the designer has learned for 18 months.

The most impressive thing about this case study is that it manages to summarize and explain well an extremely complex project. There are no prototypes and app screens since it’s an exclusive app for the clients to use.

10. Databox by FireArt

A very interesting project for Firearts’s team to solve the real AL & ML challenges across a variety of different industries. The Databox project is about building scalable data pipeline infrastructure & deploy machine learning and artificial intelligence models.

  • Overview: The introduction of the case study narrows down the project goal, the great challenge ahead, and the solution.
  • How We Start: The necessary phases of the design process to get an understanding of a product.
  • User Flow: The entire scheme from the entry point through a set of steps towards the final action of the product.
  • Wireframes: A small selection of wireframe previews after testing different scenarios.
  • Styleguide: Typography, colors, components.
  • Visual Design: Screenshots in light and dark mode.

A short visual case study that summarizes the huge amount of work into a few sections.

11. Travel and Training by Nikitin Team

Here’s another short and sweet case study for an app with a complete and up-to-date directory of fitness organizations in detailed maps of world cities.

  • Overview: Explaining the project.
  • Map Screen : Outlining the search feature by categories.
  • Profiles: Profile customization section.
  • Fitness Clubs: Explaining the feature.
  • Icons: A preview of the icons for the app.
  • App in Action: A video of the user experience.

This case study has fewer sections, however, it’s very easy to read and comprehend.

12. Carna by Ozmo

Ozmo provides a highly visual case study for a mobile application and passing various complexities of courses. The main goal for the UX designer is to develop a design and recognizable visual corporate identity with elaborate illustrations.

  • Intro: A visual project preview with a brief description of the goal and role.
  • Identity: Colors, fonts, and logo.
  • Wireframes: The thinking process.
  • Interactions: Showcase of the main interactions with animated visuals.
  • Conclusion: Preview of the final screens.

The case study is short and highly visual, easy to scan and comprehend. Even without enough insight and text copy, we can clearly understand the thought process behind and what the designer was working to accomplish.

13. An Approach to Digitization in Education by Moritz Oesterlau

This case study is for an online platform for challenge-based learning. The designer’s role was to create an entire product design from research to conception, visualization, and testing. It’s a very in-depth UX case study extremely valuable for creatives in terms of how to structure the works in their portfolio.

  • Intro: Introducing the client, project time, sector, and the designer’s role.
  • Competitive Analysis: the case study starts off with the process of creating competitive profiles. It explains the opportunities and challenges of e-learning that were taken into consideration.
  • Interviews and Surveys: Listing the goals of these surveys as well as the valuable insights they found.
  • Building Empathy: The process and defining the three target profiles and how will the project cater to their needs. This section includes a PDF of the user personas.
  • Structure of the Course Curriculum: Again with the attached PDF files, you can see the schemes of the task model and customer experience map.
  • Information Architecture: The defined and evaluated sitemap for TINIA
  • Wireframing, Prototyping, and Usability Testing :  An exploration of the work process with paper and clickable prototypes.
  • Visual Design: Styleguide preview and detailed PDF.
  • A/B and Click Tests: Reviewing the usability assumptions.
  • Conclusion: A detailed reflection about the importance of the project, what the designer learned, and what the outcome was.

This is a very important case study and there’s a lot to take from it. First, the project was too ambitious and the goal was too big and vague. Although the result is rather an approximation and, above all, at the conceptual level requires further work, the case study is incredibly insightful, informative, and insightful.

14. In-class Review Game by Elizabeth Lin

This project was never realized but the case study remains and it’s worth checking out. Elizabeth Lin takes on how to create an engaging in-class review game with a lot of research, brainstorming, and a well-structured detailed process.

  • Intro: What makes the project special.
  • Research: Explaining how they approached the research and what they’ve learned.
  • Brainstorming: the process and narrowing all How Might We questions to one final question: How might we create an engaging in-class math review game.
  • Game Loop and Storyboarding: Sketch of the core game loop and the general flow of the game.
  • Prototyping: Outlining basic game mechanics and rounds in detail.
  • Future Explorations: The case study goes further with explorations showing how the product could look if we expanded upon the idea even further.
  • What Happened?:  The outcome of the project.

This case study tells the story of the project in detail and expands on it with great ideas for future development.

15. Virtual Makeup Studio by Zara Dei

And for our last example, this is a case study that tells the story of an app-free shippable makeover experience integrated with the Covergirl website. The team has to find a way to improve conversion by supporting customers in their purchase decisions as well as to increase basket size by encouraging them to buy complementary products.

  • Intro: Introducing the project and the main challenges.
  • Discovery and Research: Using existing product information on the website to improve the experience.
  • Onboarding and Perceived Performance: Avoiding compatibility issues and the barrier of a user having to download an app. The section explains the ideas for features that will keep users engaged, such as a camera with face scan animation.
  • Fallback Experience and Error States: Providing clear error messaging along with troubleshooting instructions.
  • Interactions: explaining the main interactions and the decisions behind them.
  • Shared Design Language: Explaining the decision to provide links on each product page so users could be directed to their preferred retailer to place their order. Including recommended products to provide users with alternatives.
  • Outcome and Learning: The good ending.
  • Project Information: Listing all stakeholders, the UX designer’s role in a bullet list, and design tools.

In Conclusion

These were the 15 UX case studies we wanted to share with you as they all tell their story differently. If we can take something valuable about what are the best practices for making an outstanding case study, it will be something like this.

Just like with literature, storytelling isn’t a blueprint: you can write short stories, long in-depth analyses, or create a visual novel to show your story rather than tell. The detailed in-depth UX case studies with lots of insights aren’t superior to the shorter visual ones or vice versa. What’s important is for a case study to give a comprehensive view of the process, challenges, decisions, and design thinking behind the completed project .

In conclusion, a UX case study should always include a summary; the challenges; the personas; roles and responsibilities; the process; as well as the outcomes, and lessons learned.

Video Recap

Take a look at the special video we’ve made to visualize and discuss the most interesting and creative ideas implemented in the case studies.

YouTube video player

In the meantime, why not browse through some more related insights on web development and web design?

  • The 30 Best UX Books Every Creative Should Read in 2022
  • Great UI Animation Examples to Make Your Jaw Drop [+Tips and Freebies]
  • 60 Superb App Design Inspiration Examples

Popular Posts

  • 20 UI/UX Design Trends that will Rock 2023 [Updated]
  • Best 15 UI Color Palette & Scheme Generators for the Perfect Interface Design
  • 10 Golden UI Design Principles and How To Use Them
  • GET A QUICK QUOTE

Subscribe for our newsletter

We hate boring. Our newsletters are relevant and on point.  Excited? Let’s do this!

Person with a sword and fire-breathing dragon face each other atop open book held in two hands.

The Art of Storytelling for Case Studies

These tips will make your UX portfolio easier to write — and easier to read.

I love a good story. The anticipation. The buildup of conflict. The climax and the payoff. As you experience the journey through the hero’s eyes, you might be left laughing, crying, or nodding your head in agreement. Stories are a vibrant way to share our life experiences.

Stories can be hard to tell when you’re writing about your work, though. Chatting with coworkers or venting to your partner in choppy anecdotes after a long day might feel easy. It’s much harder to tell a polished story when you’re looking for that next big opportunity or sharing it with an audience of your peers in a formal presentation. 

That’s right, I’m talking about case studies.

Many people don’t connect writing a case study with writing a story. The words sound so dry and clinical in comparison to the warm embrace of story . A case study is decidedly not cozy, and the subject matter is usually dry. It screams, “Take me seriously!”

But I’m a believer in looking at a case study like a story, especially when it comes to UX disciplines. A good story needs a plot, characters, and a conflict (user pain-points, anyone?) It also requires a beginning, a middle, and an end. When the storyteller leaves these things out, it’s harder for the reader (the hiring manager) to follow along. It’s difficult to understand where the project started, why it happened in the first place, and what the outcome was.

I’m no expert at this, nor am I a career advisor, so there’s no guarantee this advice will get you a job interview or offer. But I find a lot of joy in writing case studies and helping others write theirs. The basic structure of UX design, UX writing and content strategy, and UX research case studies have important elements in common and all follow the same general path. 

I’ll share some of the ways I lead the audience through a journey while highlighting all that I accomplished along the way.

Structuring a Case Study

In the past, I found reviewing, outlining, and writing case studies to be intimidating and exhausting. So I came up with a process to carefully craft a case study, make it less painful, and reach the same goal. I start by outlining three main points:

  • The background
  • The process
  • The outcome

The Background

The story needs to start somewhere. Introducing the main characters and the plot helps set the stage for the reader and gives them a reason to care. In the initial phases of writing a case study, I like to answer these questions:

  • If it was your company, take a sentence or two to explain the business or the product team you were working with.
  • If it was a freelance project, talk about why you were approached with the project.
  • Who was the target-user? What pain points did they face? Why was this a problem? How did it specifically impact the users?
  • What is the elevator-pitch summary of your contribution to this project? Were you on a team with multidisciplinary partners? Or part of a tiny multiple-hat wearing startup? You’ll be going into depth about how you solved the problem later on, so give just a teaser.

Often, my first draft isn’t made of concrete paragraphs. I simply get the information out of my brain and into a document. In early stages of writing, these questions help me frame the problem in a way that clearly highlights my contributions to the solution. 

The Process

This is where you’ll spend the most time crafting your story. Whether you’re writing a case study to share as a presentation or adding it to your portfolio, the audience is most interested in how you got to the outcome and which parts of the process were your responsibility. I list out the most important pieces by answering these questions:

  • Did you have to do research? Was there a competitive analysis or heuristic evaluation involved? What data put this into motion, and what did you do with it? What steps did you take to educate yourself about the problem and the users?
  • Which parts of the process were done solo, and which were done in collaboration with cross-functional partners? When were the stakeholders involved? How many iterations did it take to make it to the solution? Did you run brainstorming sessions or design studios along the way? Was there A/B or usability testing done in tandem? Write down as many steps as you can remember. You can edit later.
  • The audience is always interested in what’s behind the curtain. What design deliverables can you share? Low-fidelity wireframes, prototypes, rough drafts of scripts, process maps, personas? Help the audience understand how you think. Nothing goes from A to Z without a mess in the middle. We’ve all seen enough squiggly line graphs to know that design is not a pretty process.

A woman announces a project plan, struggles through many different paths, and finally finds her way to the end.

The Outcome

The outcome section is the grand finale of your case study. It explains why the project kicked off in the first place, what happened after, what next steps the team took, and what you learned.

Not every case study needs a happy ending. I’ve worked for months on a project, only to hear “shut it down!” in the end. This doesn’t mean the work is useless or that you can’t include it in your portfolio.  We learn most from our failures, and openly sharing those shows we’re constantly trying to improve our process and understand the market better. Regardless of how the project resolved, a good outcome section answers questions like:

  • This is a great place to show off the shiny final designs. After the climax comes the triumphant ending where the heroes (you and your team) can celebrate a job well done. This is what everything has been building toward: the resolution of conflict, whether it’s triumphant or tragic.
  • Here, it’s easy to show off metrics that improved as a result of your work. Tangible quantitative results make a strong conclusion to any story, but they aren’t necessary if they don’t exist. You can reframe to express impact in a variety of ways.
  • Describe the next steps your team took or planned. Did you change a broken flow or process that the team ended up adopting? Did this project lead to another initiative? Or did it result in a post-mortem retrospective full of learnings that the team can use  in the future? Your work added value even if the CEO ended the initiative or a project manager shut it down after a few months of zero traffic. A good story can define what positive impact means in the face of a troublesome ending.
  • If it was a success, what did you learn about the market, the user,  and the approach you took? If it was a failure, how did the team learn from the experience and move forward after the dust settled? 

Polishing up the Outline

Once you list every step of the project, you’re more than 50% done with crafting your case study.  The hard part—getting started and remembering everything—is over. Now it’s time for you to turn these boring bullet points into elegant paragraphs of UX genius.

Wireframe of presentation slide with text: Project 1, The Background. Below, two blank paragraphs on left and images representing three mobile devices with screenshots on right.

The Beginning

You’ve identified the details, now it’s time to build a narrative. We often meet a protagonist first, but who are they? What is their purpose? First impressions matter, and your audience will want a reason to care about what they’re reading. The beginning of any case study sets the reader up for everything that follows. 

To make a good first impression, I usually leverage a dynamic medium, like Google Slides. I keep text minimal and limit the number of slides and images. The hiring manager reviewing your work doesn’t have the time to get familiar with every detail of your case study. Be clear and concise, split the background slide into two to three distinct paragraphs. Remember, if you get the interview, you’ll have time to go into more detail.

  • Paragraph one: Introduce the team or business who enlisted you to solve the problem, what the problem was, and where it originated.
  • Paragraph two: Lay out the primary goal for the project, the solution you hoped to reach, and summarize your contributions.

A limited number of well-selected visuals throughout a slide-deck portfolio can give readers a more concrete image of the story. If you’re building a story for your website, you can be more liberal with imagery since space isn’t a concern. An engaging visual will represent the project, add some visual interest, and give context for the rest of the case study.

Wireframe of presentation slide with text: Project 1, The Process. Below on left, two blank paragraphs numbered 1 and 2, on right, two images representing screenshots numbered 1 and 2.

This is where the hero sets out, looking for purpose. They will encounter perils along the way, meet new allies, and eventually fight that gold-hoarding dragon during the climax! But how long should it be, and what’s an effective way to present the content?

The middle section can vary greatly in length. I’ve written case studies where it only takes a few slides to summarize the journey. Others take many more. Stay focused and represent the events in chronological order. 

Another helpful tip for organizing an accurate story: don’t let the visuals do too much of the talking. In plenty of case studies, I’ve had to sift through dozens of wireframes, user flows, site maps, mock ups, branding style guides—with very little telling me what I’m actually looking at and why. It can be difficult to self-edit when you want to prove your skills to a hiring manager. The hard truth is, showing one user flow is enough to prove that you know how to make a user flow. It’s more important to demonstrate that you understand why you created that user flow, what purpose it served in the design process, and how you used it to communicate your intent to the other members of your team.

I like to separate the middle section of my case studies with numbered points. Each point can define one piece of the project, and I can use the same number to label a single example image representing that piece.

Bonus tip: Another part of telling an accurate story is acknowledging everyone’s work. Since you’re writing from your own perspective, it’s easy to use “ I” and accidentally take undue credit. If you were part of a team, use “ we” instead of “ I.”  It won’t weaken your case study just because you can’t claim to exclusively own every part of the process. Hiring managers want to know you can work as part of a team and not just on your own.

Wireframe of presentation slide with text: Project 1, The Outcome. Below, two blank paragraphs on left, image representing a product screen on right.

We have reached the end of our story. Did the hero triumph over the dragon and return to their village with riches galore? Or were they sadly and tragically swallowed up, only to be memorialized for all eternity in epic ballads by their friends and family? The end of a case study, whether the project was successful or not, is a celebration of your accomplishments. 

Some heroes finish their tales quantitatively; they can explain that each step in the process was a factor in X metric improving by X%, bringing in X amount of additional users, increasing conversions, revenue, KPIs. And so on. 

For other heroes, the impact isn’t as clearly quantifiable. The outcome of their story might be a jam-packed product roadmap, or the launch of an MVP, a successful handoff to a client, or the improvement of an internal company process. Don’t fret! You’ve still accomplished something. This is a great place to share a visual of the final product, a colorful product roadmap, a graph, or something similar.

Sadly, for the heroes that never return home, the ending (or outcomes section) might be more introspective. When my past case studies have ended in less-than-ideal scenarios, I’d quickly explain the circumstances that befell the project—noting any wrap-up activities I performed on my own or with the team—then focus on my learnings. 

Ending with what you learned is a solid alternative to showing impact. Personal and team growth deserve to be acknowledged and documented, even if you aren’t writing a case study. Recognizing what went well, why, and how you accomplished it will only make the next endeavor better. Especially when we fail, we learn what not to do. By ending your hard-earned story with a summary of what you learned, you’re proving to your peers or a hiring manager that you’re fully engaged in the process and the goals.

Humans are naturally drawn to storytelling. It’s a chance to provide the audience with a new and different way to think about a concept. A well-crafted story encourages the imagination to anticipate the arc of what’s next, like a moving picture in the mind.

Case studies can and should be just as enjoyable. While not as whimsical or fantastical as a hero’s journey, they provide value: lessons learned, mistakes made, and triumphs won. As UX professionals, we’re constantly telling the user’s story to our teams and stakeholders and finding ways to foster empathy with the user and their needs. Why don’t we craft our case studies as stories to evoke equally empathic responses? A glorious journey will always be more compelling than a clinical list of events.

Headshot of Ingrid Elias

Featured articles

Hands of different skin tones high-five with colors from the Indeed palette in the background.

Meeting the Moment With a Brand System

People wander in a maze

True Stories of Overcoming Self-Doubt in UX

story telling in ux case study

Use These Frameworks To Make Your UX Research Results Stick

Ad Council Home

Shape the Conversation at SXSW 2024: Vote Today

story telling in ux case study

Each year, Austin, Texas hosts the South by Southwest conference where the convergence of tech, film, music, education, and culture is showcased and celebrated. True to the innovative and collaborative spirit of the conference, SXSW relies on public involvement to help select their lineup using the SXSW Panel Picker. This platform allows you to browse proposals, leave comments and vote for the most important sessions.

Building on the success of our SXSW panels earlier this year , the Ad Council is excited to present our proposed topics for the 2024 SXSW lineup. From generative AI to building impactful mental health campaigns, we want to address our country’s most pressing issues—but we need your help. We invite you to shape the conversation by using the links to read each proposal and cast your vote. Your vote could determine who’s on stage next March. Decide the look and feel of the next SXSW before voting ends on August 20.

UX Design for Community: Models for Ethical Co-Creation Co-creation is a powerful UX research tool, but what does ethical co-creation look like in action? The Ad Council and Citizen Tech Collective partnered on in-person co-creation sessions with Black and Hispanic men in Texas to inform the design of a new website focused on mental health literacy. This session outlines a case study for planning and integrating trauma-informed practices that center community voices and needs. The audience will leave understanding the power of co-design, how to incorporate insights from co-creation into the design, and considerations for using an ethical approach.

Are Non-Profits Ready for the Generative AI Revolution? Generative AI is rapidly transforming the workplace and the world. It arrives with promise and peril for non-profit organizations, which are often under-resourced and slower to adopt the latest technology. Hear from non-profit thought leaders on different approaches the sector is taking in balancing the adoption of generative AI with all other technology. From developing policies and ethics statements to approaches for upskilling employees, this panel will be a snapshot in time for where we are in AI’s evolution in the non-profit space.

Immersive Impact: Driving Change Through Virtual Experiences Step into the world of immersive experiences and discover how marketers are leveraging this transformative technology to create tangible impact and ignite meaningful change. Join us in this engaging panel, moderated by the Ad Council, where we delve into the diverse realms of immersive experiences, from social and gaming platforms to decentralized web3 environments. We'll explore the remarkable potential of this technology and the myriad ways it is being harnessed by non-profits, brands, and government agencies to raise awareness, evoke empathy and drive real-world outcomes.

How Brands Drive Social Impact We all want to make a positive impact on the world, but corporations and brands can run the risk of being seen as performative or missing the mark when it comes to social impact messaging. This discussion will bring best-in-class examples of how brands have come together around critical issues to amplify life-saving work, create award-winning platforms, and activate their network leading to lasting change.

Live Sports Drives Online Impact Sports fans are in a league of their own: they are the fiercest, the most loyal, the most engaged fans on the planet. And live sports have the power to connect your brand message to these ultra-impassioned audiences through the biggest, most-watched moments on TV. This panel, through the lens of vital social issues, will illustrate the undeniable impact of aligning the right message with the right viewers in the right environment, and how harnessing the power of live sports can supercharge a salient broadcast message to drive significant online action – even more than digital sources can.

The Human Impact: Redefining Storytelling with Emerging Tech What happens when leaders from banking, social impact, sustainability, and design-build the future with blockchain, AI, and immersive worlds? Learn how these trailblazing women harnessed emerging tech to reimagine industries, transform storytelling, and boost audience engagement - all while prioritizing purpose, inclusion, and responsibility. Explore strategies for breaking down barriers, navigating corporate caution, and ensuring tech bolsters user experience and design intent without getting in the way. Gain insights on how you can intentionally experiment with emerging tech in your industry.

Saving Lives During the Opioid Crisis Using Trusted Voices Young people in the US are facing a life and death matter: in 2021, 84% of adolescent drug overdoses involved illegally manufactured fentanyl, which is found laced into illicit drugs and used to make counterfeit prescription pills. How can we save the lives of young people? The answer isn’t “don’t do drugs” - it’s real information, from the people who know, including former drug dealers, creators, and media that can reach young people.

Hear how the Real Deal on Fentanyl campaign has leveraged the power of trusted, if unexpected, messengers to break through with young people and save lives.

“The Paper Ceiling:” A Case Study in Transforming Culture In September 2022, a groundbreaking PSA campaign introduced the language of “ tearing the paper ceiling ” into the national conversation, giving a name to the invisible barrier that holds back STARs: workers Skilled Through Alternative Routes rather than a bachelor’s degree. We’ve driven incredible awareness: 4 in 10 employers report familiarity with the phrase as of June 2023, and it’s been referenced as a business “buzzword” in outlets like Fortune, Bloomberg and Newsweek. In this short time, we’ve effectively seeded this concept in culture and created more momentum to transform hiring practices.

Combatting Mental Health Stigma Among Veterans Tragically, more than 6,000 Veterans die by suicide each year in the United States. A new campaign from Ad Council and VA aims to connect Veterans with help and support before things reach a boiling point – and reduce stigma and other barriers along the way.

This panel will break down the insights that are helping change the way Veterans think about mental health support. The panel will also showcase new formats, such as livestream gaming, where delivering the right message in the right place can help save Veterans' lives.

Building Actionable Campaigns Around Mental Health How did The Ad Council, Amazon Ads Brand Innovation Lab, Amazon Music, and Alexa build a campaign that inspired connection and conversation on mental health? Hear directly from the team on how to harness audience insights, technology, and unique touchpoints to make an actionable campaign.

Finding Common Ground To Prevent Gun Deaths Gun violence takes 43,000 lives annually, yet it’s still a topic that is polarizing and divisive. In this session, the Ad Council will be joined by Brady, Dentsu, and Bustle Digital Group to share how we are changing the narrative around gun violence through End Family Fire, a campaign that seeks to end preventable gun deaths by appealing to a shared desire to keep our loved ones safe. On this panel, we will discuss how End Family Fire has leveraged target insights and expert perspectives and rallied the industry to engage an entrenched audience and save lives.

Data Unleashed: How Brands are Reinventing Big Biz with Data In an age where every company is poised to be a data company, understanding how to leverage consumer data may be the difference between brand power and irrelevance. This panel brings together data and brand experts from the likes of Pernod Ricard (2nd largest wine & spirits producer in the world), Walmart and the Ad Council to dissect the importance of leveraging data as a force for good, to optimize operations or transform businesses. They will explore why data is a mission-critical asset for brands, and how to handle it ethically and legally while enhancing consumer experiences and driving business growth.

story telling in ux case study

SUBSCRIBE TO OUR NEWSLETTERS

Want to stay up to date on industry news, insights, and all our latest work? Subscribe to our email newsletters!

IMAGES

  1. UX Case Study Storytelling Guide

    story telling in ux case study

  2. Storytelling and Storyboarding in UX Design

    story telling in ux case study

  3. How to Create Effective UX Case Studies with Aristotle’s 7 Elements of

    story telling in ux case study

  4. UX Storyboard Creation: A Complete Guide For Beginners

    story telling in ux case study

  5. case studies ux research

    story telling in ux case study

  6. How to Create Effective UX Case Studies with Aristotle’s 7 Elements of

    story telling in ux case study

VIDEO

  1. ISLAMIC STORY TELLING MOERA 2024//Muhammad Vidic Alghanis//MTs Unggulan Nuris Jember

  2. UI/UX Portfolio Case Studies that got us HIRED

  3. Life of wild monkeys in the forest. The poor baby monkeys suffered injuries to their face

  4. Dogman? Werewolf? Creatures Stalking Neighborhoods Across The US

  5. SAGITTARIUS♐️💘 HE KNOWS THAT HE LOVES YOU TO THE POINT OF BEING AFRAID OF LOSING YOU FOR GOOD🙏 APRIL

  6. SSC CGL EXAM 2024 BIG UPDATE

COMMENTS

  1. How to Create Effective UX Case Studies with Aristotle's 7 ...

    Décor: The Look and Feel of Your UX Case Studies. Apply the Right Décor: Checklist of Questions to Ask Yourself. 7. Spectacle: The Wow Factor. Create the Right Spectacle: Checklist of Questions to Ask Yourself. Plan Your Case Study Well to Maximize its Impact.

  2. The Art of Storytelling for Case Studies

    The basic structure of UX design, UX writing and content strategy, and UX research case studies have important elements in common and all follow the same general path.

  3. Storytelling with UX Case Studies

    There are five key components to a good case study. Your case study should include: A project summary: This should be brief. Keep it 3-5 sentences long. Just enough to orient your readers to the ...

  4. Storytelling in UX Work: Study Guide

    Article. Connect with your audience in remote settings by using these 5 strategies. 3. Persuasive Storytelling Rule #1: Adapt Your Vocabulary. Video. Adapting your vocabulary builds trust with your audience and ensures alignment on ideas and solutions. 4. Making a Case for UX in 3 Steps. Video.

  5. How to tell your story in a UX case study format

    A story explaining how to tell stories — things to think about before you start writing your next case study: Once upon a time, in the realm of design narratives, there lived a group of storytellers who sought to craft compelling tales within their case studies. In this enchanted land, they learned the art of structuring their stories like ...

  6. The Power of Storytelling in UX Design: A Comprehensive Guide

    As a UX designer, you can harness the power of storytelling to craft meaningful experiences that leave a lasting impression on users. When incorporating storytelling into your design, focus on three main aspects: 1. Narrative Structure. Every great story has a beginning, middle, and end.

  7. Complete Guide to Building an Awesome UX Case Study

    It can be inspiring to see the most beautiful work, but don't let that distract you from the straightforward format of a good UX case study. At the core, a UX case study relies on excellent storytelling with a clear, understandable structure. This article breaks down the anatomy of a UX case study to help you tell a simple and effective story ...

  8. Be a storyteller: The best advice out there for writing and ...

    In a field where empathy, communication, and collaboration are critical to success, mastering the art of storytelling in UX case studies elevates designers as thought leaders and visionaries ...

  9. How To Use Storytelling In UX

    The author or UX team needs to know what that flow is and how to end the experience gracefully. In his book, The Hero with a Thousand Faces, Joseph Campbell outlines 17 steps that make up a hero's journey (a common template of storytelling). While the hero's journey is very detailed, the overarching concept is applicable to UX design:

  10. Resonating With Users: The Art of UX Storytelling

    From ideation and design to post-launch optimization, storytelling in UX reminds cross-functional teams of actual living target users with goals and obstacles that products and services must address. So, there's less temptation to accidentally switch to technical feasibility. Humanize complex data.

  11. What Is Storytelling in UX Design, and Does It Really Work?

    The magic of storytelling lies in its ability to evoke emotions and convey experiences that resonate on a human level. UX design, at its core, is about understanding and responding to the human experience. Combine the two, and you have a powerful duo that can significantly enhance user engagement. Here's a practical example: When designing an ...

  12. The Complete Guide to UX Case Studies

    You can use a UX case study to engage your readers in your thought process through each design stage. As a result, your readers will gain a solid understanding of the "how" of your UX designs and hopefully understand how working with you or your company benefits them. 3. Highlight (solved) user issues.

  13. Visual storytelling for UX design with examples

    5 great examples of visual storytelling in websites. Here are some inspiring examples of visual storytelling done right. 1. Highline: Poor millennials. This excellent longform article from Huffpost's Highline combines great writing with an inventive form of visual storytelling to deliver a truly original experience.

  14. Storytelling, not reporting. Engaging case studies with examples

    To add the cherry on top of this story, here are some of my favorite case studies that followed the storytelling structure. Enjoy. 'Find the nearest spaces to work at' by Celia Donnelly. 'CUJO — the power of enterprise security solutions' by Karolis Kosas 'Reinventing airplane seat selection' by Martin Jancik

  15. UX Case Study Guide

    Basically, a case study is an in-depth exploration of the decision-making of a person or group of people. The idea behind them is to document the subject's actions in a particular setting and analyze their behavior and choices. When writing one, think of yourself as a protagonist in a story or novel. While this may sound somewhat pompous to ...

  16. 15 Excellent UX Case Studies Every Creative Should Read

    The Storytelling Approach in UX Case Studies. An essential part of the portfolio of a UX designer is the case studies that pack a showcase of the designer's skills, way of thinking, insights in the form of compelling stories. These case studies are often the selling point as recruiters look for freelancers and agencies who can communicate ...

  17. 5 Storytelling Tips for your UX Research Presentation

    Tap "Show More" for Timestamps and more helpful UXR Resources ⬇️ 0:00 Intro1:24 What is a good story2:34 Tip No.13:33 Demo time 5:23 Tip No.2 and examples6:5...

  18. The Art of Storytelling for Case Studies

    Conclusion. Humans are naturally drawn to storytelling. It's a chance to provide the audience with a new and different way to think about a concept. A well-crafted story encourages the imagination to anticipate the arc of what's next, like a moving picture in the mind. Case studies can and should be just as enjoyable.

  19. 3 Keys To Great Case Study Storytelling

    They are only there to help narrate the story, not tell the story itself. To recap in plainer english: Highlight your fails and talk about the how, why, and what of it. Indulge your human side, which means your shortcomings and mistakes. This could also include lessons and what you would do differently.

  20. Every designer should have this skill: Storytelling in UX

    6. Source: unsplash.com. At first glance, UX design only offers a little freedom for storytelling. But that's a misconception. After all, good stories skillfully convey ideas, captivate people, bring products or apps popularity and recognition, and are as memorable as possible. Skilled UX designers should not only be the best at what they do.

  21. Designing a group storytelling experience

    This is a capstone assignment I completed at the 10kdesigners Product Design Masterclass over the duration of 2 weeks.. 📄Brief. Recreate the physical game "Pass the Story" into an online app experience. With this, the users can build a story sentence by sentence.It will be a group creation experience, and the end product of it will be a story written by users published on the app and ...

  22. Shape the Conversation at SXSW 2024: Vote Today

    UX Design for Community: Models for Ethical Co-Creation ... This session outlines a case study for planning and integrating trauma-informed practices that center community voices and needs. The audience will leave understanding the power of co-design, how to incorporate insights from co-creation into the design, and considerations for using an ...

  23. Visualization Techniques for Complex Data Sets: A Guide for UX/UI

    The role of data visualization in storytelling cannot be overstated. It adds a narrative layer to raw data, making information more memorable and impactful. ... Case Studies. The power of visualization techniques in the UX/UI field can be seen in real-life applications. For instance, Spotify's Discover Weekly feature uses heat maps to track ...