Portfolio - UX Case Study
Handshake App

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.

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.