Introduction
As part the UX Writers Collective (UXWC) course, students were introduced to Handshake, a fictional payments app designed for freelancers and business owners.
About Handshake
Primary User: Freelancer
They will use the app to invoice business owners and report progress on a project.
Handshake collects a 1% fee whenever a freelanced gets paid.
Secondary User: Small business owner
The will use the app to pay freelancers and track the progress of a project.
The business owner uses the app for free.
We were provided with user personas for the freelancer and business owner:
Course Project Work
Throughout the course, students tackled Handshake-related project work that included informal research, determining voice and tone, brainstorming taglines and headline + body sentence pairs, editing landing page text, email content, and CTA buttons, prepping for testing and design reviews, and handling feedback.
These exercises were beneficial in preparing for the final project.
Informal Research
This helped us better understand our users and related terminology.
Names for project-based workers who are not employees:
Freelancer, contract worker, consultant, 1099 worker, self-employed (sometimes)
Terms related to making/receiving payment:
Invoice, estimate, hourly rate/project rate, deposit, retainer, contract, NET 30/60/90, time (or project) tracker, client, ACH (Automated Clearing House), delivery, recurring payment, W-9 form, 1099 form
Language used when freelancers work with business owners:
Scope, agreement, contract, budget, payment plan, project updates/tracking, time management, open communication, deliverables, deadlines, approval, additional materials
Determining Voice & Tone
Using these emotions as a jumping off point, I later created an entire Content Style Guide.
Emotions users might feel while using the Handshake app:
Excited to be empowered by the tool.
Nervous that payment might not work as seamlessly as they hope.
Worried that they are not filing the proper paperwork.
Anticipation about typing in the wrong thing (freelancers), paying too early (for business owners).
Relief when payments are made easily (for business owners).
Satisfaction when payments are received easily (for freelancers)
Brainstorming Taglines
Project payments. Now as easy as a handshake.
The power of payment in the palm of your hand.
Manage freelance projects and payments on the go.
Handshake takes the paperwork out of payments.
Brainstorming Headline + Body Sentence Pairs
To be used for onboarding tour screens that would work for both user types.
Headline: Simple as a Handshake
Body: Easily manage projects and payments.
Headline: Instant Payments
Body: No more paper checks or trips to the bank.
Headline: Project Updates
Body: Set a schedule that works for you.
Headline: Tax Forms Made Easy
Body: Handshake generates the forms you need.
Headline: You’re in Control
Body: Customize your settings for how you work.
Headline: Focus on Your Project.
Body: Let Handshake simplify your payments.
Editing Landing Page Text & CTAs
HEADLINE
Manage Freelance Projects and Payments on the Go
BODY TEXT
Let Handshake take the paperwork out of payments.
Are you a freelancer?
Track time spent on projects
Instantly send invoices and track payments
Communicate directly with business owners
Are you hiring a freelancer?
Stay up-to-date on budgets and timelines
Easily make payments
Communicate directly with freelancers
PRIMARY CTA
Download Handshake
SECONDARY CTA
Get Email Updates
HEADLINE
Editing Email Content
Email for users who have just signed up:
Welcome to Handshake, [name of user]!
BODY TEXT
You’re one step closer to making your projects work for you
Handshake streamlines projects for freelancers and business owners with:
Easy project tracking
Simple invoicing and payments
For more information or to open a help ticket, visit support.handshake.com.
CTA
Get Started with Handshake
Email for users who just canceled their account:
Note: There is the risk of decision fatigue with all of the links below, so a well designed layout can make all the difference.
HEADLINE
We’ll miss you
BODY TEXT
Your Handshake account was canceled on [date].
You can still access your account through [end of subscription period].
If you accidentally canceled your account, you can reactivate it. (insert link)
Did you know you could pause your account?
Learn more about that pausing your account here (insert link).
We would love to hear from you
If you had any issues with the app or would just like to offer feedback, please share your thoughts with us. (insert link)
Keep working better, together!
The folks at Handshake (or the name of the customer service person in charge of cancellations)
We’ll be here
Keep tabs on what we’re up to by subscribing to our newsletter. (insert link)
Final Project Overview
Students were given a fictional scenario in which the Handshake app designer sends a mockup of several screens on Google Slides doc where she has filled in text, but now needs our help. We would be sending back the edited doc to help her prepare for a final design review with company execs.
Students were also reminded that “we’re not redesigning based on our own imagination, opinions, or assumptions,” but instead “helping the designer make the experience great by editing the UI text to make sure users have all their questions answered and instructions are clear.” And that any design flaws should be pointed out tactfully with suggestions.
The Google Slides doc included the following sections:
Sign Up
Business Owner Setup
Freelancer Setup
Setup Confirmation
Business Owner Ongoing Use
Freelancer Ongoing Use
Messaging
Considerations
Whether the edits were minor (more obvious “don’ts” like misspellings, excessive exclamation points, or inconsistent writing conventions) or more significant (suggestion of new fields or modifying information hierarchies), I paired what I learned in the UXWC course with my own drive to create intuitive, clear, and concise user interfaces that reflect the goals of both the user and business.
Provided Overview of User Flow
The modifications shown in the edited user flow and in the breakdown below include some changes made since submitting this project at the end of the course. These edits were based on a number of factors, including feedback from the course reviewers, the discovery of inconsistencies, and overall clarity.
Edited Overview of User Flow
This was created for this portfolio and not submitted with the project.
Final Project Modifications
Selected Sections
Sign Up
Both the freelancer and business owner see the same three signup screens.
Edits and suggestions include:
Prioritizing ‘Create an Account’
If this were an actual company, I would confirm with the development team that the app would be able to recognize account holders and default to the Log In screen. In the final notes of the project, I added suggested text for the Log In screen:
Heading: Let’s Get to Work (with fields for email and password)
Smaller text and text link: New here? Create an Account
Flipping the options for the freelancer and business owner
Since the freelancer is the primary user, they should be the first option.
Cleaning up the terminology and text
If Handshake will be referring to their users as Freelancers and Business Owners, those terms should be used from the beginning of the the user journey. And the headlines needed to be more descriptive.
Giving password instructions and denoting required fields
It can be frustrating to have a password choice rejected if there are unknown requirements. Similarly, it can be frustrating if the user cannot proceed without inputting a last name - if they are not told that it is required.
Additional note(s)
In the final review notes of the project, I included these comments/questions for the Sign Up process:
Progress Bar
It might be beneficial to users to see a Progress Bar during the sign up and set up process to see where they are and what is left to complete. Since it’s not a long process, it could be motivational to see that they’re almost done. For example: Create Account • Payment Setup • Start a New Project
Company Name
Do the business owners need to set up their company name anywhere?
Notification
Should it be noted that the business owner/freelancer will be notified if the other user doesn’t support/accept their preferred method of payment?
Freelancer Setup & Setup Confirmation
The ‘Business Owner Setup’ was the next slide, but since I chose to flip the priority in the Sign Up screen, I will show the Freelancer Setup screens next.
Setup edits and suggestions include:
Reordering the screens
Why? The payment setup should be completed before a project is started.
The proposed new order can be seen above in the edited Handshake App User Flow.
Adding a success pop-up or message after payment setup is complete with the following text:
• Success! You are now ready to receive payments.
• Buttons: Create a New Project, Go to My Account
Handshake is a payment app, so it is important that the user is clearly told that this essential step is complete.
Adding a confirmation pop-up or message after the creation of a project with a link to invite a business owner
The user will feel reassured knowing that the project has been successfully created. After creation, the next step is to invite the business owner.
Removing the ‘Your name’ field
That information was already captured in the sign up process.
Modifications to the fields on the ‘Project’ page to include: hourly rate and estimated time to complete project (which would then calculate a projected cost - with help from the development team).
Freelancers do not typically set the budget, but do often set their rate, and estimations for how long certain tasks/projects can take.
Removing credit card and paper check from payment options and adding Venmo
Freelancers do not typically accept credit cards, and paper checks are used infrequently. Accepting checks would also defeat the purpose of Handshake’s promise to make “payments quick and easy”. Direct deposit should stay, since business owners can set that up through Quickbooks or other accounting software. And Venmo has become an increasingly popular payment method.
Adding a short, editable message on the invitation
This will help the freelancer review the invite before it goes to the business owner.
Setup Confirmation edits include:
Cleaning up the text and adding a ‘close button’
The provided text was redundant and used the wrong terminology. (And one too many exclamation points!)
Additional note(s)
In the final review notes of the project, I included this questions for the Setup process:
Missing Flow
Where is the flow for the business owner to accept the freelancer’s proposed hourly rate and estimated completion time? (Or vice-versa?)
Freelancer Ongoing Use
The first screen of this flow could have different options, depending on which user created the project. Here, I opted for showcasing a screen with the following assumptions:
The freelancer created the project.
The business owner has approved the freelancer’s rate, estimated hours, and the calculated estimated cost.
The business owner has added a project description.
The project is already in progress.
Notable changes to these screens include:
Setting a content pattern with the project name above the screen title
This allows users to know where they are at a glance. This is especially helpful if the user has multiple projects, as this pattern can help them quickly confirm where they are.
Displaying information on the Project Overview screen that was previously entered
The details input when the project was created should appear here.
Changing ‘Pay’ to ‘Invoice’
The freelancer is not making payments. They are sending the invoice to receive payment.
Changing ‘Bill’ to ‘Invoice’
This was a term I researched earlier in the course. I learned that while both terms are often used interchangeably, invoices are typically issued to collect money from clients, where bills are often issued by suppliers for products or services. For the purposes of the Handshake app, ‘invoice’ is the better choice.
Changing the fields on the Time Tracker screen to ‘Date’ and ‘Hours’
The freelancer might not input their hours each day, so having a date option allows them to input hours for previous days. Also, their hourly rate has already been added, so the app should be able to calculate invoices based on hours and dates worked.
Showing both paid and unpaid invoices under ‘Sent Invoices’
It is helpful to see both possible subsections.
Making the confirmation pop-up easier to understand
“Are you sure?” can be a confusing headline, especially when you are confirming a cancellation request. (Add a wink and laugh to the way it was actually written in the provided mockup: “Are you for sure?”) I added text to let the user know that the business owner would be notified about this action, since they have already received the invoice. (This would require input from the development team.)
Additional note(s)
In the final review notes of the project, I included this comment and recommendation for the Ongoing Use process:
Projects Screen
Users will likely have more than one project going on. It might merit a dedicated Projects screen where the user can access their list of projects - with options for Current / Upcoming / Completed.
