Content-first Design by Steph Hay

CONTENT-FIRST
DESIGN
@STEPH_HAY

2 minutes:
Double Up
Tell each other the top
question you hope this
workshop answers

A business problem we
face on a daily basis is
failing to communicate
clearly with each other

She’s looking quite happy here
Meet my mom
4

1
Joy!
We said “yes”
to the dress
2 4
53
We went shopping in Savannah one day
“Declined”
Frustration,
embarrassment,
confusion
“Another?”
Asked the person
behind the cash
register
Call Center
Lifts the
“restriction”
meant to protect
Purchase
Except without
the same joy this
time around
Meet my mom
5

6
“We’re protecting you from fraud.”
“But you declined me from myself.”

7
The words we use alienate,
infuriate, and confuse.
They also comfort, delight, build
trust, and connect us.

2
We designed a better interaction — one with fewer touch points, fewer words, and more positive conversations?
“Confirm”
Mom verified the
purchase via text
or email
Wouldn’t it be great if…
8
1
Joy!
We said “yes”
to the dress

He’s so dang great
Meet Lloyd Morrisett
9

1
Purchase
She said “yes” to
several items
that day
2
The outcomes of nailing our story first and designing for conversations as they happen
“Confirm”
Lloyd verified the
purchases via
email
How do we know it’s better?
11

12
Words are our lowest-cost,
lowest-risk way to design.
If only we’re brave enough to
say “YES! THEY MATTER!” and
design with them and for them.

“They” don’t get the “benefits”
We need to “teach” the customer
Tool tip!
demoVIDEO!NOTIFI-
CATION!
EMAIL!
Gamify!!
Tagline!
Rename it

“Iterate!”
Understandability v. usability

We need to teach
ourselves the language
our customers use.

We already have a strong foundation for design
Design Thinking
Make something people need
What people need What the business has

We make it stronger by isolating the language we use to communicate
Content Thinking
Make something people understand they need
what they need
How people talk
about
what it has
How the business
talks about

What’s the top question
people ask—in their own
words?

“Am I ok?” —>
“Why didn’t you tell me?”
Call center volume

05
Building trust with words in an email, creating a conversation over time
Second Look

“Thank you for
looking out for me!!!!!!!!”

Nail your story NOW
Actually, right now (not later) IS the time to
decide exactly what to say, when, how,
and to whom — or if we should say
anything at all
1
2
This is old hat to
Hollywood and the video
game industry, BTW
Pair with others to iteratively research, write, edit, and design a conversation BEFORE there’s an interface
Content First works if you jump in feet first to…
27
Design for discovery
What’s delightful—AND deepens the roots of
learning/engagement—is discovering things
for ourself. Design for THAT to happen, and
have a clear metric to analyze IF it’s
happening

Use ADesign a conversation that
answers questions BEFORE
people ask—and
in their own words.
Rinse + repeat.

T
THIS IS HOW CONVERSATIONS
HAPPEN IN REAL LIFE.

Conversation Mapping
Capture the conversation as it actually
happens in real life
1
2
Create a Google Doc and
share it with
steph@stephaniehay.com
Pairing with others to iteratively research, write, edit, and design a conversation BEFORE there’s an interface
Workshop Agenda
31
3
MadLibs + Content Prototyping
The full-on experience, designed with
words, almost like a Choose Your Own
Adventure book. A script you could use in
testing

Specificity is vital to
understanding.
Conversation Maps get us to
specificity so we design better
experiences.

May I please have a volunteer?

“Am I ok?”
“What do you
mean by ‘OK?’”
Generic start

“Right.”
“I’m not going
OVER, right?”
“Great, that’s all I
needed to know.”
Specific end

“I want to [see if I’m OK].”

Va[See how much money I could
save or spend right now.]

Va PS: There’s an app for that.

Who should we market this to?
BTW, what did you learn about me?
40
woman
first-time
home
owner
engaged to
be married
credit card
not carrying
balance

Va Could we use call center
conversations as data to design
better digital experiences?
(HECK YEAH WE CAN!!!!)

Person 1
Person 2
…
Specificity for
functionality

