— PROJECT NAME
Handshake App UI
— PRODUCT GOAL
Engaging and interactive copy
— MY ROLE
Rewrite UI copy
Create style guide
Update UX design
— TOOLS
Figma
— DATE
Summer 2019
I improved an app called Handshake with clear and concise copy and following consistent voice/tone guidelines.
Handshake is an app used by both freelancers and their clients (business owners). Freelancers use it to bill their clients and track project hours. Business owners use it to pay freelancers and track work progress. Both parties can invite each other to join the app. Handshake facilitates payment and project progress without lengthy paperwork.
Challenge: The Handshake app’s copy was confusing with no information hierarchy and content style guide.
Solution: To update the app UI, I created the content style guide, redesigned the UI interfaces and rewrote the copy.
User Personas
I was given two user personas (below). One is a young adult woman who does freelance web design; the other is a male business owner in his early 60s who is not confident with technology.
Research
I conducted competitive analysis and noted how several real-life competitor apps (like Payoneer and PayPal) wrote their UI copy to their users.
I also used Google Trends to research what keywords and terms each user type would typically use:
- Payment — instead of fee or deposit
- Freelancer — Instead of 1099 contract worker, contract work, contract-to-hire or independent contractor
- Track — Instead of monitor
- Invoice — Instead of charge sheet
People preferred payment to fee
Voice Guidelines
My research helped me develop Handshake’s voice:
Encouraging, not harsh: Handshake is collaborative in nature. It is committed to improving experiences for everyone by creating an user-friendly environment. Encourage users to complete projects and offer intuitive solutions when problems arise. Reassure users that help is here when they need it.
Informative, not vague: Be detailed yet concise. Use few words as possible but include important details in the copy.
Professional, not boring: Handshake’s primary goal is to help users reach their business objectives through efficient billing and project tracking. As a business, it must remain professional at all times.
Trustworthy, not deceitful: Users rely on us for accuracy therefore our voice should convey sincerity.
Editing UI
Copy
I edited the initial UI copy to make Handshake a more user-friendly app, using
the project’s instructions, user personas and my research.
.
The following are some examples of the screens I rewrote and labeled for users who could either be freelancers or their clients.
Edits:
- Precisely explained the multiple benefits the user gets from using Handshake.
-Focused on the app's unique features that aren't available in other project management apps (tracking + in-app payments).
- Changed CTA to directly nudge users to the desired step.
-Designed two buttons depending on whether a user is new or returning.
- Made copy sound more uniform and clear in an encouraging and motivational tone.
- Removed unnecessary exclamation and question marks.
-Labeled fields outside the box and provided hint text below the field, following industry best practices.
-Provided the right amount of information in natural conversational and active voice.
Edits:
- Fixed spelling, capitalization and grammar errors.
- Used helpful hints in blank fields to clues users in as to what we’re asking for.
- Redesigned the payment page, adding field forms and tooltips to motivate the user to action.
-Used reassuring and explanatory sentences to make the user feel safe.
- Made the headings consistent with action verbs that are super clear.
-Changed checkboxes to radio buttons where only one response can be chosen at a time to avoid confusing the users.
Edits:
-Added consistent headings that created a logical tie to the navigation.
-Wrote concise CTA with active verbs.
- Ensured the format for dates, hours, capitalization and monetary amounts was aligned with the style guide.
- Rewrote the copy to emphasize irreversible payment actions by the user.
- Deleted extra spaces and shortened words where possible.
Edits:
- Added copy and buttons that tells the user next steps and placed it below the top header for visibility.
-Chose between “Connect” and “Invite” to make the header clearer and more consistent.
-Added visual cues to prompt the user
Results
-This project helped me understand the value of UX writing for payment and fintech products. When it comes to dealing with people’s money, what and how we talk about something gets scrutinized in detail.
-Research helped me determine how to best rewrite the app’s copy for its user types and understand how they could use Handshake.
-I learnt the value of getting involved early in the content development process, to avoid copy filled with financial jargon that is unclear and misleading.
-I learnt design hacks to boost user trust in sensitive situations and gained hands-on experience critiquing and editing content for a banking app