Handshake

Handshake is a fictional project management and payments app for freelancers and business owners, created by The UX Content Collective (UXCC).

In this app:

• Business owners use the app to pay freelancers and track the progress of hours worked

• Freelancers use the app to bill business owners and report progress on a paid project

• The two user types share the app. Each user has a view of one side of the app: one uses it for billing and the other for paying.

Freelancers are the primary users, and business owners are the secondary users.

Problem:

The Handshake app lacks a style guide, concise copy, and clear information hierarchy.

Approach/ Process

For this project, I created a style guide. I was provided wireframes of the welcome screens, sign-in screens, onboarding, and messaging center, to edit for a design review. My copy edits are highlighted in pink font.

The overall goal:

To make the Handshake app an easy, fast, and convenient experience for users.

Notes for developers and/or product managers:

With this project, I was asked to leave notes and questions for the developer and product manager. This allowed me to use my UX research and design skills to further advocate for the user by suggesting and asking questions. These can be found under each edited section titled "after".

a. User personas

UXCC provided two user personas (below). The Freelancer is represented by a young web designer who is used to using technology and values working for herself. The business owner is represented by a small business owner who isn't as familiar with technology but desires to stay relevant with an up-to-date website.

b. Competitive analysis

After reviewing user personas, I researched how each user type (Freelancers and business owners) typically handles money and payments without the use of the Handshake app.

I had a solo brainstorming session to determine the following:

• general terms used to describe people who work by the hour but aren't employees

• possible 8-10 word taglines for the Handshake app

• How I would describe the Handshake app to a non-techie friend in the simplest way.

Next, I ran a competitive analysis on real-life competitors (Fiverr, Upwork, Linkedin, and Legiit), to see how they crafted their UI copy for their users.

Lastly, I conducted a Google Trends search (example shown below), to see what terms were preferred by each user type. These terms influenced the "word choice" section of the style guide and helped me determine when, and under what circumstances, I should use certain terms in each user's journey.

Link to full style guide:

https://docs.google.com/document/d/1EZOKacFZwkzb_uu9DYhtRLiacjz3-n-bAGYBdySb82o/edit?usp=sharing

Sign-in & Set-Up Screens

For welcome and sign-in screens, I started by adding copy that fully describes what the Handshake app is all about to minimize confusion, get users excited about the benefits of the app, and encourage them to "Get Started" with the sign-in process.

Adding field titles and hint text in these fields was done to help the user sign in or create an account quickly and confidently.

The pop-up confirmation text was kept short and simple to:

1. Get the user enthusiastic about continuing the process and reaping the benefits of the app.

2. Reassure the user is still on the right path.

3. Encourage the user to continue.

Questions & Suggestions:

• Sign-in screen: add a “Sign In” button

• Sign-in screen: add a “Create My Account” button

• Let users know how many steps are anticipated in the "Create Your First Project" screen with a progress bar.

Before:

Changing the screen headers was my first priority when editing these screens. I noticed that the screens were a mixture of commands, statements, and instructions and needed to be more cohesive. I decided to make them all instructions to further guide the business owner along the onboarding journey.

Text field titles and hint text were a necessary add-on for ease of flow and to minimize confusion and doubt.

The button texts were changed to align more with the action. Each button directed the user to the next, so I decided that using the word "Next" would be the best option.

Aside from grammar and style edits that reflected the style guide, I also added microcopy on the "Invite Freelancers" screen to build a trusting relationship with the business owners to let them know the Handshake app is dedicated to helping them successfully connect with freelancers.

For the confirmation pop-up, the icon and copy work together to let the business owner:

1. Know they completed the task correctly.

2. Understand what would happen next.

3. Have the opportunity to confirm what they were told by pressing "OK".

4. Build more trust with the Handshake app by confirming they understand our promise to notify them.

Questions & Suggestions:

• Add a progress bar that allows users to see how many steps are needed to set up a project to reduce anxiety and cognitive overload

• Pop-up confirmations:
  Add an “x” at the top right corner to exit out of the screen.

Onboarding: Freelancers

As in the previous screens, changing the screen headers was my first priority when editing these screens. I noticed that the screens were a mixture of commands, statements, and instructions and needed to be more cohesive. I decided to make them all instructions to further guide the freelances along the onboarding journey.

Text field titles and hint text were a necessary add-on for ease of flow and to minimize confusion and doubt. There was a need for a little more hint text for the freelancer's journey as they are the primary users and require more information input.

