When it comes to building products, some people might think of content as a final flourish, words on a page or screen that can be written just before launch. But we know thoughtful, consistent interface content is a core element of a well-designed user experience. In this talk, we look at how to incorporate content throughout the design process, including: - Sketching with words - Wireframing the right amount of content - Polishing content in high-fidelity mockups

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

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

5. Documentation ProductMarketing
@bizsanford

6. @bizsanford

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

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

9. Design process
@bizsanford

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

11. Sketching with words
@bizsanford

12. @bizsanford

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

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

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

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

17. Problem scope
@bizsanford

18. @bizsanford

19. Write out new content
@bizsanford

20. Wireframing with content
@bizsanford

21. We never use lorem ipsum
@bizsanford

22. @bizsanford
who me?!

23. Define content elements
@bizsanford

24. @bizsanford

25. @bizsanford

26. @bizsanford

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

28. Prioritize content elements
@bizsanford

29. @bizsanford

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

31. @bizsanford

32. Content in low fidelity mockups
@bizsanford

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

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

35. Don’t do this
@bizsanford

36. Do this
@bizsanford

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

38. @bizsanford

39. Hemingway app
@bizsanford

40. @bizsanford

41. Hemingway app
@bizsanford

42. @bizsanford

43. @bizsanford

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

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

46. Low fidelity still means
high quality
@bizsanford

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

48. High fidelity mockups
@bizsanford

49. @bizsanford

50. @bizsanford

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

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

53. Content throughout the design process
@bizsanford

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

55. @bizsanford

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

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