HANDSHAKE APP

Makes billing and project tracking easy between freelancers and business owners.

My role: UX Writer

Tools used: Figma

Image alt tag

User Goals

  • Create consistency (voice, tone, and vocabulary) throughout the user flows.

  • Propose design and content improvements within the app.

Content Strategy

  • Researching the target users to create the persona of the Handshake.

  • Defined brand voice and words terminology to use

Writing Revisions

  • 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

Discovery: Persona

Based on the interviews and user research, we set up two personas

  Kelly Chan, a 24-year-old tech-savvy freelance web developer

  

Kelly Chan, a 24-year-old tech-savvy freelance web developer

 Tom Stewart, a 62-year-old small business owner who's new to tech, hired Kelly to redesign his business website.

 Tom Stewart, a 62-year-old small business owner who's new to tech, hired Kelly to redesign his business website.

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.

Headlines

Easy as a handshake

Track work hours and payments with ease

Safe Online Billing

Rest assured, pay or receive invoices securely!

Taglines

Online billing and paying tasks made simple

- 7 character count

Manage working hours and payments made simple

- 7 character count

Word Terminology

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.

Word Choice

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.


Voice Attributes

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.

Emails

The project manager asked to revise these emails that another team member drafted. I followed the content pattern of:

Headline

Body text

CTA - call to action

Welcoming new users

Welcoming new users

Canceling Account

Headline

We’ve canceled your Handshake account.

Body text

Hi Tom,

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.

CTA

Reactivate

Just Downloaded App

Headline

Hi Tom, thanks for downloading Handshake

Body text

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

CTA Create Account

Handshake

Handshake App UI Edits

Before & After

Handshake
Handshake

Overall Ideas

  • 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

Create account/login

(app launch screen, confirmation message)

Revisions

  • 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

Suggestions

  • 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

Set up

Revisions

  • Fixed typos (ex. PayPal instead of Paypal)

  • changed buttons text to continue, which indicates the user to go to the next screen

Suggestions

  • 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

Revisions

  • Changed the header to a more congratulatory message which includes an exclamation mark

Freelancer

Business Owner

Onboarding setup & Messaging for Freelancer & Business Owner

(project overview, hours & payment tracker, messaging)

Revisions

  • 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)

Suggestions

  • 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.

Freelancer

Business Owner

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.