Context: The following is based on true events
This case study illustrates my final project for the UX writing certification I earned through the UX Writers Collective.
My task: Complete user-interface edits for the fictional Handshake app. Handshake makes billing and project tracking easy between freelancers and business owners.
My role: I was the UX writer on the fictional Handshake product team. The team counted on me to develop and apply the app’s voice and to advise on information architecture and hierarchies.
Challenge: Ready UI text for a final design review
A big design review with the Head of User Experience and the VP of Product fast approached. In anticipation, my design teammate sent me mockups of screen flows for two user types with a copy SOS. I needed to edit the UI text to get it "user-ready," or rather ensure we were delivering a clear, concise and useful conversation between Handshake and our users.
Solution: Define and apply voice while easing friction
Finding the right solution for the UI text built over weeks. The solve began during the discovery phase of the design process when we met our target users.
Discovery: Understand target users
My user research teammate shared two guiding personas. I met Kelly Chan, a 24-year-old tech-savvy freelance web developer, and Tom Stewart, a 62-year-old tech-newbie small business owner. Tom had hired Kelly to redesign his business website.
To start building a product voice, I expanded on the persona research. I searched online to learn what words Kelly and Tom would use while collaborating. Despite their different backgrounds, goals and frustrations, I discovered a shared vocabulary.
Ideation: Outline and cultivate a product voice to support users
Team brainstorming furthered my understanding of our users' journeys and their critical tasks. With a better grip on user needs, I set out to define the product voice. To deliver a meaningful voice, I gained different perspectives from my teammates. Each team member shared their thoughts on product personality via a Mad Libs card.
From this collaborative work, I extracted and presented five voice attributes.
To help the team adopt this voice, I wrote and shared sample Handshake taglines.
During initial sketching, the Designer and I exercised voice in onboarding-tour screens. I wrote headline and body text pairs, aiming to offer a warm and helpful welcome. I communicated the app's handy and reliable features through amiable and playful copy (character constraints: headline (20) and body text (40).
Then, I mirrored this approach to edit a Handshake landing page for the Product Manager.
Before:
After:
As I completed these tasks, I documented preferred terms further shaping the voice. These terms started to form the app’s style guidelines.
Design: Put voice into action in high-fidelity mockups
When mockups landed from design with a copy SOS, I was prepped. I had the user understanding, team input and defined voice needed to push copy to user-ready.
1) Sign-in
My task: Help users understand the app’s benefit as well as what they need to do and where they’re going next. Weave in voice, tone and style.
My action: On the Welcome screen, I turned the subtitle into persuasive copy about the app’s benefit. Then, to help users proceed confidently, I introduced microcopy, error messages, hint text and legal text. Throughout, I minded the Handshake voice to start an amiable, handy conversation with users.
Additionally, I recommended new fields to capture critical user data to help personalize the app experience. To ease friction for return-users, I suggested new sign-in interactions, such as a reset password link.
Orange text equals text edits. Purple text represents comments for the Designer.
2) First-time setup
My task: Anticipate friction points and ensure users have enough information to complete setup successfully. Determine the right parity between Business Owner and Freelancer setup.
My action: To ease Freelancer anxiety, I recommended removing the “propose budget” element from their setup flow. At this initial stage, Freelancers might not have enough information to present a budget confidently, and the element appears in later ongoing-use screens. After making this suggestion, I decided to match Freelancer and Business Owner setup screens to ensure the app can gather basic yet critical project data from either user.
To help Freelancers and Business Owners enter project data smoothly, I added hint text, microcopy, an error message and tooltips as well as refined the copy to support accessibility. I also presented new design elements that would guide users while making sure the Handshake team gets the data they need to enhance the ongoing-use experience.
To mitigate additional user stress, I recommended adding a screen for reviewing payment details as well as an option that allows users to proceed without inviting project collaborators.
3) Setup confirmation
My task: Make sure users know where they are, what to do and what happens next. Wrap this assurance in the right tone for the context.
My action: To celebrate users completing initial setup, I flexed to an exclamatory tone. To clarify what just happened and their next step, I added call-to-action buttons and presented a dialog variant to support users’ ability to set up a project without inviting collaborators.
4) Ongoing use
My task: Anticipate friction points and ensure users have enough information (and the right information) to complete ongoing-use tasks. Make sure the product voice, tone and style resonate and support ease. Determine the right parity between Business Owner and Freelancer ongoing-use activities.
My action: To help users work more efficiently, I changed the navigation. I renamed labels, added a fourth primary-navigation item and introduced a super-navigation. I also adjusted on-screen information hierarchies — I aligned shared project data as well as proposed new fields and pathways.
To support confident data entry, I added microcopy, tooltips and hint text. Moreover, to minimize user duties and improve quality control, I recommended opportunities to automate content.
Throughout, to help users proceed assuredly and promote their trust in Handshake, I fixed formatting, syntax, spelling and punctuation errors as well as wove in product voice and style.
5) Messaging
My task: Ensure users know how to message successfully and that the app’s voice, tone and style help them move through this task smoothly.
My action: I introduced navigation to help users understand where they are, what they can do here and where they can go next. To guide their task at-hand, I changed headlines and optimized hint text throughout these screens. I also suggested a number of text and design edits for user inboxes to reduce cognitive load.
6) Additional suggestions
My task: Propose any missing screens, dialogs and/or text that would benefit users.
My action: I presented five additional screens (three content hubs) to ease user friction and promote their assurance. I also identified opportunities for user-testing and further research, such as app navigation and the suggested taxonomies for Settings and Support hubs.
Imagined next steps
After I wrapped my review, I met with the Designer to walk through recommendations. We aligned on and tackled quick updates and set a time to meet with the larger team on new features.
At the team meeting, I presented my rationale for new features to Product Management, Tech, User Research and Marketing. We assessed user benefits, technical lifts and legal flags. We identified priorities for launch and post-launch. And we locked down the last steps of our path to the final design review.
Usability testing, a critical last step, would ensure we showed stakeholders strong data-backed designs. I worked with the Designer and User Researcher to build a prototype and testing plan focused on new features. We'd especially target navigation and the settings, support and notifications hubs. Testing outputs would inform our finishing touches for the final design review.
Path to the solution: Teams, activities and tools
Activities executed:
Desk research
Product team workshops*
Voice development
Tone mapping
Style guideline development
UX writing and editing
Content testing ideation
Teammates & disciplines engaged*:
UX Writing Manager
Product Manager
User Researcher
Product Designer
Product Marketing
Engineering
Legal
Tools used:
Google Slides
Google Docs
*As a simulated UX writing project, these items represent theoretical engagement points.
Result: Achieve readied mockups and UX writing skills
The UX Writers Collective deemed these high-fidelity mockups “user ready.” I achieved a grade of 120% on the final project and earned specific shout-outs for my persona-motivated writing and editing, visual improvements, thought-process communication and attention to detail.