Designed for freelancers and business owners, here's how they use the fictional payments app:
-
Freelancers use it to bill business owners and report progress on a paid project (billing and tracking)
-
Business owners use it to pay freelancers and track the progress of hours worked (paying and tracking)
What I did
"Welcome" screen I designed, using Adobe XD
Research
What I did
Using the above user personas provided by my UX research team, I:
-
Spent time doing research to understand how both user types interact with each other on the matter of billing and payment
-
Compiled a list of terminologies they use
Handshake's personality
What I did
-
Created the app's personality, using my research. The aim was for it to embody what a real handshake is supposed to stand for. (I really enjoyed this part.)
-
Created style guidelines
Handshake is:
-
Dependable (secure, trustworthy)
-
Wise (level-headed, intelligent)
-
Empathetic (perceptive, caring)
-
Genuine (honest, unhypocritical)
A few style guidelines
-
Don’t use the word “entrepreneur” when referring to either user, as this could cause confusion. A freelancer and an employer could both be considered entrepreneurs. Use "freelancer" and "employer" to maintain clarity.
-
Don’t use serious accounting terms like “Accounts Receivable” or “Accounts Payable,” for example, as these could intimidate and alienate users unfamiliar with them. Keep it simple.
-
Don’t use words like “remuneration” or “reimbursement” as synonyms for “payment,” because they’re not user-friendly. Again, keep it simple.
User experience copy
What I did
Crafted copy for Handshake's:
Tagline
I was asked to craft a handful of tagline suggestions. They needed to be of a certain length, speak to both user types, and focus on benefits. Here's what I came up with:
-
Helping people work better together, one handshake at a time.
-
Helping you do business easier, to make your life easier.
-
The best way to do business, just a handshake away.
-
Because an honest day’s work deserves an honest day’s pay.
Landing page
I was asked to edit a landing page my product manager drafted, to make it error-free and in line with the app's personality. This is the end product:
Headline: Do business safer, faster, easier
Body: Handshake takes the paper and hassle out of billing and paying.
Freelancers, use Handshake to:
-
Record billable hours and send employers a request for payment
-
Subtract billable hours from the budget
-
Invite freelancers to help on your project and bill employers for them
-
Keep track of and receive payments.
Employers, use Handshake to:
-
Keep track of progress on your project
-
Enter dates for “milestones”―important levels of work.
-
Keep track of your budget, billing info, and everything else you need to know.
-
Query your bill.
Primary call to action (CTA): Download Handshake
Secondary CTA: Subscribe for news on discounts and other updates
Enter your email:
Onboarding tour screens
The designer asked me to provide six (6) headline and body sentence pairs for the onboarding tour screens. I wanted them to speak to both user types, so here's what I came up with:
-
Safe, fast, easy
Take the hassle out of doing business.
-
Do business safely
Here, we’ve got your back. We promise.
-
Simply convenient
Do your transactions wherever, whenever.
-
Save precious time
No more waiting. Get business done fast.
-
No more paperwork
Online billing saves you precious space.
-
Do business easier
You work hard. We help lighten the load.
Emails (using a defined content pattern)
Using this content pattern:
Headline
Body text
CTA (button text)
I was asked to write two transactional emails:
-
An email to welcome new users
-
An email to confirm a user's account was closed
I wanted both messages to be clear, concise, positive, and in line with the app's personality. Here's what I came up with:
Welcoming new users
Headline: Welcoming you with a warm handshake 🤝
Body text: Hi [first_name],
Welcome to Handshake―the safer, faster, easier way to do business. We’re delighted you’ve chosen to do your online billing and paying with us!
Freelancer or employer, we hope you love using Handshake. Here’s why:
Freelancers can use Handshake to:
-
Invite employers to sign up and make project and budget proposals to them
-
Record billable hours and send employers a request for payment
-
Invite other freelancers to help on your project and bill employers for them
-
Keep track of and receive payments
Employers can use Handshake to:
-
Review and accept project and budget proposals from freelancers
-
Keep track of progress on your project(s)
-
Keep track of your budget, billing info, and everything else you need to know
-
Make payments
No more paperwork, no more hassle. Just safe, fast, easy business done wherever you are, whenever you want. Sound good? Great.
Any questions? Want to learn more about Handshake and what we do to make online billing and paying safer, faster, and easier? Visit support.handshake.com. You can even open a help ticket if you need to. We’re going to be there for you every step of the way―always.
Ready to get started? Great! You need an account first, so let’s go create one.
CTA (button text): Create account
Confirming a user's account was closed
Headline: Your account has been closed
Body text: Hi [first_name],
We’re just confirming that your Handshake account has been closed, as you requested. All your details have been permanently deleted from our records.
Thanks very much for working with us, we enjoyed the pleasure of your company! We’re sorry to see you go, but we wish you the very best for the future. And the door is always open if you wish to return later on. We’ll be waiting for you with open arms!
In the meantime, we'll continue working to improve how we serve our Handshakers. Mind giving us a hand with this? Please complete this very short survey.
Saying bye (for now) with a warm handshake 🤝,
The Handshake team
User interface
The designer sent me a Google slides doc with all the screens she mocked up for Handshake, so I could edit them and make other suggestions. Here's what I came up with:
"Welcome" & "Sign in" screens
Before
.png)
Observations
-
The "Welcome" screen isn't user-focused
-
The "Sign in" screen increases cognitive burden, as it's:
-
Asking for too many things at once
-
Using jargon (1099 Contractor)
-
Not telling the user what to do with its main title
-
-
The information dialog lacks concision and isn't in line with Handshake's personality
My edits
-
Wrote user-focused copy for the "Welcome" screen
-
Sought to reduce the "Sign in" screen's cognitive burden by:
-
Adding buttons to the "Welcome" screen
-
Suggesting the design of a separate "Log in" screen for returning users
-
Suggesting two new form fields for new users, which would simplify the next step in the flow
-
Suggesting the design of a separate screen for creating a project
-
Replacing the jargon with a user-friendly term
-
-
Rewrote information dialog copy, making it concise and in line with the app's personality
-
Ensured all UI copy is in line with the app's personality
After
.png)
Employer & freelancer setup screens
Employer (Before)
.png)
Freelancer (Before)
.png)
Observations
-
Screen titles lack parallel construction
-
Form field titles and hint text aren't consistently used
-
Grammatical and stylistic errors in UI copy
-
Missing payment method from the freelancer's screen
My edits
-
Rewrote screen titles using parallel construction
-
Ensured form fields and hint text were consistently used
-
Replaced "Name" form field on both screens with more appropriate budget-related ones, as the user's name was submitted earlier in the flow, as per my previous screen suggestions
-
Replaced "Proposed TOTAL Budget" field on freelancer's screen with a description field to allow freelancers to describe the project they're proposing
-
Corrected grammatical and stylistic errors in UI copy
-
Added missing payment method to freelancer's screen
-
Added helpful microcopy
-
Added a messaging area to the final step
-
Ensured all UI copy is in line with the app's personality
Employer (After)
.png)
Freelancer (After)
.png)
Setup confirmation
Before
.png)
Observations
-
Grammatical error in copy
-
Copy isn't in line with the app's personality
-
Copy doesn't make clear what will happen next
-
It's not clear how to dismiss the notification
My edits
-
Corrected grammatical error
-
Wrote copy explaining what happens next, in line with the app's personality
-
Added an "x" so the user could dismiss the notification
After
.png)
Ongoing use screens (Employer)
Before
.png)
Observations
-
Grammatical errors and stylistic inconsistency in UI copy
-
Lack of concision in UI copy
-
Decision dialog lacks clarity
My edits
-
Corrected grammatical errors and stylistic inconsistency in UI copy
-
Made UI copy concise and in line with the app's personality
-
Rewrote decision dialog for clarity
-
Suggested a feature to allow the employer to negotiate a proposed budget here
After
_pn.png)
Ongoing use screens (Freelancer)
Before
.png)
Observations
-
Grammatical errors and stylistic inconsistency in UI copy
-
Lack of concision in UI copy
-
It's not clear how to dismiss the notification
My edits
-
Corrected grammatical errors and stylistic inconsistency in UI copy
-
Made UI copy, including for the decision dialog and notification, concise and in line with the app's personality
-
Added an "x" so freelancers could dismiss the notification
-
Added essential microcopy informing freelancers of the fee deducted from their received payments
After
_.png)
Messaging screens
Before
Observations
-
Stylistic inconsistency in UI copy
-
Lack of concision in UI copy
My edits
-
Corrected stylistic inconsistency in UI copy
-
Made UI copy concise and in line with the app's personality
-
Suggested a more organised messaging interface
After
.png)
Suggestions for user testing and design improvements
