HANDSHAKE APP🤝🏼

Developing a voice/tone guide and
revising the text/design for two user flows

•    •    •

Project Overview

Problem

Handshake is a fictional app that connects Freelancers with Business Owners, providing them an all-in-one project management tool. As part of my UX Writing certification for UX Writer's Collective, I was responsible for revising the in-app text for two user flows. (I went a step further by mocking up possible design and functionality improvements.) 

Tasks

  • Content Strategy: Defined word usage and brand voice

  • UX Writing: Came up with taglines and headlines that resonate with both user types; edited all the in-app text for the complete user flow (sign up, set up, ongoing use, and messaging screens + microcopy)

  • Design and Testing Suggestions: Made plans for testing the copy and asked questions to better the user experience

Tools

  • Google Slides (at the time, the final project had to be edited using this medium), Google Sheets and MS Word (to draft copy)

A LinkedIn shoutout from UXWC's founder. My final score for this project was 25 out of 20.


Creating a Voice/Tone Guide
for Both User Types

Key Points

  • The app has two different users: Freelancers and Business Owners. The taglines, onboarding text, and all other components needed to include both user types to avoid alienating either audience.

  • Low barrier for usage. The word choice and terminology had to make sense for tech savvy as well as low tech users. Additionally, young individuals who are new to freelancing need to feel empowered by Handshake, rather than intimidated.

  • Consistency. Sticking to the same voice and sets of words will help users become more familiar with the app and its branding.

Freelancer
(Primary User)

  • Invite Business Owners to projects
  • Provide quotes and payment rates
  • Track hours
  • Request payments

Business Owner (Secondary User)

  • Accept invites
  • Write project descriptions
  • Review budgets
  • Oversee progress
  • Send payments

Word Choice & Terminology

Handshake’s main function is for billing and paying, so I started by researching words related to how each group handles money.

  • ‍Freelancer: charge, billable hours, hourly vs. fixed rate, project pricing/per project rate, invoice, logging/tracking hours‍
  • Business Owner: contract, payroll, billing, one time vs. recurring payment‍
  • Both: negotiation, expectations,requirements, agreement, budget, payment, timeline, project goals, outcomes,scope of work, pay rate, deadline

After that, I created more strict rules to streamline the UX copy. Which words were the most relevant, familiar, and easy to understand? I prioritized simplicity as a standard for pruning words like "invoice" or "contract." Handshake should feel less like an official business deal and more like – well, a cordial handshake between two people who are collaborating with each other!

  • Freelancer (instead of self-employed, contractor, or 1099 employee)
  • Business Owner (instead of CEO or entrepreneur)
  • Time / Budget / Project Tracker (no words like "time punch")
  • Request/Send (instead of charge)
  • Negotiate (instead of dispute)
  • Pay Rate, Hourly Rate, Project Budget (instead of fixed rate, flat fee)

Mini Voice/Tone Guide

The voice/tone needed to work for tech-savvy, easily frustrated freelancers, but also business owners who may be low tech yet still want to keep track of projects digitally. The terminology above works well for both user types, so I wanted the voice/tone to be similarly approachable and accessible.

Professional, but friendly and conversational

We won't exactly crack jokes, but we're not stone-faced, either. We feel like a long-time, trustworthy business partner (or coworker) who's by your side every step of the way.

Motivational, reassuring

We want our freelancers to feel like they're in control. We're cheering them on with a "You got this!" attitude, and we're here to help them accomplish every milestone in their projects. We also encourage business owners to be proactive with the platform, streamlining their work flow and communication.

Upbeat, positive

Our users' success and growth is always reason for celebration. We're vocal about how much we care. We use expressive emojis in our copy😉 and enjoy showing enthusiasm with the occasional, well-placed exclamation.


Taglines and Headlines

Taglines

Get Things Done, Get Paid.

Billing and Paying Made Simple.

Billing and Paying Made Easy.

We Manage Payments so You Can Master Projects.

Headlines

Your Digital Workspace
Manage projects and payments with ease.

Get Things Done
Manage projects & payments with no fuss.

Welcome to Handshake
We help you get work done - simply.

One Handshake
Multiple projects managed digitally.

Beat Deadlines
Save time by tracking project progress.

No Fuss Finances
Manage billing and paying in one place.


Handshake App UI Edits
Before and After


Sign Up

(app launch screen, sign up form, confirmation message)

Sign Up Edits

Changes

  • Asked users to provide their name at sign up
  • Used the terms “Freelancer” and “Business Owner” based on our terminology guide, and removed "1099 Contractor"
  • Made the Email/Password placeholder text into titles so they don't disappear
  • Added instructional text above the Password form field; added a hide function
  • Incorporated headline and tagline pairs into the Welcome screen
  • Changed CTA text to match voice/tone

Suggestions

  • Having a different flow for new vs. existing users
  • Allowing users to sign up with social media accounts
  • Changing the Handshake logo to something more unique that uses brand colors

