Handshake App
The project
Handshake is a project management and invoicing app for freelancers and small business owners. This fictional app was my project during the UX Writing certificate course from the UX Content Collective (formely known as UX Writers Collective).
I present the key results of my work in the following.
My role:
During the project, it was my job to support the product as a UX Writer and use my input to make this an app that is easy to use, fun to use, while also serving the company’s business purpose.
To achieve this, I analyzed our competitors, our potential customers and the user-typical environment.
Adding all this gathered information, I finally developed a strong, unique brand personality with a coherent tone and voice, which I used to bring the product and eventually the app to life.
Mentimeter (Polls, Word Clouds, Presentations)
Typeform (Surveys)
Google Surveys (Surveys)
Google Trends (Trend search)
CorelDraw 2021 (Graphics)
Paint.NET (Photo Editing)
Figma (Mockups)
Congree (Terminology Database)
Adobe Indesign (Styleguides)
Hemingway Editor (Readability Checker)
Slack (Communication with Team)
Atlassian Jira (Project Management)
Table of Contents
Given facts about the Handshake app
User functionalities
Freelancers
Freelancers pay Handshake a 1% fee of their earnings once they get paid.
Small business owners
Small business owners use the app for free.
The app is „shared“ by both user types. Depending on which user type logs in, they receive their own view of the app with individual application options.
Persona profiles
My persona analysis and some ideas
When analyzing the personas, I have identified the most important and most interesting key points for my work, which I kept in mind for the ongoing project.
Finding the right voice & tone concept
My approach
During the process of finding the right voice & tone concept, there were many aspects for me to consider. I asked myself:
- How do our competitors sound?
- How do we sound at present, and how would we like to sound in the future?
- What are our values and mission (and what do we want to express)?
- How do our customers want to be addressed?
- What feelings do our customers go through when completing their business tasks?
- Could customers have concerns, fears, worries using our product? Or are there anticipations and expectations that must definitely be met or even exceeded? (Excitement needs, performance needs [Kano model])
- How can we transform customers‘ negative feelings into neutral or even positive feelings with the help of Voice & Tone?
- And above all: What do we definitely not want to sound like?
In addition to a comprehensive competitor analysis, where I summarized the results in a voice & tone profile for each competitor (primarily to avoid Handshake sounding exactly like any of the competitors), I created a series of interview questions that we asked all our employees from throughout the company.
In conjunction with our mission statement, we created an initial voice and tone profile for Handshake.
As we progressed, I designed surveys that we would sent out to potential users. Based on the results, I worked with the team to create our declarative statements that are our guiding principles to strive for.
This was an iterative and transparent process that always involved all employees (through sentiment surveys, quick polls, etc.).
Some examples of the documents I created to crystallize a tone & voice profile
Further action: Style guide and terminology database
This was followed by the creation of a binding content style guide and the establishment of a termbase to ensure that all communication with our users follows and applies a consistent approach.
Because I know how important accessibility and relevance are when using guidelines, I have chosen a central repository for the guidelines and the terminology database. A sophisticated roles and rights concept was implemented with the possibility of passing on suggestions and changes to responsible persons.
This guarantees that anyone can access them at any time, that changes do not pass unnoticed, and that colleagues are encouraged to collaborate.
Given task: Landing page rewrite
Task description
My landing page rewrite
Given task: Write an email for freelancer who just signed up to use the Handshake app for the first time.
Given task: Write an email for a freelance customer who just canceled their account.
Given task: Mockup redesign
Task description
My approach
After reviewing the mockups I was given, I first did a brief analysis of the current state, sketching out what I thought needed improvement.
Then, using the style guide I created, I redesigned the mockups, taking into account the terminology entries to make sure to be consistent.
I also considered my thoughts and ideas about the personas and added elements for an improved user journey.
Additionally, I added comments to these redesigned mockups to have a dialogue with the whole product team and see what we can implement together and how we can do it.
Given designs with my brief analysis of them (click on entry)
Major design flaws and elements that need improvement:
- Welcome screen: There is no meaningful interaction option on and it does not add any value to the user.
- Missings buttons (e.g. how to sign up or create an account without being able to click a button?).
- Inconsistent text formatting (e.g. capital letters/mix).
- Inconsistent/missing field formatting (sometimes with/without placeholder text, some fields have no labels at all…).
- Inconsistent syntax (Sign in vs. Start an ACCOUNT).
- Inconsistent terminology (To give just one example: Start an account vs. create a new account vs. set up an account)
- Spelling and punctuation errors (projeft etc.).
- Screen headings are unhelpful and not fit for purpose (Now?, Next, why are you here? – Well, shouldn’t we tell them?)
- Running text format of the password requirements makes it hard to read.
- Microcopy that may be meant to be funny can easily come across as presumptuous or offensive. (You can thank us later!)
- Some do not interact with the following texts (Next, why are you here? Create a projeft [sic!] to work on: I am the…….[sic!] – What do these sentences have to do with each other?)
Major design flaws and elements that need improvement:
- Inconsistent formatting (e.g. mix of heading placed left or center).
- Inconsistent text formatting (e.g. capital letters/mix).
- Inconsistent/missing field formatting (sometimes with/without placeholder text, some fields have no labels at all…).
- Inconsistent syntax.
- Button texts say nothing about the action they perform, nor what awaits the user.
- Inconsistent terminology (e.g. button texts).
- Spelling and punctuation errors.
- Screen headings are unhelpful and not fit for purpose (e.g. What is your project name? as screen heading, although this question appears to refer to only one field on the screen.)
- No exit option of the modal.
- Microcopy on modal needs optimization.
- Lack of explanation for the user.
- Excessive use of exclamation marks.
- Similar headings for different setups (How would you like to get money? vs. Set up your preferred payment method.)
- Too many screens with too little content. The cognitive load is low, but the lack of information about the total number of screens means that there is a high risk that the user will jump off and become annoyed by the large number of different screens.
Major design flaws and elements that need improvement:
- The cognitive laod here is quite high. You have to read very carefully to understand what the screens are about.
- We should give the business owners more reliability and the possibility to calculate their expenses. For example, they need to know in advance what amount and when they have to pay. Based on our personas, we know that business owners may employ multiple contractors and therefore sometimes fall behind on payments.
- Unclear prompts (What does it mean when Budget accepted & approved is clicked?).
- Missing microcopy.
- No specification of input formats.
- Inconsistent placeholder text.
- Inconsistent button text.
- Inconsistent text formatting (e.g. capital letters/mix).
- Inconsistent/missing field formatting (sometimes with/without placeholder text, some fields have no labels at all…).
- Inconsistent syntax.
- Presumptuous tone of voice in modal texts (and it also makes users insecure – Hope you didn’t make a mistake……[sic!]).
Major design flaws and elements that need improvement:
- Design is very confusing and not very inviting.
- It is not easy to find the message section in the main menu.
- Cumbersome user navigation.
My redesign – Different options to become a Handshake user (click on entry)
We want to provide an app that is quick and easy to use.
I suggest that we drop the original „welcome“ screen, as it doesn’t support the user’s intention to use the app, nor does it provide any other added value.
Instead, we should give the user the option to either sign in or create a new account. Since we‘ ve also intended for users to be able to invite other users, we should offer invited users the opportunity to enter their code, which they received from their business partner, right on the app start.
Slogan Let’s get business done! With Handshake instead of Welcome: As we have chosen a winning slogan that speaks directly to the users and invites them to jump straight in, I would place this slogan on the start screen.
Showing password: Especially when typing on a small mobile phone keyboard, input errors often happen. This is annoying, but even more annoying when you can’t see where you made a mistake. Therefore, we should include the possibility to show the password. Since we don’t know in which environment the user is using the app, by default the password should be hidden by asterisks when entered to ensure security. So the eye symbol should be open, because the user has to click on it to see the password.
Forgot password?: People forget passwords. Especially nowadays, when everything is managed online. So let’s include a Forgot password scenario.
Keep me logged in: Many users want to use their apps as quickly as possible without having to log in first. Therefore, I would suggest that we integrate a corresponding checkbox, which we activate by default. Studies have shown that users often overlook this option because it is an extra step before logging in.
New to Handshake?: Now? (see on given designs) is not a good headline, because it’s not at all clear what is actually intended by it. Let’s ask instead: New to Handshake?
Suggestions @Product team:
Take the tour: It would be great if we could give new users who are still unsure about using our app a chance to take a tour of how our app can make their lives easier. We could show different screens, e.g:
- Work together
Simply invite your business partners. - Follow your project
It’s easy to keep an eye on your business. - Effortless accounting
Make business professional, simple and fast. - Safe payments
Always transparent and highly secured by updates.
Alternative logins: We should think about offering the possibility to log in alternatively via social media, such as LinkedIn or others.
Suggestions @Product team:
We should think about providing existing users with a screen that informs them about the latest news on the project and also gives them a quick start on what to do.
Greeting: We should always greet users by their first name, because it makes the relationship more personal. In addition, it is common small talk to ask how the day is going (see our declarative statements: When we write for our users, we are friendly and casual)
Let’s get to work!: Let’s motivate our users to get to work. That’s what they’re there for! 🙂
News on your project: This is where the user can see at a glance what has happened since their last login, e.g. whether there are any new messages (which we can also send via push message to their cell phone) or if there are any tasks pending.
CTA fields: Maybe freelancers just want to log in briefly to add their working hours. Then we could offer a quick entry to do just that. The same goes for the business owner.
Based on our declarative statements, I would like to make the registration process as casual as possible. For this reason, the screens will open with questions in a casual tone, like small talk.
We also want to appear trustworthy. No one likes to give out personal information, so under the heading questions, where necessary, there is also a brief explanation of why we need this information.
*Fields required: Form fields that are necessary to be filled in should be marked as such.
First name: Asking for the first name gives us the advantage that we can address the users personally and also identify them on the message board in an easy way.
Last name & Address: We want an app that meets all legal requirements. This means that we need to collect data to guarantee that freelancers submit legally binding offers and invoices. Name and address are mandatory details.
Already an account? Log in: We should offer the possibility to go back to the login screen.
Suggestions @Product team:
Address search: Research shows that users drop out of registration processes if the form fields are too numerous. However, since entering the address is necessary for legal transactions, the best option would be to integrate a service like Google’s Place Autocomplete or Loqate to automatically display addresses as the user types.
It also allows us to internationalise the address entry process, as address entry formats vary widely around the world. However, since even Google sometimes reaches its limits, we should enable the user to set the address manually. The address search should speed up and simplify the process and reduce the cognitive load.
Show input errors: Instead of waiting until the user has filled out the entire form before we point out errors, it would be good if we inform the user about incorrect entries as soon as the system detects an error.
For example, empty fields or invalid email addresses (missing an @, for example) could be detected and shown directly as soon as the user clicks outside the form field.
Password: Especially when typing on a small mobile phone keyboard, input errors often happen. This is annoying, but even more annoying when you can’t see where you made a mistake. Therefore, we should include the possibility to show the password. Since we don’t know in which environment the user is using the app, by default the password should be hidden by asterisks when entered to ensure security. So the eye symbol should be open, because the user has to click on it to see the password.
Password requirements: We need to show the password requirements the entire time the field is selected, otherwise the password process can stretch unnecessarily and frustrate the user a lot if they have to start it several times.
Furthermore, we should design the requirements in such a way that they can be quickly captured, e.g. in the form of a list (not as running text!). It would be great if we could live check the requirements during password entry and show our user which requirements are left to be matched.
Verify email address: We need to verify the user’s email address for legal reasons (@legal team, could you please give us some advise here). Also, we want to send our users emails during their user journey. It would also be useful to give them the option to set up notifications, for example when a payment is received or to motivate them to finish the project (for example when they reach the halfway point).
Nice to meet you: We should address the user by name, because that’s what we want to be: friendly and casual.
Create your first project: We need to motivate the user to create a project, so it would be good to make them want to do it right from the beginning.
Modals
We simply can’t do without them, so it’s a good idea to motivate our users as soon as possible to invite their business partners.
- Now let us know who you are helping to realise a project. (Yay, I help someone to realize a project!)
- Now let us know who you are helping to realise your ideas. (Yay, someone is helping me get my project done!)
To make invited users feel welcome, we should address them accordingly. This includes calling them by name and giving them a warm welcome.
[first name of the inviting user] can’t wait to work with you on the project [project name the inviting user has been entered]: Gives the invited users immediately a feeling to be in the right place and to look forward to the upcoming cooperation.
*Fields required: Form fields that are necessary to be filled in should be marked as such.
Address: We want an app that meets all legal requirements. This means that we need to collect data to guarantee that freelancers submit legally binding offers and invoices. Name (We already have their name from the inviting users) and address are mandatory details.
Address search: Research shows that users drop out of registration processes if the form fields are too numerous. However, since entering the address is necessary for legal transactions, the best option would be to integrate a service like Google’s Place Autocomplete or Loqate to automatically display addresses as the user types.
It also allows us to internationalise the address entry process, as address entry formats vary widely around the world. However, since even Google sometimes reaches its limits, we should enable the user to set the address manually. The address search should speed up and simplify the process and reduce the cognitive load.
Modals: There is a difference between freelancers and business owners: Freelancers have more possibilities to interact with the app.
- Since we want to motivate freelancers to enter their project details, we directly ask them to do so and lure them with money. 🙂
- For business owners, a major motivation to use this app is to keep track of their project. We show them our dashboard right at the beginning.
We simply can’t do without them, so it’s a good idea to motivate our users as soon as possible to invite their business partners.
- Who are you helping to realise this project? (Yay, I help someone to realize a project!)
- Who will help you to realise your ideas? (Yay, someone is helping me get my project done!)
To show how easy that inviting process is, I use Microcopy, explaining to users what exactly is happening.
*Fields required: Form fields that are necessary to be filled in should be marked as such.
First and last name: Asking for the first name gives us the advantage that we can address the users personally and also identify them in the message board in an easy way. Also, as we want an app that meets all legal requirements, we need the full name of client.
Modals: There is a difference between freelancers and business owners: Freelancers have more possibilities to interact with the app.
- Since we want to motivate freelancers to enter their project details, we directly ask them to do so and lure them with money. 🙂
- For business owners, a major motivation to use this app is to keep track of their project. We show them our dashboard right at the beginning.
Message for your friend: I would prefill the message field with text to make it as easy as possible for the user and they don’t have to think of text themselves, because that leads to an unnecessary bounce rate. Of course, the text should be editable, so that the users can write their own text.
My redesign – The dashboard
Suggestions @Product team:
We need a proper dashboard that motivates users to use the app and makes it easy to use.
Project selection: What we should definitely consider is that each user group can handle several projects in our app at the same time. This means we need to provide a drop-down menu in the dashboard so that users can quickly switch between projects.
Of course, it should also be possible to create a new project directly from the dashboard.
Project summary:
A project summary right on the dashboard would have the following advantages for our users:
– It motivates.
– It makes them want to use the app.
– It provides a quick overview of the progress of the project.
The different indicators of the project summary should be arranged (and labelled) differently for freelancers and business owners, because both have different interests in using the app.
We should find out (via research/interview/usability test) what motivates/interests each user group the most.
My assumption is that the freelancers are motivated to see how much they have already earned in the project, while the business owners are probably most interested in seeing when the project is finished.
Managing board: The dashboard should be the hub of the app. All actions should be possible from there. My suggestion would be that, depending on the project phase, the CTAs on the Managing board change or become active or inactive, in order to always offer the user exactly what he actually needs.
Message board (see below)
Account settings:
Maybe someone has a good idea how to label the icon or if it needs a label at all. (Perhaps we should test this in a usability test to see if it can do without labelling).
We should definitely provide something like user settings to allow the user to update their user information, set notifications, adjust privacy settings, read the terms of use, enter bank details (so we can charge the fee), etc.
My redesign – The message board
We should set up a message board right on the dashboard that looks just like any other messenger, without the user having to click unnecessary buttons to open messages. (This is very cumbersome and will definitely lead to users jumping off and finding the whole process too complicated and half-baked.)
You can see above how such a message board could look like during the whole user journey.
System messages and actions: In addition, I think it would be very helpful if we use this message board not only for the chat, but also to send system messages to give users an overview of what is going on as well as action shortcuts.
Tell a friend (after end of project): According to our personas, our app is very often recommended by other users via hearsay, so we should give the possibility to tell friends about it out of the app.
Refer a friend: We might want to think about turning Tell a friend into Refer a friend. We could make attractive offers, such as the first project completion without a handshake fee, and at the same time reward the freelancer by offering a bonus program or something similar. Let’s discuss that in our next meeting.
My redesign – Freelancer actions (click on entry)
Suggestions @Product team:
I would suggest that we bundle the information about the project and show it on one screen, as there are not too many input fields.
To describe the project decently, I would ask for the following minimal information:
- Project description
- Project period
- Project terms
*Fields required: Form fields that are necessary to be filled in should be marked as such.
Project period: We should definitely specify the date format. To make it even easier for users, I would suggest an interactive calendar to conveniently mark a time period.
Set reminder: In the hustle and bustle of everyday life it’s easy to forget something. Especially when juggling multiple projects. It would be helpful for freelancers to give them the option to be reminded of their project start date.
Forecast: Let’s include a forecast of how much they’ll earn! What motivates more than seeing how much you will earn? Besides, it’s a calculation aid at the same time.
We want to deal with our users honestly and transparently, because that builds trust and shows the user our appreciation. Therefore, I would also show here specifically what fees the user has to pay to us.
Question/Suggestions @Legal team
Since the app concludes legal transactions between two contracting parties, legal requirements must be met. Could you please check which minimum requirements are necessary (VAT etc.)?
We have to offer freelancers the peace of mind that offers can only be accepted within a certain time frame. I would therefore suggest that this time frame (I have chosen 24 hours here, but another time span is of course conceivable) is visible in various places on the screens of the business owners. After this time frame expires, the offer automatically becomes invalid.
When do you want to get paid?:
It should be possible to specify both a fixed date (perhaps because the freelancer and business owner have already agreed on it in advance) and a flexible date based on the project end.
My suggestion here would be a dropdown menu with common business entries (this also has a learning effect for freelancers who are completely new to the business and perhaps had no idea about the term Net 30 beforehand. Knowledge transfer on the side, great, right?).
Pay in installments: Our persona analysis shows that it makes sense to offer business owners flexible payment options.
Important notice: Our persona analysis also showed that freelancers are mostly new to the business, often coming straight out of university and therefore have little experience with the subject matter. That’s why I think it’s important to explain them how offers work at a appropriate point (e.g. in the modal before they finally send an offer).
Adding working hours must be quick and uncomplicated. This includes that the user can quickly see how many hours have already been added to the project.
Since it is quite possible that errors occur during entry, it would be good to have the option of showing and deleting the hours that have been added in the past.
There is usually some time between sending the offer and the payment request, so it would be good if we could show the freelancer all the essential agreements again with the option of changing some of them, if necessary.
Grant special discounts: We all know that things can go wrong in a project. Or perhaps exceptionally well. Both one and the other can lead to the freelancer and business owner wanting to work out an additional agreement, such as a special discount. We should give them the opportunity to do that.
Important note/question @Product team
However, what we should take into account: If a special discount is offered, from which amount do we deduct our 1% fee? From the offered price or from the actual amount due? And when is our fee due? Do we deduct it from the business owner’s payment or do we invoice it separately? How and when do we get paid?
Do you want to send automatic payment reminders? No one likes having to remind others that they are in debt. Therefore, it would be good if we gave the possibility to send automatically generated payment reminders. Also, our freelancer persona has the characteristic that she doesn’t like to address problems. So we do it in her place.
Modal:
Sending the invoice after the work is done is a good feeling. We should also express this on the modal. @Grafik team Surely you can design something great there, right? Flying banknotes? Fanfares and trumpets? 🙂
My redesign – Business owner actions (click on entry)
Suggestions @Product team:
As already described, offers should be accepted or rejected within a certain time frame. I would display this time as a clearly visible countdown.
Which payment term do you prefer?: If the freelancer offers the business owner payment in rates, we let the business owner choose, because after all, only he knows when he has the necessary funds.
Change request: Sometimes it is necessary to adjust offers. We should allow the business owner to propose changes to the offer. Also, it is important for the freelancer to know why the offer is rejected.
Just like when sending an offer, it is important to remind the business owner that they are entering into a binding transaction where payment is due when the service is rendered. At Handshake, we place a high value on commitment.
How do you want to pay?: If the freelancer allows multiple payment methods, we need to leave this choice to the business owner and dynamically show the according payment options (here, for example, they have chosen to pay via credit card).
Payment method: The payment details are saved once in the account settings. There they can be changed at any time. This simplifies the payment process, since the already saved payment methods only need to be checked.
Swipe to send your payment: We all know how easy it is to accidentally tap somewhere. Especially when making payments on the internet, it therefore makes sense to avoid these accidental touches. For this reason, I would recommend a swipe gesture with a corresponding label that completes the payment process, because it leaves time to think about it. It also allows us to avoid that pesky „Are you sure you want to send this payment“ modal.
Perhaps we could show the swipe process in a small animation the first time a user reaches this screen.
My redesign – Managing account
In order not to overload the screens, I would suggest to offer a menu where more information can be viewed, bank details can be entered, the appearance of the app in general can be changed according to personal preferences and requirements (e.g. for visually impaired people who need a different contrast) and also the projects can be managed (e.g. moved to an archive.) We could also think about offering something like an evaluation across all projects, so that the freelancers can see how long they work on a project on average etc.
Final notes
Reach agreement within the team
The analysis of our personas gave me some ideas that I included in the revision of the mockups. All these ideas now need to be discussed and evaluated with the entire team, probably as part of a design sprint. Certainly, some ideas are more costly to implement than others. Resources must be balanced. The highest goal should be to offer the greatest possible benefit to users while taking into account all the costs we face.
Test with users
Of course, it is essential that we involve the users in our development process. This can happen in a number of ways. Remote sessions or A/B tests show us their reactions to our initial and revised mockup versions and help us figure out the improvements and identify weaknesses.
With the help of eye-tracking or heat maps, we could determine how users go through our workflow and where they might get stuck.
To refine UX writing, we could run a highlighter test to make sure our word choices make sense to users and create positive emotions and trust. We need to make sure we’re using the right scientific methods to evaluate the results and come to the right conclusions.
Be better than our competition
Since the competitor analysis showed that there are some very good direct competitors, we have to ensure that we are the ones who have the more appealing design, the easier usability, the best features, and the more coherent concept – all conveyed through easy-to-understand, engaging texts that make it easy for users to feel at home in the app, complete their tasks, and keep coming back. Only then will it be possible to prevail on the market and thus be profitable.
Feedback and grading
