UX

storytelling
guide
Jeff White
Thanks for downloading the
UX Storytelling Guide

AFTER READING I HOPE YOU

• Understand what storytelling in UX work really is

• Know why storytelling matters

• Think differently about your job

• Feel empowered to advance your career – fast

HERE’S WHAT WE’LL COVER:

• A bit about me (why you should give a sh*t

about what I say in this guide)

• Problems you’re experiencing

• How storytelling solves them

• My 5 part approach to storytelling

• Next steps

Let’s get started.

UX Storytelling Guide Thanks for downloading

01 Why you should
believe me

I wrote this guide because I know the techniques

actually work.

I developed them over a 20 year career as a UX

Designer. I’ve used the techniques I describe here
countless times in different situations. This
approach works whether I was presenting design
to a FAANG CEO or an engineer sitting with me
at my desk.

They’ve gotten results for me and the designers

I’ve trained over the years.

I used this storytelling approach to:

• Present design to Jeff Bezos ~30 times
• Present design to founders, CEOs, executives, directors, and other
senior stakeholders at Amazon, Motorola, and 21 other companies
• Present design to countless designers, PMs, engineers, and other
stakeholders in formal and informal settings

In 20 years working as a designer, you present a hell of a lot of design work to a

lot of different people.

But storytelling isn’t only about giving presentations. It’s about getting results.

Here are some of the results I’ve achieved using this approach:
• 7 promotions in 13 years as a full time employee
• 3 promotions in 5 years at Amazon
• Earned $6,000,000 in revenue at my firm, Stepladder
• Worked with 18 clients, all based on referrals
• Have a 100% repeat client rate

UX Storytelling Guide Why you should believe me

And finally an example on the product side:
My first client at Stepladder was an eCommerce company called Woot! (acquired by
Amazon). I used the exact same storytelling techniques I describe in this guide to
redesign their Android and iOS apps. The project resulted in a 343% increase
in conversion.

I’ve had a long and fortunate career.

This guide is about sharing some of what I’ve learned with you.

My hope is you take what you learn here to differentiate yourself as a superior
designer, advance your career quickly, and achieve your personal and
professional goals.

UX Storytelling Guide Why you should believe me

02 What is storytelling?

Storytelling is one of those jargony terms that means different things to

different people.

Some designers will tell you that storytelling involves using best practices popular
in Hollywood, like Pixar’s often mentioned 22 rules of storytelling.

There’s the hero’s journey framework.

There are intimidating terms like temporal sequence and casual connection.

If you’ve done a lot of reading on storytelling in UX work like me, you’ll have found
long technical articles full of heady language and quotes from famous storytellers.

Or short lists of storytelling frameworks.

But you found few practical examples of how to put them to use in your daily
design work.

Some people will tell you that storytelling isn’t something designers even do
— it’s a “conversation” a brand has with its customer.

If you have no idea what that means, you’re not alone.

Let’s forget all that and simplify:

UX storytelling is the act of telling someone why a design is good or bad. It happens
anytime you present, communicate, or show design to a stakeholder or colleague.

Storytelling is not only about presenting manicured slide decks to executives in a

formal setting.

It can be on a whiteboard with a teammate.

Or in a daily check in with your PM when you’re presenting from your source file.

Anytime you find yourself describing why you think a design is good,
you’re storytelling.

Storytelling doesn’t have to be complicated.

UX Storytelling Guide What is storytelling?

It doesn’t have to involve Mia, your primary persona.

You don’t have to come up with and then tell a gripping narrative about Mia’s
struggles and how your design solves them (although you can).

It doesn’t have to be a fancy presentation (although it can be).

All you’re doing is showing your design to someone and hopefully convincing
them it’s good.

When you do that, you’re telling a story.

UX Storytelling Guide What is storytelling?

03 Why storytelling
matters

Are you experiencing any of these challenges

in your career?
You can’t get people to agree to the design you believe is right.
Stakeholders may ignore your recommendations and say “just do it my way”.
You feel like they “don’t get it”.

You don’t play a strategic role in decision making.

You feel like you’re just showing people what they want. Or you may be presenting
a range of options and letting them pick. Either way, you feel undervalued
and underutilized.

This is because you’re viewed as a “set of hands” that can make mockups and
prototypes. Not as a strategic player that helps teams make successful products.

You get prescriptive requirements from stakeholders.

