The hero’s journey and UX design
In this story, I'll go over some of the building blocks of story narration, a story template and how it can be adapted to UX design case-studies.
Be it onboarding a new team-mate or assembling a long-overdue case-study. Writing fantasy or the biography of Pablo Picasso. Movies from Hollywood, Bollywood or Ghallywood. The Starry Night. 60 second shorts or discussing urban legends by a campfire. There are multiple ways to tell a story.
Your portfolio needs to tell a story.
I've seen and heard this sentence a number of times, where the inserted word varied from being a portfolio to a case-study to a product to a brand and many more. Regardless of what word to apply, the main theme is still about telling a story, which is an invaluable skill.
But, what does it really mean to tell a story?
During my graduate studies, I was asked to write a thesis and present my research. The thesis had a pre-defined structure and had to be written with LaTex. The presentation on the other hand, was more freeform and had to tell a story. As a not-really-a-storyteller-type-of-a-person, I was not sure how to approach it, so I went to the library and got "Connection: Hollywood Storytelling Meets Critical Thinking”, and started to look into the building blocks of creating stories.
This is also where I started to look more into the concept of the Hero’s Journey, also known as the monomyth or an epic.
A hero ventures forth from the world of common day into a region of supernatural wonder: fabulous forces are there encountered and a decisive victory is won: the hero comes back from this mysterious adventure with the power to bestow boons on his fellow man.
The Hero's Journey is a storytelling template that can consist of 17 steps, but not all stages are necessarily needed to be featured, and these steps could be structured into three main stages:
- Departure (beginning — setting the scene and the start of a journey)
- Initiation (middle — learnings that build to a climax)
- Return (end — victory and or reflection of what happened)
The objective of the hero’s journey is to create a compelling story that resonates with the reader on an emotional level.
Another important aspect of creating a good story is the characters involved. The reader wants to know what the main-character learns in the process and how it changed them. If we apply this is to writing a UX case-study for interview purposes, the designer (you) would be the main person involved. A story about what you did and discovered as it is told from your perspective. Like in a story, there can be more than one character involved. This could be different departments, PMs, users, engineers or fellow designers - they have an impact on the journey (story).
A good story is a series of causes and effects, actions and reactions, and illuminations.
- Barbara DeSantis, Los Angeles Editors and Writers Group
Something that was long engraved in my mind was that telling a story needs be entertaining or it needs to be a masterpiece of fiction, fantasy or a fairy tale. Why? Perhaps due to thinking the word story as black and white. Therefore, I used to approach writing my design case-studies in a more academic or research-paper style. This kind of approach can work as well, though storytelling can help to increase the impact.
Adapting the Hero's Journey for a UX case-study
Let's take the three main stages and adapt them to fit better into the context of a UX case-study.
- Departure <=> Introduction: the context of the product or service
- Initiation <=> Actions: what you did and why
- Return <=> Results and Evaluation: what was the result
- (Purpose) Case-studies are not only for hiring purposes, they can be used in sales and marketing, agencies, etc. This can impact the writing style and what should be included in the case-study.
Let's dive a bit deeper into each stage.
1 Introduction
Giving context to what was the product you were working on helps the reader to understand the actions that followed. Keeping the introduction short, sweet and to the point. It is good to add a visual that communicates what the product or case-study is about. For example, if it is an app, including a screen (especially a screen your case-study is about) helps the reader to understand that this case study is about an app without necessarily reading the fine print. This can be also applied to the thumbnail as it can help the viewer to pick the most relevant case for them before entering the full-length case-study.
Mentioning your role in the project/team. For example: I was the UX designer in this project and responsible for research, ideation and wireframes, or simply Role: UX Designer. As applicable: The team consisted of a senior designer, a UX designer and a UI designer. If the work was a team effort or outsourced, you could provide more context when walking through in the relevant action item, such as: We worked together with the marketing team to arrange and conduct an interview session with 20 potential customers.
2 Actions
This stage is the chunkier part of the case-study as it describes what you did and why. It can help to kick off this section with a metric result, change or a problem/pain-point. The idea is to grasp the readers attention up-front and making them to want to know more how you got there. For example:
- Increasing conversions by 30% by introducing a new 'Pay Later' feature
- Helping users to find and purchase limited edition items from Japan
- Users were unaware you can save items for later
The actions you did should narrate through the following questions:
- Why? The reason for this project
- What? Your objective for this project
- How? Research, prototyping, wire-frames, low-high fidelity
- If applicable: What's new or what was changed
Why
What was the reason for this project? Was there a problem that needed solving? Was it a request from stakeholders or an item on the product road-map? A project set in motion by negative user feedback? A glitch in the matrix? A brief can often be quite abstract, which makes defining and describing the problem/opportunity important.
Did you define what you wanted to do at the beginning? For example, maybe the company was suffering from low adoption rate and wanted the design team to look into improving it, or it could be that there was a user problem or pain-point that initiated the project, etc.
What
What was the objective for this case? When you embarked on this journey, what were you looking to accomplish? Did you want to learn why users were not using a certain feature? Propose a new feature? Learn how the users navigated the solution? Was it perhaps creating a new solution based on existing insights? Maybe:
- The app was suffering from low adoption rate for its customization option, and we needed to investigate the possible reasons and come up with a solution on how to improve it.
- Customers lack the ability to design their own coffee beverage on our app, which is impacting sales. We needed to propose a new design concept that would allow users to customize their order.
- We received insights from the data team reporting that 75% of the users do not complete the registration process. We wanted to do an audit of the onboarding experience and propose further actions.
How
What were the actions you took to solve the problem and reach your objective? Did you do research? What kind of methodology did you use? Did you analyze user behavior? What major insights did you find out? Was there existing data available? Did you utilize available data? How did your design evolve from idea to conception?
If you created a new user flow or interface design, what were the underlaying reasons for what you did? Often times with enhancements, it is good to show a comparison of what the design was like before and the new design.
A lot of research papers present research methodology at the beginning, but in the case of a describing your full design process at the very start of the case-study; I’m a bit skeptical if it is really helpful to display it as a linear map of steps. A more effective way could be to rather use storytelling to guide the reader through your design process.
What you want to show first depends how you want to present your case-study. Showing the design process at the start can easily get you caught up at the beginning of the presentation, as a design process can have multiple steps going in different directions and a plethora of things that happened. Can you communicate it briefly? Maybe that’s a way to go, although using a storytelling method to go through the process can help to avoid repetition and make the story have a more natural flow.
If there is a section of the case-study for appendix/more details-type content, for example like a toggle accordion, a linear-style design process could be described here as it is often asked in interviews. Benefit with this kind of visual is that it provides a compact snap-shot of the steps taken.
3 Results and Evaluation
What was the result of this project? If you designed something new, how did it perform in comparison to the previous design. Are there any metric or behavioral changes after implementing the new design or perhaps some feedback from the users? Are users spending more time engaging with the product? Describe what was considered a success with this project.
How did you evaluate what you did and arrive at the result? For example, it might be through A/B testing, launching into production and analyzing the performance, etc.
- We measured a 30% increase in conversions by introducing ‘Pay Later’ as a new feature within 3 months of implementation.
If using the storytelling stages to structure your case-study, this is the could be the final outcome or the victory of the story. The important details of your design process were covered to arrive at this result.
Transforming a 'research paper' into a narrative
If you've worked a long period on one product or company, there will be multiple projects within that same product. One option is to create a single case-study for each project. Alternatively, if combining several projects into one case-study, it is important to provide clear sections for each project (and quick links at the beginning to jump right in). It depends how your portfolio is structured and not necessarily all projects need to be created as case-studies.
Does a research case need to read like a research paper? This might depend on the use-case and how you want to portray yourself. The case-studies I wrote before had a clear structure following the stages of design thinking process with the goal of communicating the design process clearly. Although, after going through these case-studies as part of interviews, I found they tended be rather long and weren’t as strong in leaving an impression or helping to guide the reader.
Taking the above as an example for introduction. The one on the left follows a more linear structure of describing the background, problem and solution, but the one on the right starts with the problem directly by telling what the product does by using hierarchy (easier to scan and remember). This is setting the scene for the viewer to immediately understand what the product is about, without needing to read the fine print.
After the general introduction to the product, the second stage could be started by highlighting what was achieved (image below on right) that communicates the impact.
This approach sets the scene to start narrating from the result achieved -aiming to get the reader interested to find out how you managed to do that.
Stories will give your past experiences form and make your case studies better organized.
- Teo, Y. S, Interaction Design Foundation
A case-study doesn't have to be written like a literary masterpiece with exquisite language and industry jargon, but utilizing storytelling helps the case-study to have a structure.
You are telling a story about a user experience you designed
Use storytelling to guide the reader by highlighting the details and actions that matter. It is good to consider who you are writing for or presenting to, and if your story can resonate with a larger audience it is likely to have a stronger impact.
The people reading your case-study could be hiring managers, designers, engineers, your neighbor, operations or a person looking at entering the field. You might not be writing a case-study with your neighbor in mind, but the idea is that any reader can easily grasp what the case study is about.
Case-studies are not full length movies or telenovelas, so bearing in mind the possible time-constraint from the readers side can go a long way. The person reviewing your case-study will likely scan through the information. Will they be able to grasp quickly what you did, why, who was involved and what was the result?
Visuals support your story
Telling a story can be as simple as narrating what happened. What I have been asked many times is to show how the design was before and after. Providing a comparison can shed light into the scope of what you did. It is important to focus on the details that matter. Information overload or overcomplicating the story can make the receiving end lose interest.
If you think of a movie or a book you enjoyed, I think you can describe the characteristics of the main character of the story quite well, be it how they present themselves, language, and behavior. Think for example, the speaking style of Marlon Brando in the movie The Godfather or the figure of Chewbacca in Star Wars. Roar. These are all certain characteristics that a viewer/reader can remember with ease. If you remember these, do you know what are the color of their eyes? Maybe that's not vitally important in these stories. Same kind of approach could be applied to drafting a case-study by emphasizing the details that matter.
Not having a happy ending doesn't make a case bad
Not all stories have a happily ever after, and that doesn't make a story bad. Similarly, not all UX projects are successes, but there is still the journey within that allows you to tell a story, what you did, what happened and why. Can you describe a situation that went wrong and how did you solve it? Familiar question, right?
A change in the flavor of Coca Cola named as "New Coke" was introduced in 1985, just to be met with a big resistance from the consumers, becoming a memorable marketing blunder.
Epic Epilogue
How do you create your case-studies?
This is the end / Beautiful friend 🎵
References and further reading:
- LaTex - A Document Preparation System
- Connection: Hollywood Storytelling Meets Critical Thinking
- The 12 Steps of the Hero's Journey
- Writing 101: What is the Hero's Journey? 2 Hero's Journey Examples in Film
- Joseph Campbell and the Hero's Journey
- What Makes a Good Story?
- What is Design Thinking?
- How to Write Great Case Studies for Your UX Design Portfolio
- New Coke: The Most Memorable Marketing Blunder Ever?
