How to mock up UX writing for better collaboration
A picture is worth a thousand UX words.
They say a picture is worth a thousand words.
That holds true for words in UX writing, too!
Yes, if you’re a UX writer, your expertise is words. But you work in a visual medium. Customers will see your words in the context of a UI design, not as lines of text on a blank screen.
Why mock up words?
I’m not suggesting that you always mock up your UX writing. But there are times when a mockup of your work can help you collaborate better with your partners.
A few reasons to mock up your UX writing work:
- So your reviewers can give better feedback, because they can see your work in context
- So you can strengthen your argument for using more text or less text (usually it’s less text)
- When an engineer needs to fix a string, you can show them exactly where the string appears
- To minimize confusion over where your text shows up
- In general, to shorten and strengthen the collaboration process
Here are four methods I use myself to mock up UX writing.
Skitch
My Dropbox colleague and UX writing superstar, John Saito, introduced me to Skitch. It’s a super-easy way to annotate an image with arrows, text, and simple shapes. You can also pixelate content to hide confidential information. Get Skitch (Mac only, free from Evernote).
The image below shows the Skitch arrow, text, shape, and pixelate tools:
Keynote, PowerPoint, and Google Slides
Programs like Apple Keynote, Microsoft PowerPoint, and Google Slides are quite useful in mocking up UX writing!
I have a Keynote “sandbox file” where I compose my work. It’s easy to create layers, blank out sections of a screen, and precisely place updated text. You can also quickly create and organize multiple slides to save “before” and “after” versions or multiple explorations.
The image below shows a Finder menu, copied to two proposals, original name blanked out, and replaced with alternative names:
Web browser “design mode”
Did you know you can edit any web page right in your browser window (at least you can in Chrome and Safari on Mac)? When someone first showed me this, it kinda blew my mind.
Here’s how to get it:
- Save the following text as a browser bookmark:
javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0
Note: the quotes enclosing ‘true’ and ‘on’ should be straight quotes, not curly quotes. You’ll need to change this on your own. - Go to the web page you want to change.
- Select the bookmark from step 1.
- Click the text you want to change and start typing!
This method is convenient when you want to mock up a simple text change to a live design.
The image below shows how I select the “Design mode” bookmark on my live Dropbox page and then replace Home with Jennie’s Happy Place in the sidebar.
Figma or Sketch
Lastly, you can mock up UX writing with a full-fledged designer tool, like Sketch or Figma.
While this is the most advanced (and time-consuming) of the four methods, it lets you meet your designers where they are, using the app they use.
If the designer you’re collaborating with has a Figma file of the project, ask them to create a sandbox area where you can do content explorations (so you’re mocking up in their file). Or make a copy of their file in your Drafts folder (so you’re mocking up in your own file).
If no design file exists yet, fear not! You can start from scratch by searching for UI kits on the web.
For example, I downloaded the macOS Sketch files, imported them into my Figma Drafts folder, and then mocked up a new alert message.
The image below shows the macOS alert pattern copied into my Figma draft file called “Jennie’s Sandbox of Wonder” and then updated with new text:
Screenshot and archive everything
OK, so you’ve done all this work to mock up your UX writing. Shouldn’t you now save it for posterity? Or at least so you can reuse your work for future projects?
I can’t tell you how many items I get handed a new project and think, “Wait a minute, I did this kind of work a few months ago, I can just reuse what I did, if only I can find it…”
If it’s in your “everything doc,” then it’s easy!
It’s pretty simple: every time you mock something up, take a picture of it and throw it in your everything doc.
My everything doc is just a simple Paper doc of screenshots, reverse-ordered by date (so the newest screenshot is at the top). I’ll type the actual UX copy right below the screenshot so it’s easier to search for. That’s it.
Get in the habit of archiving your work, even if it never sees the light of day. You never know when a project might come back to life. And if it does, your copy will be all ready to go!
Steer your career
As with my previous articles, I want to end this one with a reminder to #steeryourcareer.
By following the suggestions in this article, you can:
- Mock up your UX writing work to collaborate better with your partners
- Count on an “everything doc” for easy reuse of your work
- And lastly, use your everything doc as a ready source of writing samples for your portfolio
In the words of The Office’s Michael Scott, that’s what I call a win-win-win! 😁
Thanks to Andrea Drugay, John Mikulenka, and Michelle Morrison for their help in putting together this article.
Want more from the Dropbox Design team? Follow Dropbox Design on Medium, Twitter, and Dribbble. Want to make magic together? Check out our open positions!
