John Ellison

Day 18: Crafting A Bridge Between Storytelling & UX Design

12 min read

story ux artefacts john ellison


When I first heard of the word 'UX', I was adamantly trying to become a published author. I had been working on several novels but each time I would reach a point in the story realize that the story had failed.

I stepped back and realized that I had little to no understanding of the craft of storytelling. While I loved story and its various forms, and while I was passionate about writing and telling a great story, I didn't have the tools in order to tell those stories well.

So I spent a lot of time reading about the craft of storytelling. I attended storytelling workshops, enrolled in immersive courses, tried out a range of writing techniques and experimented with different short story formats.

Enter UX Design

I was making websites in order to fund my passion for storytelling. Along my journey I discovered this term 'UX' and began doing some research.

A lot of what I read reminded me of the craft of storytelling. The more I read about user experience design and its principles, the more I got excited.

I knew there had to be a better way to make websites and create digital experiences, and I had a feeling I was onto something.

So I dove into the world of UX Design—reading everything I could get my hands on and doing my best to digest the craft through practice and real projects.

I had this powerful sense in my gut that I wanted to combine the worlds of Storytelling and UX Design. So I bought the domain but I hit a road bloack where I couldn't really grasp how the two world of story and UX would collide.

Picking Up The Trail

In my first few meetings with James Box (see Day 4, Day 9 and Day 11), I began to pick back on the trail of combining Storytelling and UX Design.

On Day 9, I brought up the possibility of telling the story of Clearleft's clients from the client's perspective as if they were the hero rather than Clearleft. It seemed like they were getting pushback from clients because Clearleft was in the mode of thinking that Clearleft was the hero—when in fact, Clearleft was acting as the guide for the hero of their clients.

On Day 11 I noted that the structure of the opportunity canvas was incredibly similar to the structure of the hero's journey and that we could frame the opportunity canvas through the telling of a story.

As we explored Clearleft's opportunity to meet a market demand for design education (The Clearleft Training Project), I felt the bridge between Story and UX was being built from either side of a deep chasm. I could feel small bricks coming together working to create a bond that I envisioned when I first stepped into the world of UX Design.

Laying The Foundation For the Story-UX Bridge

There's a bit of groundwork I'd like to lay before I jump into building the bridge between Story and UX. There were some key lessons from James Box that enabled me to bridge the gap.

Problem Definition

James taught me that a designer's initial responsibility is to intimately understand the problem at hand. The designer needs to be able to clearly articulate the problem in order to create shared understanding across the team and stakeholders. Only once a problem has been clearly defined—and an explicit shared understanding has grown from it—only then does a designer proceed towards problem solving.

Problem Solving

James said that the sign of a good designer is their ability to compare different activities by the activity's ability to arrive at a specific solution. Most young designers fixate on a specific activity quite early on. Sometimes this works and the designer thinks they've done their job, but often times the solution doesn't work. When you fixate on an approach to a solution too early, you lose the ability to compare a set of approaches based upon the explicit criteria you've defined in your problem definition.

Microcosm & Macrocosm

While this balance between problem definition and problem solving applies on a macro scale throughout the length of the entire project, it also applies on the micro scale within each stage of the project. James taught me how to define explicit problems at each stage of the project cycle and how to weigh different approaches to creating a solution.


In a way, the key to this type of thinking is a term called 'metacognition'. It means thinking about thinking. In order to understand how to solve a given problem in the best way possible, you must first understand how you are thinking about the problem, what assumptions you are making through those thoughts, and you must extract those assumptions for further examination and scrutiny before deciding whether that approach is best.

I was talking to Jeremy Keith about metacognition at lunch. We were talking about teaching and mentoring and how it compares to other forms of knowledge sharing. Jeremy talked about his approach for helping his mentees solve problems. It often involves stepping back from the computer screen, grabbing a pen and paper and thinking about how you're approaching the problem. It's metacognition.

Most practitioners see a problem and immediately grab their toolset ready to chisel away at a block until they've arrived at their desired conclusion. But a master grabs their pen and sketches out both their process and the varying end results.

I think this ability to extract yourself from your present position and be able to objectively analyze your thoughts and your thought process is crucial to solving problems as a designer, a developer or whatever have you...

Creating a great design or crafting elegant code isn't all that different. It's all about defining problems, breaking them into smaller chunks, thinking about the best approach and using the best tools for the job. Sometimes you have to design the tools before you can use them, and sometimes the tools are ready to grab.

Story-UX Applied to Clearleft's Training Project

Now that I've sketched out the foundational concepts, I'd like to walk you through my process and my thought process of trying to bridge the worlds of Storytelling and UX Design for Clearleft's Training Project.

The Clearleft Training Project began when Andy Parker asked Jeremy and James Box if he could set up a meeting regarding a rising demand for design education in the marketplace. Andy wanted to present the demand as he'd seen it and brainstorm some different ideas about how we could go about potentially meeting that demand.

James Box and Jeremy helped Andy devise a plan for the upcoming weeks and I was given the opportunity to support Andy's efforts.


We started off with an initial discovery to uncover the realm of possibility for meeting the market demand for design education. We made a Project Canvas (Day 10), and identified a set of core personas that we would begin to validate through a research sprint.

Research Sprint

Andy and I embarked upon a variety of research activities including: user interviews, listening to recordings of workshops, interviews, and project pitches.

We collated our research findings and prepared a playback for the project stakeholders.

