Aude Lerner
UX writer | Portfolio |

Handshake App Mockup Review

The App that connects freelancers and business owners

Final project for the UX Writers Collective Certification

For the final project of the UX Writer Certification with the UX Writers Collective, I worked on the Handshake Project, a billing and project monitoring app for freelancers and business owners.

My job was to review the wireframe screens handed out by the designer, make copy edits and share feedback for an upcoming design review (fictional) with the Head of User Experience and the VP of Product for Handshake.

Project: Review of mockup screens for the Handshake app

Scope: Iterate on UX copy

Provide recommendations to design team

Help improve overall user experience and interaction flow

My role: UX writer



Contextual information

UVP

Handshake helps freelancers and small business owners take care of their billing, payments, and monitor their project progress.

Handhake App

Personas

The Handshake UX research team provided personas worksheets. Learning about them made it easier for me to understand their motivation for using the app and the problem they are looking to solve as I outlined below:

Kelly the freelance web developer

  • Context: Young, driven web designer starting her freelancing life
  • Motivation: I want to skip paper and complicated processes
  • Pain points: I don’t know how I should bill my customers and manage my finances as a first-time freelancer
  • Mental models: Since I am starting my professional life and need to pay back my student loan, I need to know exactly where I stand in terms of billing and payments

Handhake App

Tom the business owner

  • Context: Small business owner looking to improve his website and streamline his business
  • Motivation: I want to avoid bureaucratic processes, gain time by avoiding onsite presence and making calls to check on my subcontractors
  • Pain points: My website is outdated, important information is missing, I spend a lot of time chasing subcontractors
  • Mental models: Since I am very busy, I want to make sure I can easily check project progress anytime so I don’t have to interrupt my job to call subcontractors. And knowing where I stand in terms of bills will help me better manage my money and avoid running low on funds
Voice

Based on our 2 personas, Tom and Kelly, and on the contextual information provided by the UX research, I made recommendations for the Handshake app voice attributes:

The Handshake voice is:

Empathetic, not judgemental (we understand our users’ pain points and are encouraging)

Reassuring, we put ourselves in their shoes and understand their challenges

Direct, not dry (since we are writing for entrepreneurs who want to get things done but we stay friendly)

Helpful, not bossy (we are here to provide guidance, not dictate what to do)

Customer language

Moreover, I did some research for understanding customer language and how they think about tasks. I investigated freelancing platforms like Dribbble, Fiverr, Toptal,  Upwork and social media channels.

UX Writing


Editing/ Recommendations to the Design Team


For the editing part, I show how and why I iterated on the copy like I did.

Challenge: The main problem with the original copy was that it was showing a mix of voices and tones across the screens that didn’t fit the Handshake personality and was confusing for the user. It was like having several online presences. The tone spanned from robotic to overly relaxed.

Solution

I defined the Handshake voice and adapted the tone accordingly for the various user-journey touchpoints to create a unified presence and a pleasant user experience.

I also analysed the UI and came up with content and design recommendations to optimise the interaction flow and make the app more user-friendly.


Key: Orange= UI text proposed changesWelcome screen

Key: Orange= UI text proposed changes

Welcome screen

Copy for onboarding tour screens

The original version went straight from welcome screen to account creation, not explaining what's in for the user, which felt rough.

I therefore crafted the copy for the onboarding tour screens in order to nudge the users into signing up for the Handshake app, highlighting the benefits for both freelancers and business owners.  The goal here is to help design a seamless user experience.

Tone of Voice: Direct and reassuring


> Simplify your business life

Set your conditions, agree, and get started.


> Automate your bills

Manage your books like never before.


>Eliminate errors

Enjoy real-time, accurate reporting.


>Know where you stand

Monitor progress whenever you want.


>Transparency is a must

We have zero tolerance for fraud.


>Opt for simplicity

Manage your projects in one place.


>Relax

Data security is our priority.

FREELANCER PAYMENT FLOW before /after EDITS
Before - Payment Workflow - Freelancer

Before - Payment Workflow - Freelancer

After - Payment Workflow - Freelancer

After - Payment Workflow - Freelancer

Project Screen Edit

Project Screen Edit

Dialog Box Edit

Dialog Box Edit

Notification Edit

Notification Edit

Design Critique for Payment Workflow Business Owner
Payment Workflow Business Owner - Original mockup screens

Payment Workflow Business Owner - Original mockup screens

Handhake App

Questions and suggestions to the designer - Part I

For the heading “Project descriptions”, consistently use singular or plural as mixing both might create doubts in the user’s mind.

Hence the question: Is it possible to handle several projects at a time?

It would be good to provide more context here as to what is possible to do/not to do for the user.


Handhake App

The discrepancy in format makes the info hard to grasp for the users. “10/22 10@$80” vs "112.75 hours".

The time and currency format should be reviewed and be made consistent throughout the app.

  • Please opt for the same format throughout the user journey
  • Consider using decimals for amounts
  • Specify time in hours (h) in an explicit way
  • Use spacing accordingly for increased info readability
  • Consider breaking down total amounts in a clear way to help the user understand at a glance where they stand in terms of payments.
Handhake App

Questions and suggestions to the designer - Part 2


Question: Is there a way for the user to see paid, due and overdue amounts? Adding “due date” would be allow a smoother invoice management.

Points to be discussed with the designer and developers.

  •  create a dashboard to monitor payments
  • display the info in a more visual manner (green, orange, red for respective statuses alerts). This also applies to the freelancer for unpaid payment requests.

Suggestions


Under "Payments"

  • Consider adding “See details” microcopy link (progressive disclosure) for each item in the Payment Status section to have a less crowded screen.
  • Consider deleting the cross at the end of the line. The user should be able to issue weekly/monthly reports for due amounts and payments.
  • Consider adding a search function enabling the business owner to download a report for the selected time period.
  • Consider adding missing interaction flow: when the business owner clicks on the Pay button, he should be redirected to a payment platform (Paypal, Stripe…).
TAKEAWAY

This challenge taught me to go beyond the UX writing and anticipate potential obstacles, consider gaps and friction points to make the wireframes and interaction flow more user-friendly.