Handshake Project Management & Time Tracking App

WHAT IS IT?

Handshake is a fictional app that connects freelancers with business owners, allowing them to manage their projects and payments in one place. This is my final project from the Fundamentals of UX Writing course offered by the UX Content Collective.

WHAT I DID

  • Write style guide – Define the voice, tone, and style for the app.
  • Edit UI text – Make copy changes on the mockups provided by the designer and add microcopy, tooltips, hint text, and instructions wherever the user needs more guidance.
  • Provide feedback – Point out design flaws, ask questions, and suggest improvements to the team.

TOOLS

Figma

Canva

Google Docs

USER RESEARCH

The user profiles and tasks were provided as part of the project’s instructions. I used this information as a basis for understanding Handshake’s users and ran additional research on Google Trends, social media platforms, and blogs to further understand users’ pain points and the language they use.

Freelancer (Primary User)

Tasks:

  • Invite Business Owners to the app
  • Can create new projects
  • Propose a budget for a project
  • Track hours worked
  • Send invoices to Business Owners
  • Receive payments from Business Owners

Business Owner (Secondary User)

Tasks:

  • Invite Freelancers to the app
  • Can create new projects
  • Accept a budget for a project
  • See hours tracked
  • Approve invoices from Freelancers
  • Review and send payments to Freelancers

STYLE GUIDE

I started by creating a style guide, which will determine the voice and tone, word choice, and capitalization/ punctuation used throughout the app.

VOICE AND TONE

Simple and plainspoken

We use clear, concise language to describe complex terms to help our users reach their goals. We don’t overwhelm users with technical jargon to ensure they feel empowered, not intimidated.

Friendly and helpful

We reassure our users by being light and conversational in our communications. We support them with timely, relevant explanations to help them accomplish their tasks quickly and easily.

Inspiring and upbeat

We celebrate our users’ success and express our encouragement and support through occasional, well-placed messages throughout their journey.

WORD CHOICE & TERMINOLOGY

To determine which words to use throughout the app, I started by listing some of the terms commonly used by freelancers and business owners when they manage their projects and handle money.

  • Freelancers: billable hours, logging/tracking hours, invoice, contract
  • Business owners: project, goals, timeline, bills, proposal
  • Both: budget, deadline, payment, agreement

I then put together a list of words that should (and shouldn’t) be used throughout the app.

  • Freelancer (instead of 1099 worker, employee, contractor, consultant)
  • Business Owner (instead of employer, entrepreneur, CEO, businessperson)
  • bill (instead of invoice, statement)
  • payment (instead of charge, compensation)
  • project (instead of job, gig)
  • track (instead of monitor, observe)

CAPITALIZATION & PUNCTUATION

To ensure consistency, I’ve defined the following guidelines when writing for headings, subheadings, CTA buttons, and tooltips:

  • Generally, use sentence case for every UI component as it’s easier for users to read or scan for important info
  • Always use contractions to make the tone friendly and conversational
  • Always include the most relevant keywords and avoid unnecessary modifiers
  • Avoid punctuations for headings and CTA buttons

HANDSHAKE UI EDITS (BEFORE/AFTER)

Now that I’ve established a rough style guide, I proceeded to edit and improve the UI text for Handshake.

All of my text edits are written in magenta.

SIGN UP

Sign Up screens

PROBLEM/SOLUTION

The current sign up flow has several UI components that are missing and could potentially confuse new users. Some of the problems include:

  • Inconsistent use of capitalization
  • Headers that don’t tell users what to do
  • CTA buttons that don’t tell users what will happen next
  • A success modal that doesn’t tell users what they’ve accomplished and what they can do next

I tried to address these problems by making the headers and form fields more consistent and changing the success message to be a little more positive and encouraging.

MY SUGGESTIONS

  • Splitting the create account and sign in steps will the reduce mental effort for users so they can focus only on what’s relevant to them
  • Adding social media buttons for creating an account/signing in will simplify the process for tech-savvy users
  • Creating a set of welcome screens that outline the key benefits of Handshake will give users a smoother onboarding experience
New Onboarding and Sign In screens based on my suggestions

SET UP

BUSINESS OWNER SET UP

Set Up screens for business owners

SET UP CONFIRMATION

Set Up confirmation screen

PROBLEM/SOLUTION

The setup screens for both user groups are hard to understand and use. The problems I’ve noticed include:

  • Lack of information in each screen that could lead to users asking questions
  • CTA buttons that have inconsistent capitalization
  • Email address field in the 4th screen doesn’t offer any additional instructions for users
  • Success message doesn’t tell users what to do next, and they have no way of closing the modal

The main problem here is ambiguity, so I used action verbs for every header and added subheaders on every screen to make sure users know what they need to do.

I’ve also added clear instructions in the 4th screen to tell users what’s going to happen once they send an invite to their partners, and rewrote the success message to congratulate users and tell them what to do next.

MY SUGGESTIONS

  • Adding icons for each payment method will make the interface more visually appealing
  • We could add a search function that allows users to immediately add the people they’ve already worked with on previous projects
  • We should prepare invitation emails that will be sent to business owners and freelancers when they get invited to a project

ONGOING USE

BUSINESS OWNER ONGOING USE

Ongoing Use screens for business owners

PROBLEM/SOLUTION

This is the key function of Handshake where business owners and freelancers can manage their projects and payments. I’ve noticed a few things that could frustrate users:

  • There are capitalization issues with the CTA buttons
  • The way information is displayed is confusing without headers
  • The tone is inconsistent and there are a lot of idioms being used

I added headers in several screens to help users understand the information displayed underneath. I used nouns for the navigation menu for parallelism and also changed the success message to be simple and plainspoken.

MY SUGGESTIONS

  • We should add 2 confirmation dialogs to let business owners know the outcome of their payment and what to do next if it failed
  • We should add a confirmation dialog when freelancers click on the “Send bill“ button to confirm their action and reduce the likelihood of mistakes
  • We can encourage and delight freelancers by acknowledging their efforts with a well placed pop-up message when they add their work hours

ADDITIONAL DIALOGS

Mockups based on my suggestions

KEY LEARNINGS

ADVOCATING FOR USERS

Working on this project has given me a general idea of how the content design process works and the role the UX writer plays. It’s not just about filling the screens with copy. It’s about understanding how users feel and what they think in a particular moment and helping them accomplish tasks in the easiest way possible with words.

COLLABORATION IS EVERYTHING

When it comes to building a product, word and design go hand in hand. I think involving the UX writer in the early-stage brainstorming sessions and design process goes a long way in making sure the product delivers the best possible user experience, since the writer is able to help determine users’ pain points and define task flows.

FAMILIARITY WITH DESIGN TOOLS

Mastering the basics of Figma has inspired me to go the extra mile in my project. In addition to changing the text, I learned a great deal from manipulating shapes and adding elements that complement the existing screens.