Handshake Onboarding

image-asset.jpg

Handshake is an assignment given by the UX Writers Collective. It's a shared app geared toward freelancers and small business owners for invoicing and payment purposes. The overall goal of the app is to simplify the working lives of both user types. The benefits include the ability for secure and easy communication between the two users around project proposals, fee schedules, invoicing, and payments as well as the elimination of “after work” paperwork. I’ve focused on making the sign-up and set-up screens easy to step through.

Role: UX Writer

Tools: Figma

The Challenge

 

This case study focuses on the freelancer view of the app. Handshake is a shared app, but paid for by the freelancer who in turn invites the business owner. Since the sign-up and set-up flows are the freelancer's first contact with the app, the challenge is to make them easy and enjoyable which will lead to bringing the business owner on board and subsequent ongoing use of the app by both user types. My goals are to establish the friendly, conversational, and reliable brand voice and tone at the outset, provide clear direction through specific and concise language, and correct all spelling, punctuation, and sentence case errors.

 

The Process – Research, Ideation, Review

  • I read several worksheets of user personas which helped me imagine when and why they would use Handshake and provided context for identifying practical issues.

  • In imagining how both users would step through the screens I made a list of specialized language that would be used in freelance/small business relationships.

  • I explored some early UX/UI copy ideas with onboarding screen tag lines that focused on benefits for both user types.

  • To establish voice and tone I imagined the mindset of the two types of users of Handshake and made a list of what emotions they might feel while experiencing the app.

  • I considered a list of qualities that would align with the app’s voice and made a list of words that would be repeated throughout the UI that would fit the voice and tone.

The following case study presents nine sets of wireframes. Note: starting wireframes are turquoise. Improved wireframes are purple. I provide comments on both screens indicating need for improvement on the starting wireframes and describing the rationale for my changes on the improved wireframes.

Screen 1 - Welcome Screen

1 Welcome screen_edited.jpg
1 Welcome screen improved_edited.png

Screen 2 Sign-in/Sign-up flow

2 Sign in screen_edited.jpg
2 sign in screen improved_edited.jpg

Screen 3 - Empty State

3 Empty state screen_edited.jpg
3 empty state screen improved_edited.jpg

Screen 4 - Create Project

4 Create Project screen_edited.jpg
4 Create project screen improved.jpg

Screen 5 - Name Project

5 Name project screen.jpg

Screen 6 - Payment Preference

6 Choose payment screen.jpg
New Screen 6.png

Screen 7 - Payment Set-up

7 Payment set up screen.jpg
Payment set up_edited.jpg

Screen 8 - Invite Client

8 Invite screen_edited.jpg
8 Invite screen improved_edited_edited.jpg
Screen 9 - Empty State, Freelancer View
9 Empty state screen_edited.jpg
9 Empty state screen improved_edited.jpg

Next Steps
 

Ongoing discussions with designers and developers will be followed by further testing and iterating on language and positioning approaches. A particular concern would be which user type will determine payment methods (as indicated in Screen 7). In my opinion, since it’s the freelancer who pays for the app, the payment choice should be determined by the freelancer. However, this brings up multiple issues of ease and trust in the relationship between the business owner and the freelancer so usability testing would be warranted to gather further data.

 

Additionally, I’ve taken what I've learned during the process of research, ideation and review, and created a set of holistic marketing deliverables for the app launch which you can find here.