Portfolio - UX Case Study
Handshake App
Case Study - Handshake App
About:
Handshake is a virtual project management and payment app designed for freelancers and their employers. The app has two user types, and each of these users has a view of one side of the app.
1. the freelancer (primary user)
billing + reporting progress
2. the employer (secondary user)
paying + tracking progress
My Contribution:
UX Writing/UI Text/Style guide/UX Research
Tool(s):
Figma/Google Suite

Overview
Solution
Voice, Tone, Style
I tested tone and language with users through interviews and Google forms to create a style guide from scratch. I also worked with designers to analyze user personas so that the app would work for both our user types.
Voice characteristics:
-
Personal, but not intruding:
-
Give users the right info at the right time without reminding our existence.
-
Talk like a human. Respect distance and boundary.
-
Be plain-spoken. Don't be pretentious.
-
Concise, but not confusing:
-
Get to the point. Use effective verb.
-
Highlight what the user cares about most.
-
Never trade necessary info for conciseness.
-
Honest, but not insensitive
-
Clearly explain it when something goes wrong, don't say anything redundant.
-
Be immediate, not disturbing.
-
Offer encouragement and advice.
Tone guidelines:
-
Positive situations:
Put the user in the center, be encouraging, and offer them the next step.
Don't say: "We've created a new account for you. You can thank us later!"
Say: “Congratulations! Your new account is set up.”
-
Neutral situations:
Give users the right info at the right time following the style guide.
Don't say: "Boom!!!You done!"
Say: “Pay requested!”
-
Negative situations:
Be clear about the problem and how the user will be affected.
Don't say: “Are you sure?”
Say: “Cancel this request?”
Styles:
-
Page (screen) headings
Capitalization: Sentence case
Punctuation: Use… ? ! , Do not use .
Styles: verb phrases unless it’s a question mark. Such as, “Invite freelancer” “Set up payment”’
-
Subheadings
Capitalization: Title case
Punctuation: No punctuation
Styles: short phrases, adj+noun / noun+noun
-
Instructions
Capitalization: sentence case.
Punctuation: . or ,
Styles: start with verb or the second person POV, “You”
-
Tooltips
Capitalization: sentence case
Punctuation: .
Styles: statement. Add tooltips icon
-
Button text
Capitalization: sentence case
Punctuation: no punctuation
Styles: Use verb phrases, less time three words on one button
-
Date formats
mm/dd/yyyy, it’s the format users are familiar with. (Handshake is a US based app)
-
Currency formats
$+number, it’s the currency our users use.
User Language
I went through competitors' products and nailed down the most commonly used terms. Here are the terminologies shared by both user types.

UI Edits
I went through the user journey map of both user types, edited UI text, added microcopies and tooltips and made each page more organized by clearing up some overlapped info. The samples below are only a part of the flow.
UI Edits - Onboarding
BEFORE:
-
Unclear button text.
-
Users are unsure what will happen if they click on it.

-
This line wastes the chance to engage our users.
-
They knows the name of our app,but they might not know its function or whatto do next.
AFTER:

Highlight benefits
UI Edits - Employer Setup
BEFORE:
-
This title cannot involve all the content on this page.
This page is more than asking about the project name.
Irrelevant info request
-
Ineffective microcopies.
Didn't tell the user why they need to fill this blank and how exactly. Users might want to skip this.
-
Unaccessible for screenreader

(1)
Redundant word:"preferred"
-
"SET UP" doesn't follow the style guide.
-
Use sentence case instead.

(3)

-
Word choice ("workers")
-
redundant expression("who work for you")
Change "Paper checks" to "check"
-
"Go" is unclear what the direction. Go where?
-
Change "Go" into "Next"
(2)

-
Word choice.
-
Say "freelancer," not "worker."
-
Didn't give enough instruction on
how to participate.
-
Add a microcopy.
-
Use the same verb as the title, "Invite."
(4)
AFTER:




UI Edits - Freelancer Side
BEFORE:
-
This round button leads to a tooltip but the user don't know it's a button or they're not sure what will happen.
-
We already let the user set an hourly rate during the project-setup,
-
There's no need to let them fill in an hourly rate each time
1. Say "enter," not "Put in"
2. we can let the user enter which week instead

-
The micropies needs editing.
1. use the same verb: use "enter" not "type in"
2. "you think" sounds like an estimation but "the total spend" sounds like a fact.
Say "employer"
instead of "client."
Use "pay" instead of "invoices"
-
Unnecessary button.
-
Create a page as the message center.


-
Make it more concise and follow subtitle format.
-
"Unrequested Payment"
-
Use "Pay" instead of "Bill"
-
Use sentence case for button
-
"Cancel" is not clear enough.
-
Say "Cancel request" instead.
-
Most freelancers would not want to cancel request for pay
Proxy expression.
-
Unknown intention.
-
Is it for signature?What to fill it with?
-
"Save" does not implicate that
the info users enter will be submitted.
AFTER:
1. I reorganized each page, Project, Time, Pay, to make sure that each page focuses only on one thing. For example, the Time page focuses on hours, and Pay focuses on money.
2. I changed the theme color, using a deeper shade of blue to distinguish from the views of the other user type.
3. I created different screens for Project: first-time user and returning user to reduce cognitive burden.
4. I replaced copies with icons on the Pay screen
First-time user

Returning user



UI Edits - Dialogs
BEFORE:

-
"Are you for sure?" was vague. Users weren't sure of what they should pay attention to at this moment.
-
The explanation was too proxy and also lacked an information hierarchy. We needed to make it short and cut-to-the-point.
-
Avoid using "Yes" as a button text. Especially, in this case, this alert popped up after users hit "Cancel request." It was confusing whether they should click "Cancel" or "Yes" to cancel the request.
AFTER:

-
Highlight what the users care about/should pay attention to the most in the title.
-
Briefly explain what will happen if they insist on canceling the request and whether or not this action is revokable.
-
Make sure the button text enunciates what will happen next.
-
Change the color to the freelancer theme.
Next Steps
User Testing
-
Observe user testing to find out friction points and adjust terminology.
-
Work with teams to refine user experience.
-
Pass executive reviews
Takeaways
-
Be consistent in voice and styles. Research then follow the user language
-
Avoid cognitive overload: for example, on Project screen, remove hour and money info
-
Delete redundant words, such as. "Do you," "please," "yet."
-
Highlight the most relevant points in the dialog titles. Avoid vague questions, like "Are you sure?"
-
Highlight benefits and what users care about the most in all situations
-
Use the same verb in the button as the title
-
Always clarify what will happen next
-
Keep it short, scannable
-
Add microcopies and tooltips when necessary and keep it short
-
Give the right info at the right time. Ask for the right info at the right time.