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. We start with the role of content in sketching and work our way up to polishing content in high fidelity mockups.

1. Words and the
design process
Biz Sanford
@bizsanford

3. Documentation ProductMarketing

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

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

7. Design process

8. You’ll learn how to
- Improve content fidelity gradually
- Map content elements and determine hierarchy
- Teach designers a content-first approach
- Provide sound rationale for your content decisions

9. Project lifecycle

10. Project lifecycle

11. Sketching with words

13. Content you need
- Headings
- Button text
- Key nouns and verbs

14. Use headings
YES: Create discount code
NO:

15. Say exactly what buttons do
YES: Share
NO: Click here

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

17. Problem scope

19. Write out any new content

22. Wireframing with content

24. Define content elements

27. Type: Link text
Element: Customer name
Output: Catherine Middleton

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

29. Type: Filter
Element: Location
Output: Minneapolis

30. Prioritize content elements

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

34. Content in low fidelity mockups

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

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

37. Don’t do this

38. Do this

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

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

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

44. Low fidelity still means high quality

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

46. High fidelity mockups

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

49. Teach people how to
- Look at designs from a content perspective
- Spot content inconsistencies
- Provide suggestions to improve content

50. Content throughout the design process

52. What we talked about today
- Sketching with specific words
- Defining content elements and content hierarchy
- Wireframing with content
- Polishing content in high-fidelity mockups

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