Handshake
Online Billing App for Freelancers and Business Owners
If this were a real project and I were starting this from scratch, I would start out with a problem statement and solution. What goal am I trying to achieve? What problem am I trying to solve? Who am I trying to solve it for? What is my solution?
After figuring out what the goal is, I would move on to competitive research and user testing to empathize with the users and define who they are.
Since I was given the problem to solve as well as user personas, my process started from creating the voice and tone of the app. Based on the user personas and the information I was given on the background of the app, I came up with descriptive words for the tone and voice of the app:
Since I was dealing with two different categories of users, I went a little bit deeper:
Once I figured out what the voice and tone sounded like, I came up with examples such as terms to avoid and terms to use to be completely clear. I also included my reasoning behind those specific terms so that the team was aware of my thought process:
I then created sample emails. I wrote a welcome email and cancellation email:
After the emails, I started working on the copy in the app, writing notes on the screens with my suggested edits and then creating an edited version of the screen based on my notes. I started with the setup screens:
Here are my edits of the setup screens laid out together. The edits are in magenta:
I then moved on to the onboarding setup screens for both the business owner and the freelancer. The challenge here was to make sure all of the screens were consistent and efficient within the onboarding flows themselves in addition to the business owner and freelancer onboarding flows. Since there were a lot of small details, I started with the headings first:
I moved on to notes for the button copy:
I then finished the suggestions for everything else on the screen such as the placeholder text and payment options:
Here are the edited screens together for the business owner onboarding flow:
I worked on the same process with the freelancer onboarding setup screens, starting with the headings:
Then I made suggestions for the button copy:
The first screen was the main focus for the next step. There was a lot to unpack in terms of clarity and renaming the text fields:
The last suggestions for this flow focused on the payment setup details and making sure those were consistent with the flow from the business owner and the goals of the brand:
Here are the edits for the freelancer onboarding setup screens:
The comments for the project detail flows below were similar to the comments for the other flows. The main issues were consistency of text and content between the two flows, and remembering to keep the right tone of voice for the brand in mind:
After I finished editing, I wrote out some additional questions and notes I had for the designer:
Project Cover Image Attribution: <a href="https://www.freepik.com/vectors/background">Background vector created by freepik - www.freepik.com</a>