There is no freedom to explore different ideas.

Projects take too long to complete.

Decisions take too long to make, or they’re constantly revisited because teams don’t
believe in the chosen design.

Designs aren’t getting built to spec.

What comes out of the engineering process barely resembles what you designed.

Your team lacks design maturity.

You feel like your company can’t make great products because they aren’t willing to
invest in better design processes.

Your product isn’t performing well in the market.

No product is perfect, but you know the quality of your product is simply too low.

UX Storytelling Guide Why storytelling matters

You aren’t getting opportunities to present work to key stakeholders.
Key meetings include other designers around you, but you’re excluded.

You make it all the way through interview loops but aren’t landing the job.
You feel unsure about the best way to communicate your experience
and capabilities.

These are problems that most designers, including me, face in their career at
some point.

They’re challenging problems. They can be demoralizing. And all the technical skills
you learned in school, bootcamp, or on your own won’t fix them.

And let’s get down to what really matters. These problems mean you’re not getting
the jobs, promotions, or clients that you want.

And that stops you from having the life you want. That could mean more freedom,
providing for your family, planning for the future, or feeling fulfilled in your
design career.

Solutions
Dear reader, would you be surprised if I told you that improving your storytelling
skills addresses all those problems?

Storytelling is how you convince stakeholders to ship the right design.

Storytelling builds your credibility. This gives you influence not only over the design
but also process and culture.

Storytelling establishes you as a strategic partner instead of a production artist.

Storytelling gets projects finished faster.

Storytelling ensures the thing that gets built matches the thing you designed.

Storytelling increases product quality and performance.

Storytelling gets you jobs, promotions, and clients.

Most importantly:
Storytelling gives you increased confidence, morale, job satisfaction, financial
security, and freedom.

UX Storytelling Guide Why storytelling matters

You’ll likely spend the first 3-5 years of your design career building up your
knowledge of UX and visual design fundamentals. You’ll also be building technical
skills, learning tools, and learning what it’s like to be a professional UX designer.

And then those fundamentals and technical skills won’t be enough to continue
moving up.

You’ll need different skills to get positions like Lead, Staff, and Principal designer.

Or move into senior management roles.

Storytelling is one of them.

UX Storytelling Guide Why storytelling matters

04 My approach
to storytelling

I believe storytelling should be looked at as closely related to, but separate from
the act of designing things:

1. Design good stuff

2. Convince other people it’s good

I urge you to take both of these seriously. Put thought and care into how you
do each one.

To make great products you’ll need to do both. Even when #1 is excellent,

it won’t matter if you can’t do #2.

I break storytelling down into 5 parts:

1. Know the audience

2. Establish trust
3. Use a story structure
4. Make recommendations
5. Use high quality visuals

Know the audience

Who you’re presenting design to determines everything about the story
you tell them.

Is it a group of designers in a design crit?

Is it an informal check in with a PM?

Is it a formal presentation to a room full of executives? Is one of them your CEO?

Is it an engineer or team of engineers?

Is it a hiring manager at a portfolio review?

Are you sending a mockup to someone in Slack?

UX Storytelling Guide My approach to storytelling

Different scenarios will lead you to tell different stories in different formats.

You want to dissect:

1. Who is the audience?

2. What do they already know about what you’ll show them?
3. What do they care about?
4. What language will resonate with them?
5. If you presented to the same group before, what has worked and not worked
in the past?
6. What is your goal? What do you hope is true after the conversation
or presentation?

Remove jargon from your verbal and visual communications. If you’re presenting to
a room of business people, the last thing you want to do is geek out on design
process or use terms like “lo-fi wireframes”.

The first step in effective storytelling is knowing your audience. Then you can tailor
your verbal and visual communication around what’s important to them.

Establish trust
Your story is more believable if you’re viewed as a credible and trustworthy
colleague.

If you’re presenting to a group that’s worked with you before, you have the
advantage of that history to prop you up during the presentation.

That’s not always the case though. Many times you’ll be presenting to a new
audience or stakeholder whether it’s a job interview, new client, or new people
at work.

There are some basic things you should do at the beginning of every design
presentation to establish or reinforce trust. This lets the audience hear your
message and believe you.

Here’ s my checklist:

1. Be ready
2. Remove distractions
3. Have a plan
4. Communicate the plan

