UX writing samples
Crafting microcopy is one of my favorite parts of UX Writing. I love creating tiny lines of warm text.
Below are user flows and pivotal moments that offer guidance and human connection.
VistaPrint
Logomaker
Product
A logo is the face of a business. But not every business owner can get a custom logo design.
Logomaker by Vista is an AI-assisted logo generator that helps small business owners create custom logos from hundreds of professionally designed graphic assets.
Role
UX content designer. I wrote the screen titles, wizard questions, button copy, empty states and labels in collaboration with the product designer.
I also contributed copy-related questions to our user research and produced the job story.
Job story
People who use VistaPrint want a professional and unique logo they can immediately add to business cards, t-shirts and social media posts.
Small business owners want to promote their brand with a recognizable logo. Most business owners know where they want to see their logo. They are less likely to know how to describe a logo's design elements.
Design decision
Myra (the product designer) and I designed a short and effortless wizard to help users imagine the details of their logo before they jump into design.
To create a wizard that feels effortless, we only ask 5 relevant, easy questions. The answers are relevant because they influence the gallery of recommended logo designs. The questions are easy because small business owners are accustomed to sharing basic details about their brand.
We omitted verbal questions about color, visual style and font. Our target audience felt unsure of how to describe visual elements. We found the gallery better supported these kinds of decisions.
Empty state
This Favorites side-bar appears in the logo gallery.
This empty state appears if a user opens the Favorites side-bar before they tagged any favorite logos.
To make a useful empty state, I wrote UI copy to let the user know:
-
What’s going on (Heading)
-
What they can do about it (Body copy)
The headlines on this side-bar tell the user what is up. Since most folks understand the pattern of "Favorites," I relied on the body copy (which is lower in the hierarchy and therefore supplimental information) to helps the user "resolve" the empty state.
Filter labels
Internal consistency
Humans crave predictability and consistency. In addition to emotional safety, consistent language supports comprehension. To support VistaPrint's users, I chose filter names that appear in the design studio and elsewhere in VistaPrint's UI. This is why I used the word "Graphics" instead of "icons" or "logo mark."
Sentence casing
Typically, I advocate for sentence casing. Sentence case is more accessible and easier for people to read quickly. That's why "Change info" is not given title casing: "Change Info."
However, feature categories, like product categories, are capitalized at VistaPrint. I capitalized "Layouts" and "Graphics" to kept the title casing consistent with the design studio and VistaPrint's content guidelines.
Keep it short for Mobile
To keep the filters fully visible on Mobile and Desktop, I omitted prepositions and chose shorter words and phrases.
For example, "Change business information," is too long to fit visibly on the button. Luckily for me, VistaPrint's voice is a friendly business partner. The informal shortening of "info" fit the brand voice. "Change info" strikes the the right balance of character count, clarity and brand voice.
Custom sticker studio
Product
VistaPrint's custom sticker studio lets anyone turn an image into a custom sticker, including die cut stickers. (Die cut stickers are individually cut into any shape.)
Sometimes, the system is unable to generate a custom cutline. How do we help the user in this situation?
Role
As the UX writer for this project, I revised the error message and its delivery. I contributed a friendly toast notification that supports the user.
I identified the right emotional tone and information to help our user create a custom cut line.
Error message
While creating a custom sticker, a user might select a custom cutline, but the system unexpectedly defaults to a square cutline.
The system has a good (and very technical) reason to do this. Do we need to explain the system to the user? Which info does the user need to meet their goal?
Original error message
A good alert provides information the user needs to finish their task.
The original message said:
"We could not generate the custom cutline for your product because parts of the image are too far apart from each other which would result in partial stickers. Connect with our Customer Care to get help for free."
It's a long way to describe exactly what's happened. Sure, it's interesting, but this info doesn't help the user achieve their goal: make a custom, die cut sticker.
Instead of helping the user resolve the error message, the interface tells the user to leave the sticker flow and enter the help flow. Effectively encouragiing the user to abandon their project.
Revised as a toast notification
To understand the limitations of the system, I played around with the Sticker studio.
It turned out that users have 3 options to complete their task:
1. chose another cutline,
2. change the sticker size or
3. pick a different sticker image
I wrote a toast notification that helps users get the sticker cut they want with the tools available in the sticker studio by listing the actions they can take to get a custom cutline.
Photo preview
Product
Photo Preview allows users to view a gallery of print products with an image (or images) of their choice.
Photo Preview helps users select design templates that match their image earlier in the shopping flow.
Role
Content designer
For this experience, I crafted clear and friendly UI copy including explainer text and button copy.
Conversational UI copy
Short, conversational UI copy. A list of accepted file types is a common pattern that can often feel robotic or stilted. "Upload images with the following file extensions: ..." is longer than, "Accepted file extensions:..." I chose this phrase because it feels closer to how I'd say it to a friend.
I'm less certain about my choice to use technical language, "file extensions." Less technical users are likely to Google something they don't understand. I found that "file extensions" returned better search results than other versions. I'd like to validate how users feel about "file extensions" versus shorter and more casual phrases "file types" or "file format."
Airbnb
Guest travel insurance
Product
Airbnb guests can insure their reservations against certain risks. Travel insurance is a highly regulated industry that requires visible disclosures.
I partnered with the legal and product teams to balance good design and low legal risk.
Role
As one of two UX Writers, I rewrote legal disclosures with a casual voice and warm tone. Placed the disclosures throughout check-out, confirmation and cancellation flows for the EU, UK and US markets.
1st draft
First draft. For the initial draft, I chose words that fit the Airbnb voice and tone (conversational, welcoming).
You can see I changed very little of the traditional legal disclosure structure.
2nd draft
I simplified the block of text by grouping the info based on user's needs.
I created useful blocks of text by breaking up the disclosure into sections.
Descriptive headlines are presented in bold to support scanning.
Generous paragraph breaks give the eye room to rest.
Final draft
After several sessions of collaboration with the Legal team, I distilled the message to 3 lines of essential text that link to a page where users can find the full disclosures.
For this project, I preserved the legal intention and improved readability of the disclosure by swapping legal phrases with plain English.
We were able to reduce both the character count and the legal risk by linking the shorter disclosure to a page that serves the full legal disclosures.
