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

屏幕快照 2022-02-10 下午8.29.38.png

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:

  1. Give users the right info at the right time without reminding our existence.

  2. Talk like a human. Respect distance and boundary.

  3. Be plain-spoken. Don't be pretentious.

  • Concise, but not confusing:

  1. Get to the point. Use effective verb.

  2. Highlight what the user cares about most.

  3. Never trade necessary info for conciseness. 

 

  • Honest,  but not insensitive

  1. Clearly explain it when something goes wrong, don't say anything redundant.

  2. Be immediate, not disturbing.

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

屏幕快照 2022-02-11 上午11.32.15.png

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.

屏幕快照 2022-02-04 上午11.23.42.png
  • 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:

屏幕快照 2022-02-10 下午8.29.38.png

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

屏幕快照 2022-02-04 下午12.02.14.png

(1)

Redundant word:"preferred"

  • "SET UP" doesn't follow the style guide.

  • Use sentence case instead.

屏幕快照 2022-02-04 下午12.08.58.png

(3)

屏幕快照 2022-02-04 下午12.05.40.png
  • 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)

屏幕快照 2022-02-04 下午12.09.46.png
  • 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:

屏幕快照 2022-05-24 下午12.32.51.png
屏幕快照 2022-02-04 下午12.06.35.png
屏幕快照 2022-02-04 下午1.07.00.png
屏幕快照 2022-05-24 下午12.34.48.png

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

屏幕快照 2022-02-04 下午8.43.05.png
  • 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.

屏幕快照 2022-02-04 下午8.43.18.png
屏幕快照 2022-02-04 下午8.43.36.png
  • 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

屏幕快照 2022-05-24 下午12.45.10.png

Returning user

屏幕快照 2022-05-24 下午12.45.47.png
屏幕快照 2022-05-24 下午12.41.05.png
屏幕快照 2022-05-24 下午12.43.15.png

UI Edits - Dialogs

BEFORE:

屏幕快照 2022-02-04 下午8.34.18.png
  • "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:

屏幕快照 2022-05-24 下午12.54.42.png
  • 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.