Handshake app

Project overview

This project management and payments app helps bridge the gap between freelancers and clients (business owners). Here’s how it works:

•Clients use the app to pay freelancers and track the progress of hours worked (paying and tracking).

•Freelancers use the app to bill clients and report progress on a paid project (billing and tracking).

•The app is shared by these two user types. One uses it for billing and the other for paying.

Freelancers are the main users. They report billable hours and request payment. The clients, small business owners, are the secondary users. They can approve hours and send payments to the freelancer.

Handshake user tasks

User personas

The app

Our goal for this project was to guide the user through the app using an informal, conversational tone. I considered Handshake’s voice and tone, and thought about the personas and their different use cases.

Setup screens for the client and freelancer
Text from the designer

Updated content

Changes:

•This was an opportunity for something other than “Welcome.” I wanted to lead with a benefit and how it will help both parties.

Suggestion for the designer:

•There should be two different screens for new accounts and returning users. “Nice to meet you” vs. “Welcome back.” For the purposes of the project, I focused on new accounts.

Client onboarding setup flow
Text from the designer

Updated content

Changes:

•I added hint text about what info might be helpful for the project overview.

•Since we already asked the user for their name in the earlier screens, I removed that question.

•Copy was added to let people know why certain info is needed.

•The confirmation was updated to set expectations.

Suggestions for the designer:

•Add a progress bar during setup. Users want to know how many steps are left and where they are in the process.

•Once the user connects their payment method, there should be a confirmation screen or modal.

Client ongoing use
Text from the designer

Updated content

Changes:

•Microcopy was added to show what they can do if the budget is wrong. I added a link for them to send a message, but maybe a different screen would be appropriate.

•The “time” section was changed to “hours.”

Suggestions for the designer:

•If you send a payment or payment request, there should be a toast message after confirming it was sent, or if something went wrong and you need to try again.

•Messages should be added to the navigation menu. It’s not clear how to get there unless you are sending a message. Do you get a notification when you have a new message?

•For the messages, if you have “new” and “all’ on the same screen, it could get really long. Does it only show the last 3? Or just scrolling? Why not have a separate screen for all messages vs. sent? New messages could be bolded like Gmail does.

Freelancer onboarding setup flow
Text from the designer

Updated content

Changes:

•Since we already asked the user for their name in the earlier screens, I removed that question.

•Hint text was added for the hourly rate and budget.

•As with the client onboarding flow, copy was added to let people know why certain info is needed and what they can expect.

Freelancer ongoing use
Text from the designer

Updated content

Changes:

•Microcopy was added to let freelancers know what they can do if their budget isn’t approved. The budget was entered during onboarding, so it should already be filled in.

Suggestions for the designer:

•Under the “Pay” tab, there should be a column for both hours and dollar amount. You see hours under “Invoices” and the amount under “Unpaid invoices.” Each section should have both next to each other so you can quickly see the full picture.

•As mentioned in the client flow, messages should be added to the navigation menu.

Other considerations

•This flow seems to only work if both the client and freelancer are setting up the projects. But there should be a screen if one party has already completed setup. The other party can then search to find the project, or access it from their invite. That would take them to a different screen with the project info already filled out.

•If there is more than one project, how do you toggle between projects?

•This will have to go through legal, and additional text from the legal team will need to get added.