Copywriting for UX

If you like this presentation – show it...

Slide 0

Copywriting for UX Talisa Chang | @talisa

Slide 1

What people ask designers: Can you make this look better?

Slide 2

What people ask copywriters: Can you make this sound better?

Slide 3

What they mean in both cases: Can you make this experience intuitive and compelling for the person who will be using it?

Slide 4

My background Hats I’ve worn: • UX Designer • UX Researcher • Copywriter • Product Marketing Manager • Brand Consultant • Brand Manager • Digital Strategist • Content Strategist • Reporter • “Talisa-fier” • “All of the words” +

Slide 5

Like design, copy is more than the sum of its parts words. Brand Desirability Usability Utility

Slide 6

Considers the user Just like good UX, good copy… Who’s reading this? What background knowledge do they have? What are their goals? What are their pain points?

Slide 7

Considers the context Just like good UX, good copy… Where are they physically? What device are they using? Are they in a rush? Have they been to this page/screen before? How often?

Slide 8

Just like good UX, good copy… Considers the flow What did they do before this? What can they do next?

Slide 9

Just like good UX, good copy… Considers the business goals Ideally, what would we like them to do?

Slide 10

Just like good UX, good copy… Considers the brand How do we want the overall experience to feel?

Slide 11

Where do all the words go?

Slide 12

Where do all the words go? • Interfaces • Landing pages • Emails • Navbars • Empty states • Blog posts • Drop downs • Onboarding • App store descriptions • Form fields • Coach marks • Social media posts • Tool tips • Confirmation pages • Social media ads • Error messages • Support articles • Press releases • Loading screens • Product videos • Style guides • Settings pages • Call scripts • etc.

Slide 13

Wait, so who is supposed to make/write all this stuff?

Slide 14

If you are lucky… A few people whose explicit job is to write it (content strategists, copywriters, email marketers, etc.) … who have created and/or are following guidelines for how to write it … and are in constant communication with designers, engineers, support, marketing, sales, etc. … to ensure there is a consistent, cohesive narrative to the experience

Slide 15

But at a lot of places, it’s... ● ● ● ● Designers, kind of Someone from marketing, sometimes Whoever is the best speller on the team Whoever happened to bump the fidelity from lorem ipsum → real words ● Whoever realized copy was needed somewhere and put it there as they were making it (probably a developer)

Slide 16

How to write thoughtful copy

Slide 17

Good copy reduces ambiguity ● It’s specific ● It’s readable at all viewport widths ● It’s concise ● It’s contextual ● It’s consistent ● It labels objects clearly ● It speaks in plain language (no jargon)

Slide 18

Good copy puts the audience first ● Considers the context and flow (use personas, user journeys, and user flows) ● Considers goals and motivations ● Offers actionable information ● Explains why, not just what ● Is translation-friendly

Slide 19

Good copy is well-researched ● Research conventions ● Ask your subject matter experts ● Ask your community members ● Put it in your (early) prototypes ● Put it in your usability tests ● Test it in emails ● Card sort it ● A/B test it

Slide 20

Good copy is well-researched ● Research conventions ● Ask your subject matter experts ● Ask your community members ● Put it in your (early) prototypes ● Put it in your usability tests ● Card sort it ● A/B test it ● Test messaging with email

Slide 21

PSA: No one reads on the internet.

Slide 22

So make it count.

Slide 23

Especially when…

Slide 24

...the stakes are high ● ● ● ● ● ● ● ● ● CTAs Navigation Instructions Errors Important forms and documents Customer support Privacy concerns Things that cost money Any situation where users are willing to read

Slide 25

… the stakes are low ● ● ● ● Loading screens App store update copy Non-critical notifications Any place you can push the brand voice without risking clarity

Slide 26

Extra words or explanatory text can’t “fix” poor UX. But copy can help make good UX even better.

Slide 27

How copy gets created

Slide 28

With spreadsheets and google docs Email Spreadsheet Onboarding flow Hi {Name}, Your call for Wednesday January 4th at 12pm is confirmed! Please [review your welcome packet] before hand and be sure to be at your computer. [Review the packet] Looking forward to speaking with you, Support Team Google doc with body copy

Slide 29

Using spreadsheets Basic Process ● Designer or product manager creates a content spreadsheet in google docs ● Add columns for states, errors, tooltips, versions, etc. ● Copywriter and various stakeholders can fill out Benefits ● Allows you to organize a lot of copy ● Flexible: can link out to other docs if necessary, colorcode columns, merge sections, etc. ● Engineers can see all states, errors, tooltips, etc even if they’re not represented in the design ● Same commenting features as all google docs