Playback 1

Andy led Jeremy, James, Clare and I through a playback of our initial discovery and research sprint (Day 17). As a takeaway, James gave us some guidance and instructions to narrow in on a smaller set of personas and explore their user journeys.

Problem Definition & Process Design

I spent the afternoon defining the problem at hand and exploring a variety of different approaches. I wanted to move away from the traditional format of a UX persona which seems to be full of facts and information, behavioral 'insights' and ideas about the persons needs.

I wanted to tell a story.

So I looked back through my old storytelling workshop materials and character sketches. I penciled out the initial elements necessary for a character sketch and decided to look at how we could portray this character's journey as a Hero with Clearleft as the Mentor.

Designing Together

looking at andy's slides Andy and I met and looked at the different approaches we each had constructed in our time since the playback. He showed me the slide deck he had started and I showed him my character sketches and the journey format I had designed. I asked if he'd be interested in trying out a new technique where we essentially craft a story with our personas as the Hero and Clearleft as the guide.

He was game. So we went upstairs with a handful of dry erase markers and headed to the whiteboard.

We started off in a linear format with bullets and sticky notes. We were moving in two different modes and I suggested we try a mind map (non-linear thinking) to illustrate the elements that we needed in order to understand our Hero best.

hero elements on a whiteboard story ux personas

Trying It Out

We then used our research to test out the elements we'd constructed and realized that there was a much bigger picture. We began with an attempt to create a Hero out of our user persona. In seeing them as a Hero, in understanding their internal and external conflict, and in exploring their gifts and strengths, we realized that our role as The Mentor was to enable this person to actualize their superpower and use it to overcome the obstacles in the way of achieving their goal.

This new structure and new perspective created a desire from the core of our beings—we wanted this person to win! Just like when you're rooting for the underdog in the movies because you know they have a special gift that they haven't fully realized yet, we were cheering for this initially distant 'persona' as a real person now with heart-wrenching needs and gripping conflict.

In this exercise, we realized that the Hero had allies and enemies. We realized that this approach of looking at a single character in a narrative beckoned a bigger picture: a Storyscape.

trying out the hero model

Exploring The Storyscape

Andy gave me the task of looking at how we would portray this Hero's journey through time and space with a lens on our role as the Mentor. We weren't looking at a 'user journey' in the traditional sense where a user is going through a flow of interfaces—we were looking at the crucial events in this person's life and trying to understand our role as the Mentor to enable them to reach their full potential and accomplish their goals.

We had a Hero with a tragic flaw and an un-tapped superpower (The Problem). We knew we needed to create a value proposition as the Mentor that would help the Hero actualize their superpower (Solution), but we didn't have enough knowledge from the story to know what that solution was yet...

We had an Antagonist, who was trying to deceive the Hero into thinking that their power wasn't really all that great. This Antagonist (or The Mentor's competitor) had a competing value proposition. In essence, the Antagonist didn't care or care to know what the Hero's problem was. The Antagonist simply wanted to sell a pre-prescribed solution to as big of an audience as possible.

Suddenly, I had a realization as to the Mentor's unique differentiator: The Mentor didn't pre-prescribe a solution without knowing the problem. Clearleft wouldn't approach this demand for design education assuming they knew what each individual's problem was.

Clearleft (The Mentor) was going to be different in the fact that they were determined to intimately understand each Hero's (customer's) problem and to craft a bespoke solution to meet the Hero's needs exactly.

I was beginning to see the unique element of The Mentor's potential value proposition, but the details of the proposition needed to follow.

Sam's Journey

sam's journey - story ux


Sam had a passion for print design. He studied graphic design in Moscow and loved his first job as a graphic designer. Shortly after he began, his boss asked him "Can you do web design?" and suddenly his work as a graphic designer wasn't good enough. He needed to do the web.

Outside of work Sam had his first child. He no longer had the luxury of caring only about himself, he had the duty of providing for his family—but could he provide for his family whilst doing something he loved?

In grappling with a newborn son and the new craft of web design, Sam fell behind in his work and ended up losing his job.

The Story

Act I

Sam moves to the UK to find a better work and start a new life for his family. He heard about this thing called UX/UI and heard it was in demand. He opened his favorite search engine and wrote 'How do I become a UX Designer?' and clicked through the first couple of listings.

The first listing (The Trickster) didn't really care about Sam's problem. They just affirmed what he'd heard: UX is the new rage, become a UX Designer by attending our 12-week immersive course. They didn't explicitly guarantee him a job in UX, but the language was implied.

The second listing (The Mentor) said that [Enter Clearleft's Unique Value Proposition here].

Sam was faced with a difficult decision, and a decision which could determine the course of the rest of his life.

I envision using this type of narrative to solve the same kind of problems that user personas aim to solve: To create a 'proxy' (stand-in) for a user within the context of a design / development project. But instead of a lifeless piece of paper hanging on the wall, my aim is to tell a story such that the story lives on in the minds and hearts of those who hear it. I want the story to grip people such that they feel compassion for the Hero and want to do everything they can to help the Hero succeed. Isn't that what a good mentor does anyway?

Act II & Act III to Come...

Andy and I are going to flush out the rest of these personas into Heroes like we did with Sam above. I've got a few ideas that I could spend hours writing about but for now just have to portray in form of sketches:

designing the story ux exhibition space for clearleft training projectUX Culture diagram