Handshake App

Overview

 

Handshake is a fictional app that I worked on as part of my UX Writing Fundamentals class with the UX Content Collective. The goal of the app is to make invoicing and payments seamless between clients and freelancers, allowing users to propose and approve project and budget details, communicate with each other, and track important milestones. In preparation for the project, I was given the rough workflow for the app as well as two user personas, with the goal of making copy accessible for both user types, clients and freelancers. My objective was to edit the UI for clarity, voice, tone, and style, referencing a style guide of my creation.

Screen Shot 2022-01-09 at 10.51.40 AM.png
Screen Shot 2022-01-09 at 10.49.14 AM.png
Screen Shot 2022-01-09 at 10.50.38 AM.png

Jump to wireframe.

My process

  • I researched key terms used by freelancers & business owners during a workflow and studied the user personas to get a sense of my customers’ needs, as well as pinpointing possible reservations about the app and anxiety related to the process of invoicing and paying

  • I researched freelancing platforms like Upwork and Fiverr to see how they function, bearing in mind that Handshake is a slightly different platform in that the initial work agreement is meant to be solidified offline

  • With my knowledge of familiar terms, I created a list of ideal word choices with rationales for why certain terms were preferable to others

  • Using my findings, I created a style guide that I could reference to ensure Handshake’s voice matched the personality of the product and that all copy was grammatically and stylistically consistent

Style guide highlights

 

User insights

 

For the purposes of this project, I didn’t have real user research, but I was provided two user personas to guide the creation of the style guide. Studying the Handshake user personas and researching online communities of freelancers, I drew the following conclusions about user profiles and journeys.

  • Freelancers may be optimistic that Handshake will make invoicing and payments seamless, allowing them to prioritize their actual work over distracting logistics

  • Clients may be excited about Handshake’s potential to resolve previous frustrations with freelancers, such as not knowing the status of a project, and encouraged that the app is free for their use

  • Both user groups value the independence of self-employment

  • Both user groups may experience stress during the invoicing or payment phase of a freelance agreement

  • Both user groups prefer a simple agreement over complicated formal paperwork

With my understanding of the users’ needs, expectations, and concerns, I created guidelines for Handshake’s voice.

Voice characteristics

  • Informal yet savvy. The voice should evoke the friendliness and casualness of a "gentleman's agreement" while also instilling confidence that all users, both clients and freelancers, are competent professionals who will meet expectations.

    • “Take control of your business by cutting out the small talk.”

  • Trustworthy and direct. The idea behind Handshake is to simplify often complicated logistics, so the language should reflect and highlight the simplicity and security of the process.

    • “Securely send invoices and make payments.”

  • Respectful, NOT irreverent. We want to instill confidence in users. Freelancers fear not getting paid and clients fear receiving late or inadequate work, so the voice should assuage these fears, not make light of them.

    • “Set milestones and priorities because your timeline matters.”

Using these research-informed brand values as a starting point, I created a glossary of preferred terms for the app, addressed circumstantial flexes in tone, and formalized grammatical and stylistic expectations for all copy. Then, I dove into work on the wireframe.

Handshake app sign-up

 
Before
Screen Shot 2022-01-02 at 12.16.32 PM.png

After

Screen Shot 2022-01-02 at 2.07.38 PM.png

What I did

  • Employed a savvy but informal voice while crafting intuitive copy to highlight the benefits of Handshake

  • Simplified the UI by making “log in” and “create account” separate pages

  • Added a profile creation page to avoid cluttering later screens with prompts for information irrelevant to the task

  • Clarified next steps for the user by explaining they can either create their first project now or later

Handshake app onboarding

Client view, before

Screen Shot 2022-01-02 at 2.17.16 PM.png

Client view, after

Screen Shot 2022-01-02 at 2.17.57 PM.png

Freelancer view, before

Screen Shot 2022-01-02 at 2.24.52 PM.png

Freelancer view, after

Screen Shot 2022-01-02 at 2.28.35 PM.png

What I did

  • Cut extraneous information, including question fields irrelevant to the task, and moved payment setup to a single screen

  • Reworked headers to employ active voice and an instructive tone

  • Resolved user concerns through the creation of tooltips and clarifying microcopy

  • Reworked button copy for consistency and clarity

  • Reordered payment methods for the freelancer view from most to least common

  • Ensured copy was stylistically consistent and in line with Handshake’s brand principles based on the style guide

 

Handshake client dashboard

Before

Screen Shot 2022-01-09 at 11.39.35 AM.png

After

Screen Shot 2022-01-09 at 11.40.15 AM.png

What I did

  • Cut unnecessary copy and reordered fields, such as the project description, to make screens cleaner and more intuitive

  • Moved and adjusted fields between screens when their placement was not intuitive, such as changing “Total request for pay” on the Time screen to “Total payments due” on the Invoice screen

  • Used consistent terms chosen from research and documented in the style guide

  • Standardized currency and timestamps to improve accessibility and translatability

 

Handshake freelancer dashboard

Before

Screen Shot 2022-01-09 at 11.31.21 AM.png

After

Screen Shot 2022-01-09 at 11.32.11 AM.png

What I did

  • Ensured stylistic consistency and consistent use of chosen terms

  • Reworked button copy for clarity, including deleting the unlabeled button and replacing it with a button that has straightforward copy to access the project description

  • Condensed the confirmation screen message to cut unnecessary words and make the user’s actions and consequences easily understandable

  • Moved messaging to the Invoice screen to make the freelancer view parallel to the client view

 

Handshake payment confirmation

Before

Screen Shot 2022-01-09 at 11.39.58 AM.png

After

Screen Shot 2022-01-09 at 11.40.36 AM.png

What I did

  • Added a confirmation screen that informs the user of what will happen next to reduce the likelihood of mistakes

  • Rewrote the success message to make the user’s actions clearer and offer encouragement through data about project progress

  • Added a button to return to the project dashboard

 

 

What I learned

My work on Handshake taught me the fundamentals of UX writing: how research informs the creation of a style guide, which allows the writer to enhance an app’s usability and appeal through employing accessible language, intuitive instructions, and consistent voice. Through this class and project, I learned how to create a style guide, modify a wireframe in Figma, give constructive feedback on design, and best of all, utilize my expertise in language to help users reach a goal.