Set Up

(create/join project, payment preferences, add or invite members)

Set Up Edits

Changes

  • Changed headings so they start with verbs (parallelism) and put short, helpful copy below each heading, which also keeps the page design uniform
  • Added titles and guiding placeholder text to all form fields
  • Removed name fields (already covered during sign up)
  • Inserted illustrations from undraw.co to make onboarding visually enjoyable
  • Changed CTAs at the bottom of every screen to "Go back" and "Continue"

Improved Design and Functionality

  • Added a currency selector (drop down menu) when typing in budget or hourly rate
  • Changed generic project set up screens so that Business Owners create projects while Freelancers can search and join existing projects
  • Organized payment methods into clickable boxes with strong visuals (icons/text)
  • Included "Want another way?" on the payment set up screens to give users additional options beyond PayPal, credit/debit, paper check, and bank transfer
  • Added a “Find an existing member” search function that will auto populate when the user types in a name or email address
  • Changed plus icon to “+Add” buttons for clarity

Suggestions

  • Having a progress tracker (bar or dots) so users know how many steps are left

Business Owner Set Up

Freelancer Set Up


Set Up Confirmation

(post-onboarding confirmation message)

Set Up Confirmation Edits

Changes

  • Changed the header to a more congratulatory "Success!" that marks a high point in the user's journey - they've completed onboarding and can now use the app's major functions
  • Added simple visuals (a raising hands emoji that reflects the message's tone)
  • Added informational text that explains what confirmation means
  • Added a "Got it" CTA

Suggestions

  • Including an "X" in the upper right corner, giving users two different ways to exit the message

Ongoing Use

(project overview, hours/payment tracker, confirmation message)

Ongoing Use Edits

Changes

  • Changed the top of every page to include [Header] with [Project name] on second line
  • Added two CTAs to every page (secondary CTA is “See All Projects” so users can easily view projects)
  • Changed subheaders to align with terminology and words that appear on previous pages in the mockups
  • Suggested “Negotiate” CTA and function for BO deciding budgets
  • Changed all dates to MM/DD/YY; dollar amounts to $XX.XX
  • Added weekly totals ($) next to week number for Freelancer (since BO pages show total hours next to each wk)
  • Added Date, Hours & Rate, Pay Due titles to the drop down menus for each week
  • Suggested including “Remaining Budget” for BO (because Freelancer pages show “Remaining Hours”)
  • Changed all names to display full names
  • Made payment cancellation pop-up (Freelancer) easier to understand with clear, simple CTAs
  • Made payment confirmation pop-up align with previous designs; Added amount being sent, freelancer’s full name, and payment method

Business Owner Ongoing Use

Freelancer Ongoing Use


Messaging

(sending, opening, and replying to messages)

Messaging Edits

Changes

  • Changed the top of every page to include “Messages” with [Project name] for consistency
  • Changed all subheadings, CTAs, and placeholder text to match voice/tone and previous terminology used throughout the mockups
  • Suggested having an “Inbox” separated into “Read” and “Sent & Received” messages
  • Suggested using one CTA for a single thread, instead of every message and reply
  • Created sender profile above each message (with profile pic, name, date sent, time stamp)
  • Suggested including smart responses (like “That’s fine” or “Sounds good”) at the bottom of reply fields
  • Suggested including a search function for messages if the design allows for it

Business Owner Messaging

Freelancer Messaging


Final Notes & Testing

Notes, Questions, and Suggestions for the Team

Business Owner vs. Freelancer User Flow

  • Since Business Owners write the project description and know the most details, I argue they should be creating projects while Freelancers can join and/or create placeholder projects.

Set Up: Inviting Users

  • Both user types are able to invite users by email in the original mockups, which makes me think we need a “Find existing members” function to avoid sending invites to people already using our services.

Ongoing Use

  • Freelancers input total hours and budget estimates. But we already ask for this during the Set Up pages. Why do we ask twice? Do we need to change the form fields into set, unchangeable numbers based on what Freelancers entered during set up? Or is this supposed to be a chance to edit previously made estimates?
  • On this same page, how is it possible for clients to have approved a budget if Freelancers still need to fill out estimates for hours/budget?

Branding

  • What competitor apps have we looked into? How have we differentiated our brand?
  • I’m interested in understanding more about Handshake’s visual identity so that we can incorporate fitting illustrations and icons alongside the text.
  • By solidifying our voice/tone guide with extended examples, we can create a more cohesive branding strategy across our app, website, emails, and other content/copy.

Testing

  • We should conduct peer testing, remote sessions, or A/B testing to gauge reactions to our original and revised mockup versions.
  • Using eye tracking or heat maps could tell us how users go through our flow and where they have problems.
  • To refine the UX writing, we could utilize highlighter testing to make sure our word choice makes sense to users, creating positive emotions and trust.

Images from Unsplash


Using Format