UX Storytelling Guide My approach to storytelling

1. BE READY

You’re on time and have whatever you’re presenting loaded and ready to go.

You’re not fumbling around looking for a file or the right browser tab.

Were you rushed or needed to restart? It’s ok.

But don’t let the audience see you find things and get set up again.

Stop sharing your screen and say you’ll be ready in a minute. Stay calm and get set
up before sharing your screen again.

2. REMOVE DISTRACTIONS

Turn off notifications.

If you’re presenting from a browser, have a browser window with a single tab in full
screen mode. If you’re presenting from Sketch, Figma, Powerpoint, Keynote, etc. be
in full screen mode.

The idea is to get rid of pixels on your screen that are not the thing you’re
presenting.

A screen with too many distractions makes it harder

for your audience to hear your message.

UX Storytelling Guide My approach to storytelling

3. HAVE A PLAN

Know your plan before the meeting starts.

This is true even if it’s an informal review with your core team.

Don’t start the meeting with something like “well I guess I could show___? Or wait
maybe this other thing…”

It’s your design and your meeting or conversation. If you don’t take control of it,
someone else will.

4. BE READY

“Today we’re reviewing 3 options for the xyz feature. If we have time we’ll also look at
test results for the abc feature.”

For more formal presentations, have a single slide with a simple outline of the
content you’re presenting.

I usually incorporate this into the title slide of the presentation.

Here’s an example:

APP AUDIT

• Analysis
• Recommendations
• Concepts

Use a story structure

Using a simple and repeatable story structure saves you time. I’ve used this
structure more times than I can count.

It works for me. It works for designers I’ve trained. And I’m confident it will work
for you too.

I call it the tell ‘em method + options and analysis.

UX Storytelling Guide My approach to storytelling

THE TELL ’EM METHOD:

1. Tell them what you’re going to tell them

2. Tell them
3. Tell them what you told them
Intro > body > summary

The tell ‘em method is a framework that’s taught to students to structure academic
papers. It’s simple and effective. It gives presentations a structure that’s easy
to follow.

I use it in nearly every conversation I have with a colleague or formal presentation I

give to a group of stakeholders.

WHY PRESENTING DIFFERENT OPTIONS MATTERS

Some designers take the approach of presenting a single design and trying to
convince the audience that it’s right. I’ve found this makes it more difficult to get
people to agree to something. If your audience only sees one option they tend to
resist it and question your process.

Conversations will drift towards what other options exist and the audience will want
to know why you didn’t explore them. Even if you did explore the other options that
get brought up, your stakeholders are much more likely to follow your
recommendation if they can see the other options you discarded.

I recommend presenting more than 1 design option in your design reviews.

It has many benefits, most importantly for our purposes here is that it:

1. Brings your audience into the decision making process

2. Forces you to have a strong rationale for your design decisions
3. Gives you the chance to make a recommendation
4. Makes it easier for stakeholders to agree with you

UX Storytelling Guide My approach to storytelling

PRESENTING EACH OPTION

Ground each design option you present in why, not what.

This is a common mistake made by both Junior and Senior designers when
presenting their work. They describe the UI instead of telling the story behind the
design.

Here’s an example:
“On this screen I used a list view with a search box and filters on top.”

“Our goal is to reduce the time needed for our customers to perform key tasks in
the admin console. We have data from contact logs and tests telling us that
finding user records is a source of frustration.

A common case is system admins needing to find a specific user so they can
change their permissions. They’re in a rush and it’s a needle in a haystack: 50%
of our customers have more than 10,000 users in their system.

Search and filters make it easy to narrow down and the list view shows enough
data to confirm they’ve found the right user.”

In the first example the designer describes the interface to us.

In the second they tell a story so we understand:

1. Goals
2. The user
3. What they need to do
4. Why it’s hard
5. Why the design they’re showing us is good

This is the real secret to presenting design work. Helping your audience understand
why a design is good or bad is the key to getting stakeholders aligned on design
decisions, shipping great products, and advancing your career.

UX Storytelling Guide My approach to storytelling

ANALYSIS

After options are presented we need to understand how they compare to

each other.

What traits does option 1 have? How does it compare to options 2 and 3?

What impact will the differences have on users?

On engineering costs?

On business outcomes?

The trick here is to summarize the strengths and weaknesses of each option in a
way that’s easily understandable by your audience.

