Handshake user flow

Handshake is an imaginary app geared toward freelancers and small business owners for invoicing and payment purposes. The app is shared by these two user types with each having a view of one side of the app.

 

Role: UX Writer

Tools: Google Slides

 

The Problem

 

In this assignment from the UX Writers Collective, I was presented with a very rough mock-up of the Handshake app user flow in need of improvement.

 

The Process

My process involved research, ideation, and review. I read several worksheets of user personas to understand the needs of the potential user. The worksheets 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 based on these qualities I made a list of words that would be repeated throughout the UI that would fit the voice and tone.

The samples presented below are sets of starting wireframes (in turquoise) followed by the improved wireframes (in red). Alongside each set I offer rationale as to my changes and additions for an overall improved user experience.

Screen 1 - Welcome screen

#1 Starting Wireframe .png
#1 Improved wireframe.jpg

Screen 1 - Welcome screen

- I cut the vague text and added microcopy that establishes the brand’s voice and tone and effectively conveys the app’s benefit.

- On the CTA button I changed “proceed” which is too formal, to “continue” which is more casual and aligns with the brand voice.

Screens 2 + 3 - sign-up flow

#2 Starting wireframe.png
#2 Improved wireframe.png

Screen 2 - Sign-in screen

- I cut “Now What?” since it’s clear that signing in or creating an account are the required next steps on this screen.

- I re-wrote the text for both the returning and first-time user making sure:

  • the instructions are clear and concise

  • capitalization is consistent 

  • all tool tips are clear and concise

  • text for CTA button matches the action of the instruction 

- I wrote a success message for the new user at the point of account creation.

- I changed the button text from “OK” to “Get started” which encourages the user to move forward in the flow.

#3 Starting Wireframe.jpg
#3 Improved wireframe.jpg

Screen 3 – Create project screen

 

- I cut “Now” which is unnecessary.

 

- I edited the instruction text.

- I corrected or changed terms on the buttons:

  • “Employer” is incorrect since the nature of the work is contractual. The suitable term is “Business Owner”.

  • Although “1099 Contractor” is technically a correct description, it’s an awkward term. Freelancer is more in keeping with the casual tone of voice.

  • I added “I’m” to both the Business owner and Freelancer button to instill a sense of ownership as they move through the flow.

Screens 4 - 7 - Business Owner set-up flow

#4 Starting wireframe.jpg
#4 Improved wireframe.jpg

Screen 4 – Business Owner project info

- I edited the text in the field headings for concision. 

- For the name field I suggested use of a legal name since the relationship will involve payment and tax filing. However, I realize this could be a discussion to have with both the designers and the legal department.

- I added a tool tip in the project description field. I also added an asterisk as this is potentially a point where more nuanced discussion is warranted. A message screen might be appropriate here since Business Owner might want to communicate with the Freelancer. 

 

- On the button I changed “Go” which is vague to “Next” which is precise.

#5 Starting wireframe.jpg
#5 Improved wireframe.jpg

Screen 5 – Payment choice 

- I edited the heading for concision.

- I made the second P in PayPal uppercase.

- I made the other payment options singular.

-  I made the d in deposit lower case.

#6 Starting wireframe.jpg
#6 Improved Wireframe.jpg

Screen 6 – Payment set-up

- I edited the heading.

- I changed the button to sentence case.

#7 Starting wireframe.jpg
#7 Improved wireframe.jpg

Screen 7 – Invite screen

- I changed the text in the heading and added a tooltip explaining what happens next.

- I matched the text of the CTA with the specific action.

Screens 8 – 11 - Freelancer set-up flow

#8 Starting wireframe.jpg
#8 Improved wireframe.jpg

Screen 8 – Freelancer project info

- I edited the heading.

- I edited the text in all field headings for concision. 

- For the name field I suggested use of a legal name.

- I added hint text in the form fields.

- On the button I changed “Start” which is vague to “Next” which is specific.

#9 Starting wireframe.jpg
#9 Improved Wireframe.jpg

Screen 9 – Payment choice 

- I edited the heading.

- I made the second P in PayPal uppercase.

- Made the “ Paper check” payment option singular.

- Made “d” in “Direct deposit” lower case.

#10 Starting wireframe.jpg
#10 Improved wireframe.jpg

Screen 10 – Payment set-up

- I edited the heading.

- I changed the button to sentence case.

#11 Starting wireframe.jpg
#11 Improved wireframe.jpg

Screen 11 – Invite Screen

- I edited the text in the heading. Since this is the Freelancer view of the app I use “client” rather than Business Owner. It’s a tone flex that fits since it is specific to how the Freelancer thinks of the Business Owner.

 

- With this in mind I changed the CTA button to “Invite client”.

Screen 12 - Empty state, Freelancer view
Pre-edited empty state screen.png
Edited empty state screen.png

Screen 12 - Empty state Screen

 

The original screen sends a counter intuitive message to the user, implying that there’s nothing left to do. It discourages the user from moving forward in the flow.

I re-wrote the microcopy so that the user is encouraged to take further action and move forward in the flow. The asterisk indicates that this is the Freelancer view. The text for the Business Owner view might say something like “Enter some goals”.