Slide 30

Using InVision comments Basic Process ● Designers upload wires to InVision via Dropbox ● Copywriters use comment feature to suggest copy ● Designers update copy and re-sync via Dropbox Benefits ● Copy edits can be placed directly onto the design ● Commenting feature allows for questions, feedback, etc. (participants get email notifications) ● Easy to share with stakeholders for review; no account needed to view or comment ● Already set up to test prototype with user ● No different versions of marked up pdfs floating around

Slide 31

Using Google docs Basic Process ● Put screenshots of designs that need new copy into a google doc (and label them/explain where they are in the flow) ● Write/suggest new copy underneath ● Protip: highlight the actual interface/UI copy in a separate color Benefits ● Quick and dirty ● Plenty of room to add additional copy (states, errors, etc) ● Team members can easily comment, suggest edits, see revision history, etc

Slide 32

Notes on process ● As soon as you know you need words, start thinking about how and when they’ll be created and finalized. As a designer, it’s your job to care about copy ● Don’t wait for a finished mock up. Let copy start anywhere, with anyone. (The sooner, the better) ● Get organized. Make simple checklists, schedules/deadlines, and spreadsheets as needed. ● Involve product managers to help keep things organized, but *stay close to the process*

Slide 33

Notes on process, cont ● Requests to the person writing copy should always include context (full screenshots and/or screen flows, word counts, goals, translation deadlines, etc) ● Allow time for revisions, especially if the initial copy lives outside of the design in a doc ● Consider the brand. Work with your marketing team. ● Consider the implications. Work with your customer support team. ● Consider the flow and functionality. Work with your engineers/designers/product owners. ● No waterfalling! Pair copywriters with designers throughout the process.

Slide 34

Brand, style, and content guides

Slide 35

Brand Positioning The result of business and brand research, stakeholder interviews, workshops, etc. Could be used internally or externally. Could be created by an in-house marketing team or by an agency. Could be robust and polished, or brief and in a google doc. May include: brand pillars, mission/vision statements, about us copy, key messaging, naming and lexicon, etc. brand.quantcast.com

Slide 36

Content Guides The result of collaboration between marketing, product, and other stakeholders Can serve as a guide across teams (sales, customer support, etc) Should be actionable and include specific examples, do’s and don’ ts May include: voice and tone, grammar rules, capitalization rules, naming and glossaries, do’ s and don’ts, etc.

Slide 37

MailChimp: The Content & Copy Pros | http://voiceandtone.com | http://styleguide.mailchimp.com

Slide 38

18F: Made for the federal government; a great starting point for you | https://pages.18f.gov/content-guide/

Slide 39

Product + Marketing = Product Marketing ● The glue between product and marketing ● Sometimes a dedicated role or team, sometimes just a process ● Helps ensure the story of your product or feature is told externally (blog posts, press outreach, support faqs, app store copy, etc) ● Helps ensure the story is reflected in the product (interfaces, error messages, notifications, etc) ● May entail: launch checklists and copy processes, messaging docs, brand positioning, market research, new naming, email or blog copy, social media strategy, pr plans, app store copy

Slide 40

I need a copywriter. Can I hire you?

Slide 41

Just like good UX, good copy is not just a role you can hire for and be done with.

Slide 42

How to get started at upping the copy game at your organization:

Slide 43

1. Figure out what you need. Content strategy? Style guidelines? Consistent naming and language? Taxonomy/lexicon? A unified voice and tone? Brand positioning/messaging? Interface copy? Landing pages? Translations and localized copy? Onboarding emails? Transactional emails? Lifecycle emails?

Slide 44

2. Figure out how (or by whom) it’s getting done today and what the biggest priorities and gaps are. It’s probably a combination of people in marketing or product. At a minimum, it’s whoever is writing the copy now, and/or whoever is signing off on it.

Slide 45

3. Make a commitment to make copy part your design process and start asap. This may require upfront work (developing guidelines, messaging, etc). It will also mean making changes to how things currently get shipped. It won’t happen overnight. But you’ll be very happy you did it.

Slide 46

4. Hire accordingly and keep iterating. Don’t hire until you have a sense for what you need. Don’t hire until you’re ready to make some changes to your processes.

Slide 47

Talisa Chang is an interdisciplinary product and UX consultant. Find her on Twitter, Linkedin, Medium, or her website.

Slide 48