Final Project Modifications

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 notes

In the final review notes of the project, I included these comments/questions for the sign up process:

• 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

• Do the business owners need to set up their company name anywhere?

• Should we note that the business owner/freelancer will be notified if the other user doesn’t support/accept their preferred method of payment?

Freelancer Setup

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.

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.

Additional notes

In the final review notes of the project, I included this questions for the Setup process:

• Where is the flow for the business owner to accept the freelancer’s proposed hourly rate and estimated completion time? (Or vice-versa)

Business Owner Setup

These mockups were similar to the Freelancer setup, and I had similar edits and notes. The difference was in the ‘Create a new project’ screen, since freelancers and business owners would have different approaches.

Similar to the Freelancer Setup, the following edits and suggestions were made for the Business Owner Setup:

• Changing the order of the screens

  • The proposed new order can be seen above in the edited Handshake App User Flow.

• Adding a success pop-up after payment setup

• Adding a confirmation pop-up a project is created, with a link to invite a business owner

• Removing ‘Your name’ field

• Modifying the fields to reflect a proposed budget and desired timeframe

• Removing credit card and paper check from payment options and adding Venmo

• Adding a short, editable message on the invitation so the business owner can review what will be sent

• Questioning the flow for the business owner to accept the freelancer’s proposed hourly rate and estimated completion time (or vice-versa).

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!)

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:

1. The freelancer created the project.

2. The business owner has approved the freelancer’s rate, estimated hours, and the calculated estimated cost.

3. The business owner has added a project description.

4. 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’ wad 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 notes

In the final review notes of the project, I included this comment and recommendation for the Ongoing Use process:

• 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).

Business Owner Ongoing Use

Similar to the Freelancer’s Ongoing Use screens, the first screen of this flow could have two different options, depending on which user created the project. Here, I opted for showcasing a screen with the following assumptions:

1. The freelancer created the project.

2. The business owner has approved the freelancer’s rate, estimated hours, and the calculated estimated cost.

3. The business owner has added a project description.

4. 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.

Adding a tooltip (on hover) on the Overview screen

This can provide the necessary information if it is not clear where the details listed come from (especially if the business owner has not yet approved the freelancer’s numbers).

Changing button text from ‘Pay This!’ to ‘Make Payment’

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 ‘Pending Payments’ on the Pay screen

The business owner can then see payments that were sent but not yet received by the freelancer.

Making the confirmation pop-up easier to understand

“Fly like the wind!’” shows personality, but might not be appropriate for confirming a payment. Also, the pop-up that was provided has text for after the payment is sent with an option to cancel (in a confusing way). I changed it to confirm that the payment should be sent. And I added a recap of the payment details - something that that would require work from the development team.

Additional notes

In the final review notes of the project, I included this comment and recommendation for the Ongoing Use process:

• Users will likely have more than one project going on. There should probably be a dedicated Projects screen where the user can access their list of projects (with options for current / upcoming / completed).

Messaging

Similar to previous sections, I continued with:

Setting a content pattern with the project name above the section title

This keeps all of the sections uniform, and helps users identify where they are in the app.

Cleaning up the text

Removing the ‘Open it’ buttons and changing all ‘Reply Now’ buttons to say ‘Send’. Removing (unread) and bolding unread messages, which is widely recognized to indicate new messages.

Additional notes

I added a note, asking if there would be users beyond the freelancer and business owner. If not, this the pull-down list for recipients is unnecessary, since messages would only be between the two users.

Images on this page were created using Google Slides and Photoshop.