1.
Words and the
design process
Biz Sanford
@bizsanford

2.
• Build products that help more than 600,000 Shopify
entrepreneurs grow their businesses
• Evolve content standards and Shopify’s voice and tone
• Teach people how to write their own great content
• @bizsanford on Twitter and Medium
Biz Sanford, Senior Content Strategist

3.
Content strategy
Design
Research
Front end development
UX
@bizsanford

4.
Documentation ProductMarketing
@bizsanford

5.
@bizsanford

6.
Thoughtful, consistent interface
content is a core element of a
well designed user experience.
@bizsanford

7.
We’ll talk about
• Sketching with words
• Wireframing with the right amount of content
• Polishing content in high-fidelity mockups
@bizsanford

8.
Design process
@bizsanford

9.
You’ll learn how to
• Improve content fidelity gradually
• Define content elements and determine hierarchy
• Provide sound rationale for your content decisions
@bizsanford

10.
Sketching with words
@bizsanford

11.
@bizsanford

12.
Content you need
• Headings
• Button text
• Key nouns and verbs
@bizsanford

13.
• YES: Create discount code
• NO:
Use headings
@bizsanford

14.
Say exactly what buttons do
• YES: Share
• NO: Submit
@bizsanford

15.
Use key nouns and verbs
• YES: Add package
• NO: Edit package
@bizsanford

16.
Problem scope
@bizsanford

17.
@bizsanford

18.
Write out new content
@bizsanford

19.
Wireframing with content
@bizsanford

20.
We never use lorem ipsum
@bizsanford

21.
@bizsanford
who me?!

22.
Define content elements
@bizsanford

23.
@bizsanford

24.
@bizsanford

25.
@bizsanford

26.
Type Element Output
Link text Customer name Farai Madzima
Badge Status Open / Closed
Filter Location Minneapolis
Button Edit address —
@bizsanford

27.
Prioritize content elements
@bizsanford

28.
@bizsanford

29.
Before you prioritize elements
• Look for connections between elements
• Think about tasks users are doing
• List out business priorities
• Consider how patterns will come into play
@bizsanford

30.
@bizsanford

31.
Content in low fidelity mockups
@bizsanford

32.
Why it’s important
• Evoke different feelings compared to high fidelity mockups
• Set better expectations for where you’re at in the design process
• Easier and faster to co-design in low fidelity
• You’ll get more robust feedback from peers and users
@bizsanford

33.
Use realistic content
• Pull anything from sketches that worked well
• Replace squiggly lines
• Write a solid first draft
• Avoid placeholder content
@bizsanford

34.
Don’t do this
@bizsanford

35.
Do this
@bizsanford

36.
How to create realistic content
• Task: What they need to do
• Benefit: What they will get out of it or how it helps them
• Messaging hierarchy: Prioritize most important messages
• Terminology: Nouns, verbs, etc.
• Emotions: Any stress cases to account for
@bizsanford

37.
@bizsanford

38.
Hemingway app
@bizsanford

39.
@bizsanford

40.
Hemingway app
@bizsanford

41.
@bizsanford

42.
@bizsanford

43.
End-to-end experience
• Touchpoints across the product
• Errors
• Confirmations
• Onboarding
@bizsanford

44.
Low fidelity mockup content
• Define content elements, prioritize, and review with stakeholders
• Use real content
• Think about the end-to-end experience
@bizsanford

45.
Low fidelity still means
high quality
@bizsanford

46.
Real talk
• Adjust these techniques based on project and scope
• Remember why you’re doing all of this in the first place
• Real world is more messy than a step-by-step process
@bizsanford

47.
High fidelity mockups
@bizsanford

48.
@bizsanford

49.
@bizsanford

50.
Editing tips
• Make sentences short (no more than 15–20 words)
• Choose a short, simple word over a long and complicated one
• Remove unnecessary or repeated words
• Read the content out loud
• Edit on small screens first – constraints can help you focus on the
most important message
@bizsanford

51.
Polish reviews
• FED, content, design, product manager
• Typos, spacing problems, etc.
• Anything unexpected
@bizsanford

52.
Content throughout the design process
@bizsanford

53.
What we talked about today
• Sketching with specific words
• Defining content elements and content hierarchy
• Writing realistic content
• Polishing content in high-fidelity mockups
@bizsanford

54.
@bizsanford

55.
We’re hiring!
Reach out on twitter – I’m @bizsanford
Check out shopify.com/careers

56.
@bizsanford
ux.shopify.com
Thank you!