You need to fly (solo) from Point A to Point
B and want to take Virgin, so you called
them.
2
share it with
Here’s the scoop…
Conversation Mapping together (15 mins max)
43
1
You’re a Virgin America call center agent
who just answered a call from Person 2.
3 Someone’s the scribe. Create a numbered
list in a Google Doc. Every odd number =
what Person 1 says. Every even number =
what Person 2 says. Document the
conversation from start to finish.

Capture the conversation
between a traveler who’s trying to
book a flight with a Virgin call
center agent.

Va Now let’s translate that call center
conversation into a content
prototype that could become a
digital experience of some type.

How could we capture someone’s “booking” details in sentence form?
Kickstarting your prototype with MadLibs
47
“My name is [first name] [last name],
and I want to [do something].”

48
“My name is [Steph Hay], and I
want to [know how much
money I can safely save or
spend right now].”

2
share it with
Content Prototyping together
49
3
1
MadLibs-style statement(s) to get
someone inputting data within a
conversational form

Write a sentence designed to
capture travel details so you can
provide a specific [set of flights].

51
“My name is Stephanie Hay, and
I’d like to depart Dulles early
enough on 9/4 to arrive in
Barcelona by 8 PM on the same
day."

52
day."

“My name is Stephanie Hay,
and I’d like to depart Dulles
early enough on 9/4 to arrive
in Barcelona by 8 PM on the
same day."
53
1
conversational form
What’s the language you’d use to initiate
the request to process that information?
2

54
early enough on 9/4 to arrive in
Barcelona by 8 PM on the
same day.” NOW WHAT??
Content Prototyping to design for flow

Write the language to initiate your
providing a specific [set of flights].

56
day. Do you have any flights?”

1
2
57
conversational form
3 How should we confirm their “booking?”
early enough on 9/4 to arrive
in Barcelona by 8 PM on the
same day. Do you have any
flights?”

Write a confirmation designed
specifically to make your
traveler’s trip better.

Holy cow, now we’re capturing conversations across time and channels
Content Prototyping together
59
Subj: You’re flying on 9/4 at 10:15 AM from Dulles to Barcelona
Msg: Hi Frank,
Use Confirmation Code UN1CORN when checking in for your flight from Dulles to Barcelona on 9/4
at 10:15 AM ET.
You’ll arrive in Barcelona at 4 PM local time, and temperatures average about 74F during the day
and 50F at night there. Better pack a sweater!
BTW, here are more packing tips to move quickly through security.
Working hard to make your travels painless,
Debbie at Virgin

“That’ll never scale/get past
legal/brand/product/tech/ops/
compliance.”

1
2
61
3
conversational form
3
WRENCH! Pick one:
A. Most people buy 2+ seats at a time
B. Virgin doesn’t have flights available
C. Flights on this route get delayed more
often than average
How should we confirm their “booking?”
4
“Great, you’re all set to jet
using [confirmation code?].
Your receipt is in your inbox,
and we’ll text and email you if
your flight is delayed.

How would your content designs
change in these use cases?

Content-first design applies to
projects at ANY stage of their
lifecycle.
Working in this way isolates the
language of our experience.

69
Tactic #1: Read it out loud, from
end-to-end.
If you feel fake, or you uncover
missing details, it’s not
conversational enough yet.

70
Tactic #2: “Now You Can”
Start sentences with these 3
words. Finish the sentence.
Remove the 3 words.
What’s left is all we need to say.

71
Tactic #3: Axe Trigger Words
Simple, Easy, Quick,
Fast, Just, Only, Awesome
These are outcomes, not
features. When we design great
experiences, our customers say
these words. (Not us.)

Conversation Mapping
Capture the conversation as it actually
happens in real life
1
2
Proof of your hard work is
in the Google Doc you’ve
shared with
Pairing with others to iteratively research, write, edit, and design a conversation BEFORE there’s an interface
What we covered today
72
3
MadLibs + Content Prototyping
The full-on experience, designed with
words, almost like a Choose Your Own
Adventure book. A script you could use in
testing

CONTENT
PROTOTYPING, FTW
@STEPH_HAY

How could we design an entire experience in a text file?
Ideas App!
74

How could we design an entire experience in a text file?
Ideas App!
75

Content-first Design by Steph Hay

Recommended

Recommended

More Related Content

Similar to Content-first Design by Steph Hay

Similar to Content-first Design by Steph Hay (20)

Recently uploaded

Recently uploaded (20)

Content-first Design by Steph Hay