Kelly Chan, a 24-year-old tech-savvy freelance web developer
Dedicated creator of visually appealing designs and content with functional results
Makes billing and project tracking easy between freelancers and business owners.
My role: UX Writer
Tools used: Figma
Create consistency (voice, tone, and vocabulary) throughout the user flows.
Propose design and content improvements within the app.
Researching the target users to create the persona of the Handshake.
Defined brand voice and words terminology to use
ambiguity and jargon-free slogans
provide concise, clear, helpful, and scannable text
Design and Testing
A/B testing to see what options work best
Suggest alternatives to make the app improve the user experience
Based on the interviews and user research, we set up two personas
Define Voice & Tone
The correct wording needs to work for tech-savvy freelancers and business owners who are new to technology. The terminology works well for both user types, so I wanted the voice/tone approachable.
Terminology & Style
User research and testing helped me determine the current pain points of Handshake. With the results, I gather my ideas of what needed to be revised. Social media and Google Trends are the tools I used to gather these results. The customer service department is an excellent resource because we can collect information to see our clients' words.
Easy as a handshake
Track work hours and payments with ease
Safe Online Billing
Rest assured, pay or receive invoices securely!
Online billing and paying tasks made simple
- 7 character count
Manage working hours and payments made simple
- 7 character count
Manage- your invoices, payments, and transactions administered by us.
Time tracking: Users will know where to find logged working hours.
Hourly rate: Confirming the pricing of a project
Invoice: Compared to “Bill” (noun), the word invoice sounds more professional without being formal.
Instead of employees use freelancers because an employee receives a wage or salary and works for one company. A freelancer gets paid per project and can work for more than one client.
Instead of assistance, use help because it's more informal.
Reliable, anyone can depend on us to manage their work's finances. Plus, we're only a phone call away to help answer any questions.
Reassuring, Don't worry! You can ensure your payment processes in a secure and timely manner.
Friendly, No jargon or sales pitches. Receive customer support from a person, not a generated email.
The project manager asked to revise these emails that another team member drafted. I followed the content pattern of:
CTA - call to action
We’ve canceled your Handshake account.
Thank you for trusting us to manage your business finances. To track working hours and payments for your next project, you can always come back.
We want to hear from you! Contact support.handshake.com with any feedback or comments.
Just Downloaded App
Hi Tom, thanks for downloading Handshake
Managing your projects got a whole lot simpler. You can now easily keep track of progress and enjoy a seamless billing and payment experience—all in one app.
CTA Create Account
Handshake App UI Edits
Before & After
Revise text to make words clear as possible and for it to appeal to both user type
Changed titles, CTAs, and placeholder text to match voice/tone and previous terminology used throughout the user flow
Added subheadings, microcopy, tooltips, placeholder, and hint text, along with instructions wherever the user needs more guidance
Use sentence case which is approachable, informal, and easier to read and scan
fixed grammatical and stylistic errors
(app launch screen, confirmation message)
Text suggestions for creating a strong password
Replaced "1099 Contractor" to "Business Owner" based on our terminology guide
The button text shows the action (ending an email) successfully sent
Minimize screens so users can sign up with essential information needed to set up their project (Create Account/sign in, choose job title)
Change the text/button design as well
Allowing users to sign up/log in with social media accounts
Changing the colors of the Handshake logo to match its color scheme
Fixed typos (ex. PayPal instead of Paypal)
changed buttons text to continue, which indicates the user to go to the next screen
add area to write a message
Include (+Add) on the button for clarity
Having a progress tracker (bar or dots)to show the remaining steps left
Set up confirmation and CTA
Changed the header to a more congratulatory message which includes an exclamation mark
Onboarding setup & Messaging for Freelancer & Business Owner
(project overview, hours & payment tracker, messaging)
Changed all dates to MM/DD/YY; dollar amounts to $XX.XX
Added Date, Hours, Rate, Pay Due titles and the amount owed for each week
Created sender profile (name, date sent, timestamp)
Include a "Negotiate" CTA button for the business owner to decide if they oppose the current proposal
Add an edit icon so the business owner can edit/update their project information at any time.
Include project title under the header
"Handshake makes money by collecting a 1% fee whenever a freelancer gets paid" appears on both freelance and business owner screens but as tooltips or in the confirmation message
Use an image next to send name, which gives a more personal vibe when we can see who we're conversing with
The dashboard display's all past and current projects. If this is your first project, then only this project will show in the dashboard. When a user clicks on a project title on the dashboard, it will direct to the project screens (its description, track hours/payments). More research/testing can determine how to create this part.
Suggestions for design improvements
We should conduct testing sessions with other team members and users using original and revised mockup versions.
Using heat maps will show which areas are the most active by users. Also, it indicates minor interactive regions. A/B testing can find out why and what is causing these areas to be less busy.