Handshake: UX Writing Edits
UX Writing
For the UX Writers Collective final project, I was tasked with providing edits to mockups using Figma to ensure the app was user ready. Handshake is an app used by freelancers and business owners for project tracking and payment
The Problem: Provide edits to the Handshake app for an upcoming design review to ensure parallel structure and formatting consistency throughout the sign up, set-up, and ongoing use stages of the user flow. The primary users of the app are freelancers using the app to create projects and bill business owners. The secondary users are business owners using the app to accept projects, track freelancer’s progress, and make payments.
The Process: Understanding the user. The voice of Handshake needed to appeal to both the freelancer and business owner. The voice of Handshake is informal and natural, but the tone is flexible depending on the situation. Tone for completion screens was changed depending on the user. Consistent use of voice across the product was our starting off point. From there we adjusted copy to make sure consistent use of format, terminology. Certain screens posed substantial friction points, sometimes missing buttons to log in and proceed. These were corrected as necessary.
The Results: Handshake is user ready! Friction points have been eliminated, text is concise and useful, and format has been standardized across the product. Buttons, dialogs, and CTAs have been added and clarified.
Below are “before” and “after” examples of edits made to the UI Text.
Sign Up Flow (Before)
The sign up flow here is vague and unclear
No on boarding incentive on the welcome screen.
Essential log in information missing from text fields.
No way for the user to proceed. (log in? Create account?)
Sign Up Flow (after)
Welcome screen leads with the benefits of the app for the user. A user-focused headline and clear CTA are provided.
Fields are labelled outside of the box and hint text is provided for user clarity.
Added buttons give users a way to proceed to set up stages of the app.
Set Up Screens: Business Owner (Before)
Headlines are wordy and inconsistent.
CTA buttons are unclear. What happens when you click them?
Sign Up Screens: Business Owner (After)
Parallel construction has been added across headlines.
Informal and casual voice matches the Handshake style.
CTAs provide clear instruction and match the headlines.
Set Up Confirmation (Before)
Set Up Confirmation (After)
On Going Use: Business Owner (Before)
Currency and date formats are all over the place.
CTA buttons are blunt, unclear, or too long.
Completion screen may cause anxiety in the current format.
On Going Use: Business Owner (After)
Consistent format has been added to all currency and dates.
To alleviate user anxiety, the completion screen is now clear, stating the exact payment amount and who it’s going to.
On Going Use: Freelancer (Before)
Grammar and headlines are inefficient and messy.
Destructive action dialog is too long and unclear.
Completion screen does not match Handshake voice and tone.
On Going Use Freelancer (After)
Headlines have been rewritten to ensure consistency cross platform.
Destructive action is now concise and clear.
Completion screen offering more information to alleviate user anxiety.
New Screen
Here was a chance to suggest a new screen to the Head of User Experience and product designers.
An advertised feature of Handshake was the ability of freelancers to invite other freelancers to join the project and manage their payments.
This button allowed freelancers to invite new project members in parallel design with previous invite screens.