The button texts were changed to align more with the action. Each button directed the user to the next, so I decided that using the word "Next" would be the best option.

For the "Choose How to Recieve Payments" screens, I made sure to add payment options so that the freelancers had the same options as the business owners.

Aside from grammar and style edits that reflected the style guide, I also added microcopy on the "Invite Business Owners" screen to build a trusting relationship with the freelancers and let them know that the Handshake app is dedicated to helping them successfully connect with business owners.

For the confirmation pop-up, the icon and copy work together to let the business owner:

1. Know they completed a task correctly

2. Understand what would happen next

3. Have the opportunity to confirm what they were told by pressing "OK"

4. Build more trust with the Handshake app by confirming they understand our promise to notify them.

Questions & Suggestions:

• Add a progress bar that allows users to see how many steps are needed to set up a project to reduce anxiety and cognitive overload

• Question: "Enter Project Details" screen: Would it be possible. for the app to automatically calculate the "total budget" so users don't need to do as much work?

• Pop-up confirmations: Add an “x” at the top right corner to exit out of the screen.

Ongoing Use & Messaging Center:

Business Owners

These screens are for a Business Owner who's actively using the app along with his Freelancer client.

Keeping the header copy the same was also important for these screens since this is where the business owner will spend most of their time working on projects with freelancers. At this point, the business owner is more familiar with the app. I decided to make the headers statements so that the Handshake app doesn't come off too "pushy" and acted more like a silent business partner.

Adding text field headers that better reflect and describe the information needed from the business owners was done to help this journey be easier and faster.

Using the style guide I created, I was able to make all currency and date formatting the same across the screens.

Buttons were changed to make saving information and sending payments less confusing.

The confirmation pop-up was changed to ensure that:

1. The business owner was aware of the button that was previously pressed

2. Make sure the business owner knew what would happen if the "send" button was pressed.

3. The business owner was reminded of how much money is being sent.

4. Encourage the business owner to continue the process by announcing they are close to their goal.

The copy on the messaging center was changed to look more similar to an email or chat format to prevent cognitive burden and confusion.

Questions & Suggestions:

• Questions for developer or PM: What would the business owner do if the budget looks wrong? Does the app handle that or should the partners address this issue outside of the app?

• Question for developer or PM: What happens when the user checks the box? Is the freelancer notified?

• Consider a redesigned UI for messages to look more like a chat or;
  Add bold text for unread messages to remove redundant copy.

Ongoing Use & Messaging Center:

Freelancers

These screens are for a Freelancer who's actively using the app along with their Business Owner client.

Similar to the previous screens, keeping the header copy the same was important for this part of the freelancer's journey. I decided to make the headers statements to not only avoid coming off "pushy" but to show that the Handshake app is here to support and more importantly, respect freelancers--who take pride in their ability to work for themselves.

Adding text field headers that better reflect and describe the information needed from the freelancers was done to help this journey be easier and faster.

Using the style guide I created, I was able to make all currency and date formatting the same across the screens.

Buttons were changed to make saving information and sending payments less confusing.

The confirmation pop-up was changed to ensure that:

1. We congratulate the freelancers on completing a project task.

2. We make sure the freelancer knew what would happen next and when to expect to be compensated for their work by giving them a time frame.

The copy on the messaging center was changed to look more similar to an email or chat format to prevent cognitive burden.

Questions & Suggestions:

• Question: I changed the button to “Save”. Will this save the proposed budget and automatically notify the Business Owner?

• Add an “x” to the top corner for the option to exit out of the pop-up

• Consider a redesigned UI for messages to look more like a chat or;
  Add bold text for unread messages to remove redundant copy.

Additional Questions & Suggestions:

Consider adding a consistent navigation bar at the bottom of the screens with the following icons:
Inbox - to give users easier access to messages
Dashboard - to easily access the project
Account- to manage personal and payment info.

Coming into this project with an initial love for UX research, I was expecting to do extensive research before creating and editing wireframes. This helped me see how different UX writing is from the other UX disciplines. I am aware that there may be more research that goes into other UX writing projects. I'm looking forward to the experience of being the UX writer amongst the research team!

I wanted to share my understanding and knowledge of the next steps in the UX process. After presenting the initial copy edits there should be:

• High fidelity mockups

• Team reviews

• Prototyping & user testing

• Executive reviews

• Hand-off to Developers

• Launch

• Post-launch analytics