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 mom4

1Joy!

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 CenterLifts the

“restriction” meant to protect

PurchaseExcept without

the same joy this time around

Meet my mom5

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

1Joy!

We said “yes” to the dress

He’s so dang great

Meet Lloyd Morrisett9

05

10

1Purchase

She said “yes” to several items

that day2

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!

demo VIDEO!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?”

“Am I ok?” —>

“Why didn’t you tell me?”Call center volume

“Guardianship”

05

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

Second Look

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

“Second Look”

05

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

Second Look

Nail your story NOWActually, 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 discoveryWhat’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 MappingCapture the conversation as it actually happens in real life

1

2

Create a Google Doc and share it with

[email protected]

Pairing with others to iteratively research, write, edit, and design a conversation BEFORE there’s an interface

Workshop Agenda31

3

MadLibs + Content PrototypingThe 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?

Generic

Specific

“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

womanfirst-time

home owner

engaged to be married

credit cardnot 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.

2Create a Google Doc and

share it with [email protected]

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.

mailto:[email protected]

Capture the conversation between a traveler who’s trying to

book a flight with a Virgin call center agent.

Examples as they happen!

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 MadLibs47

“My name is [first name] [last name], and I want to [do something].”



“My name is [Steph Hay], and I want to [know how much

money I can safely save or spend right now].”

2Create a Google Doc and

share it with [email protected]


Content Prototyping together49

3

1MadLibs-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].



“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."




enough on 9/4 to arrive in Barcelona by 8 PM on the same

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

1MadLibs-style statement(s) to get someone inputting data within a conversational form


Kickstarting your prototype with MadLibs

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


enough on 9/4 to arrive in Barcelona by 8 PM on the same day. Do you have any flights?”



What’s the language you’d use to initiate the request to process that information?

1

2

57

MadLibs-style statement(s) to get someone inputting data within a 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 together59

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.”

What’s the language you’d use to initiate the request to process that information?

1

2

61

3

MadLibs-style statement(s) to get someone inputting data within a conversational form

3

WRENCH! Pick one: A. Most people buy 2+ seats at a timeB. Virgin doesn’t have flights availableC. 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.



If [this], then [that]

How would your content designs change in these use cases?

HOORAY YOU DID IT!!

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 MappingCapture 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 [email protected]

Pairing with others to iteratively research, write, edit, and design a conversation BEFORE there’s an interface

What we covered today72

3

MadLibs + Content PrototypingThe 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