The document discusses using content strategically throughout the design process. It recommends sketching with specific words, defining content elements and hierarchy, writing realistic placeholder content for low-fidelity wireframes, and polishing the content in high-fidelity mockups. The goal is to improve content fidelity gradually and get feedback from stakeholders and users on the content earlier in the process. Developing content with the same care as visual design elements can help create a well-designed user experience.

1. with Biz Sanford
Words and the design process
DesignTalks

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

4. Documentation ProductMarketing

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

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

8. Design process

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

10. Sketching with words

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

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

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

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

16. Problem scope

18. Write out new content

19. Wireframing with content

21. Define content elements

25. Type Element Output
Link text Customer name Catherine Middleton
Badge Status Open / Closed
Filter Location Minneapolis
Button Edit address —

26. Prioritize content elements

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

30. Content in low fidelity mockups

31. Why it’s important
• Easier and faster to co-design in low fidelity
• You’ll get more robust feedback from peers and users

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

33. Don’t do this

34. Do this

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

37. Hemingway app

40. End-to-end experience
• Touchpoints across the product
• Errors
• Confirmations
• Onboarding

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

42. Low fidelity still means
high quality

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

44. High fidelity mockups

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

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

49. Content throughout the design process

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

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

53. Want a free InVision account?
Get started here: bit.ly/godesigntalks