Brevity is your friend here.

To do this, show a simple list of the pros and cons of each option.

The pros and cons are mini-stories for each option. Just like the design options you
presented before, ground the pros and cons in why. Here are some props to help you
determine the pros and cons:

1. Goals. What the business is trying to accomplish.

2. Problems and pains. What is hard about the users life that
the design solves?
3. Risk. These can be usability or schedule risks.
4. Cost. How expensive will the implementation be?
5. Outcomes. Conversion, revenue, etc.

Make recommendations
This is another aspect of design work that’s often missed.

A lot of designers present a range of options and then remain silent while a group of
stakeholders makes decisions about which one to pick.

There are different reasons for this. But the result is always the same: The designer
feels undervalued and becomes unhappy in the role.

The “Why storytelling matters” section touched on problems you’re encountering.

UX Storytelling Guide My approach to storytelling

Making recommendations is a key part of storytelling that eases many of them.

Making solid recommendations that your stakeholders can agree to requires trust,
credibility, and a good story.

All the stuff we’ve been talking about in this guide—everything culminates with the
recommendation.

MAKING THE RECOMMENDATION

Lets recap what you’ve done so far:

1. Built trust and credibility by being organized and having a plan.

2. Communicated context: The business goals, user problems, and any
constraints that might exist.
3. Shown different ways the team can address those problems and
achieve the goals.
4. Deconstructed the pros and cons of each option.

Showing options side by side with pros and cons makes it

easier to compare options and make decisions.

What you should do next is simple. Tell your stakeholders which option you
recommend and explain why. Typically a quick recap of the pros and cons and tying
your recommendation back to goals, problems, and constraints will do the trick.

UX Storytelling Guide My approach to storytelling

If you’ve followed the process so far, your recommendation should result in
1 of 2 things:

1. The group has already arrived at the same conclusion on their own and
happily agrees to your recommendation
2. They disagree and you learn something new that will make the product
better
As long as the overall context (business goals, user problems, constraints, etc) you
designed for and communicated to your audience was correct, your presentation
will end up in one of those two places nearly all of the time.

If it’s #1—yay! You’re good to go and the project moves forward.

If it’s #2? Also yay! Use your listening skills and tools for dealing with feedback to
hear what your audience is saying. Choose a different option if needed. Or, do an
iteration of the designs and review again.

Either way, you’ve:

• Put together a solid story

• Communicated effectively with your stakeholders
• Added to your credibility
• Improved the product

Use high quality visuals

Visual design and aesthetics have the same impact on your presentations as they
do on the products you design. A well designed presentation will be more
trustworthy, effective, and memorable.

“Presentation” does not just mean slides in formal presentations. Even when
presenting from your source file in an informal setting, having well organized
artboards with supporting notes or visuals will boost your credibility and make your
story more compelling.

Never underestimate the importance of visual design. It matters when you’re

presenting from Figma to your PM, or from a 100 slide presentation deck to
your CEO.

UX Storytelling Guide My approach to storytelling

Here are some best practices you can put to use the next time you show your work
to a stakeholder, broken down for 3 types of presentations:

1. Formal presentations from a slide deck

2. Informal presentations from your source file
3. Portfolio presentations for job interviews

FORMAL PRESENTATIONS FROM A SLIDE DECK

Keep it simple.
Stick to 1 idea per slide. This makes the information you’re presenting easy to
digest. It also prevents the pace from being too slow since you’ll be transitioning
from one slide to the next more often.

Remove as much text as possible.

Find yourself reading the text on slides during your presentation? Change the
content on the slide. In general…more visuals, less text.

If you have a slide with a header and 3 bullet points of text, ask yourself if those 3
bullet points can be broken out into individual slides with a supporting visual.

Many slides I’ve presented are a title and a mockup. Many others are only a mockup
or visual. Be as minimal with text as you can get away with.

If the presentation also needs to stand alone, include your talking points in the
slide notes.

Remove fluff.
Use slide transitions and animations sparingly. I never use them. Get to the point
and don’t make your audience suffer through 72 fade transitions.

Use high quality stock photography.

Photography evokes emotional responses and persuades your audience. Make sure
to use photography that’s as authentic as possible. Unsplash is a good resource for
free images, and Stocksy is my absolute favorite when there’s a budget.

Remember your visual design fundamentals.

