JobPay | Katrina Basbas

JobPay

JobPay is a fictional project management and payments app designed for freelancers and business owners to work together on small projects. They can manage budgets, track work progress, and send or receive payments.

My role

microcopy

style guide

voice & tone

Inconsistent and long-winded copy

JobPay needed well-defined guidelines that captured the proper brand voice, style, and tone users would find helpful and approachable. I was given screens for different flows that were blank or had generic copy. The writing was long, overwhelming, inconsistent, and grammatically incorrect.

Balancing usability & personality

My goal was to create a Style Guide that gives JobPay an identity users turn to for guidance and ease throughout their project timelines. I collaborated with the UX Research and Design teams to make the communication clear, concise, and purposeful for the main user flows.

I completed this project for my UX Writing course with UX Content Collective. I spent 3 months writing and iterating the copy to make the user experience easy and simple for both freelancers and business owners.

Meet Kelly and Tom

Kelly and Tom were incredibly useful in finding the right approach to writing. But prior to writing anything, I wanted to ensure I had set guidelines to use consistently throughout the app.

I started off by defining JobPay's core values, brand voice and tone, and audience, then organizing a voice chart. With our well-defined mission and values in mind, I organized some general ideas for the UX writing and it also allowed for changes in a much more economical way. Everything JobPay encompasses boils down to three words: encouraging, helpful, and trustworthy. So I used these throughout the brainstorming process to update the Style Guide.

Voice chart for JobPay

Brainstorming: Considering purpose & impact

Onboarding - Brainstorming

encouraging

Ready to get those projects done?

So are we.

helpful

Helping you get work

done on time,

all the time

trustworthy

Manage secure payments and projects with JobPay

I wrote down ideas for each of the three words from the voice chart, and I incorporated all ideas into a simpler and more impactful statement.

Before

After

Rationale:

The welcome heading gives users a better picture of what JobPay has to offer and gets them excited to start. As the first screen users see, it is a simple and concise message that is encouraging, helpful, and trustworthy.

I corrected the typos and errors such as "Login" and "Swipe RIGHT" and maintained consistency with verbs and sentence case.

Example mockups and iterations in Figma

Our UX Design team provided me with mockups that needed finessing. Using all the research and data we've collected, I made changes to improve the overall copy and messaging from onboarding to making and receiving payments.

Before After

Rationale:

The original Sign Up flow had both email and password steps in one overwhelming screen, so I separated them to ensure clarity with password requirements. Including a name field was also crucial for connecting with other project members.

I then added error messages to help users identify any errors in this step and to suggest a quick fix as well. I omitted "You" in the error messages to remove any blaming of the user. These messages would also help prevent drop-off points around creating a valid password.

Send invoice with tool tip

Before After

Rationale:

It was imperative that we stay transparent especially with any fees. I wanted to provide additional information to help users better understand the service fee. I also edited the UI elements such as the button to say "Next" to match the buttons in other flows. Additionally, the copy needed to be short and simple and in title case to align with the style guide.

Log hours with empty state

Before After

This empty state adds no value for this flow and does not show users what they're missing.

Rationale:

At this point, we needed to inspire some action and motivate users to add hours. I front-loaded the message so it's scannable and created some excitement. Adding the "Add Hours" button also gave them easier access to that next step.

Feedback: The best gift to receive

After editing the screens based on research, data, and strategy, I sought feedback from other UX Writers. We communicated through Figma and I made additional changes. I asked questions where I needed clarification or further explanation to improve the user experience.

I then iterated the flows for onboarding, adding projects, sending an invoice, inviting clients, approving budgets, and sending payments. I received feedback that really helped the overall goal in creating simple and effective copy that aligned with JobPay's voice, tone, and style.

View Flows in Figma

Next steps for success

I would collaborate with the UX team to develop any more friction points. It's crucial to also identify and solve any edge cases I may have overlooked. Sitting in on any interviews would help to further understand the flows through the user's perspective.
I would revisit the Style Guide after receiving feedback and observing interviews to see what needs any updating. Meeting with others on the team to discuss would be ideal to consider different points of view given the new data.

Key takeaways

I learned about the voice chart from Torrey Podmajersky's book, Strategic Writing for UX. It was my first time using it, and it was such an effective way to keep my writing consistent. It is also a great resource to show others so that everyone on the team is on the same page.
Since this was the final project for my certificate course, I know the feedback received may be different than what I would receive in a real-life scenario. But knowing what can come from feedback, I can now make sure to be intentional and always ask for specific feedback to accomplish my goals.

Up next: English Course