Handshake

Making billing and project-tracking easy between freelancers and small business owners

Note: This is a fictional scenario.

Before

After

01. challenge

Getting ready for a final design review by the VP of Product by defining voice, applying style, and inserting ease while eliminating friction.

02. approach

I set out to understand our target users by researching shared vocabulary, common goals, and individual pain points. Empathy maps and user journey maps lit the way. Then, I performed a competitive analysis of other fintech products like Venmo and Cash App, among others. The task analysis was key before moving forward with voice and style ideation.

03. solution

First, we needed a style guide. I created one based on clean, friendly, casual, and collaborative voice attributes; above all, the conversation between Handshake and our users needed to be light and easy. Based on that, I moved forward with the UI content design for 26 screens. You can delight yourself with the entire scope of the project here.

Business ongoing use. Before

Business ongoing use - After

The messaging feature was buried in the Pay screen. I suggested to move it to the navigation menu for easy access.

The name of the project is displayed on every screen

to prevent potentially costly errors.

The payment sum needed the user's acknowledgment and approval. I asked our engineer if we could display the sum of the line items selected before the CTA button.

A clear, professional confirmation message rewards the user with success in their task. The buttons on the screen below give the user useful and clear options.

Clear budget approval buttons and a clarification message ease anxiety.

Eliminating the ability to update the project description protects the freelancer from changes to the scope of the project after the money has been agreed upon.

Freelancer ongoing use - Before

Time and money fields are not necessary.

The freelancer already added this information when setting up the project and submitted it for approval.

What is this random circle?

Is it a button?

Is it decorative?

Oh, it actually opens up the project description. Weird.

A project overview on this 1st screen is useful as well as a clear budget approval label. A rejected budget would display: "This budget was not approved" in orange.

The summary of time and pay records have been moved to their respective tabs, making space for a permanent project description area.

Freelancer ongoing use - After

A confirmation message after sending a payment request puts the user at ease. Sharing what happens during the process makes the experience more personal.

Huh?

I added the messaging feature to the main menu as the 4th tab for usability purposes.

Much better