Consistency, hierarchy, alignment, contrast, and white space matter for your slides
too. If you’re not a strong visual designer, find a well designed presentation
template online and use it.

UX Storytelling Guide My approach to storytelling

INFORMAL PRESENTATIONS FROM YOUR SOURCE FILE

Taking a few minutes to organize the frames or artboards in your source file goes a
long way. It will build trust with your audience and support your story.

You should have a basic story to tell even in the most informal situations. Organize
your design file in a way that supports it.

Make it easy for your audience to follow along.

Is your source file chaotic and disorganized? Tons of explorations, screens, states,
versions, etc.

You and me both.

Pull relevant frames and organize them so they’re findable during your presentation.
This makes it easier for you to present and easier for your stakeholders to follow
along.

You can create a section of your page solely for the presentation or create a new
page altogether and copy the relevant frames or artboards into it.

Focus on 1 thing at a time.

Select the frame you want to look at and zoom to fit. Do not zoom and pan around
too much. This is easy to get caught up in since it’s the way we work in our source
files. But it’s highly distracting to your audience. Go slow.

Take notes in the file.

This isn’t for everyone but it works well for me. As the discussion progresses, I
capture feedback, cross out discarded options, and document decisions in real
time in the file.

This prevents things from falling through the cracks, saves time, and gives your
stakeholders confidence.

PORTFOLIO PRESENTATIONS DURING JOB INTERVIEWS

Portfolio presentations are hard! The pressure and emotion involved can make
them excruciating.

Your goal is to differentiate yourself from the many other portfolio presentations
the hiring team has sat through—not an easy task. In addition to the best practices
we’ve already covered, here are a few ways to do that, specific to portfolio
presentations.

UX Storytelling Guide My approach to storytelling

Have a private, custom presentation for the interview.
Do not walk through your online portfolio or work samples. Websites are typically
not formatted well for presentations and your audience has already seen it anyway.

Remove even more text.

With some exceptions the only text on your slides should be project titles and text in
the actual deliverables that you’re showing. You’re going for an immersive
experience where the visuals support what you’re saying to your audience.

Think Ted talk.

A slide from my private portfolio presentation. The image reinforces the story I'm
telling verbally about working through ambiguity.
Illustration credit: Colin Newlyn (colinnewlyn.com)

UX Storytelling Guide My approach to storytelling

 Use presentation software that has slide notes.
Often times there’s text on slides to remind the speaker what to say. If that’s the
case for you, use presentation software like Keynote that lets you write slide notes
only you can see when you’re presenting.

This takes away the pressure of having to remember everything without cluttering
your presentation with bullets and other unnecessary text.

Lean into imperfection and be positive.

Design projects are never perfect and the hiring team knows this. Don’t feel
ashamed that a project you’re presenting wasn’t “ideal”. Maybe it wasn’t linear.
Maybe it was extremely ambiguous. Maybe you didn’t have resources for all the
research you would have liked. Or time to make certain deliverables.

This isn’t only normal, it’s good. The hiring team wants to see how you deal with
challenging situations!

Avoid anything that might be interpreted as complaining or making excuses.

You’re painting the picture of a challenging situation that you overcame to deliver
a great result.

UX Storytelling Guide My approach to storytelling

 05 Conclusion

Whew! We covered a lot of ground. Thanks for taking the time to make it this far.

I’ve told you about my experience as a UX Designer and the results I’ve seen in my
career from improving my storytelling skills.

Storytelling isn’t a silver bullet that will solve all the challenges you face as a UX
Designer. But it will differentiate you from other designers and get you the same
types of results that I’ve seen in my career.

We learned what storytelling is and when it happens in your work.

We surfaced some of the common problems designers face in their careers.

And we learned how storytelling addresses those problems.

And finally, we covered the 5 step framework I use to tell stories:

1. Know the audience

2. Establish trust
3. Use a story structure
4. Make recommendations
5. Use high quality visuals

I hope this guide has helped you understand how storytelling can improve your work,
products, and career.

Put what you learned to work the next time you present design to a stakeholder
or interview for a job. And please let me know how it goes.

Cheers,

Jeff

UX Storytelling Guide Conclusion

More Storytelling Resources

3 ways I can help you level up your online portfolios

and case studies, private portfolio presentations,
and design reviews at work:

Take my storytelling course

Book a call with me

Subscribe to my newsletter