top of page

Case study: PaperTrail app

Problem.png

Context

As part of my certification with UX Content Collective, I designed  a fictional app called PaperTrail. This invoicing and billing app needed to be easy to use for both freelancers and business owners.  

 

The screens provided contained the bare bones of an app. I needed to make research-driven decisions about the best order for screens and UI elements, recommend missing items, and infuse the experience with the app’s voice.

My Role-2.png

My Role

I created a voice and tone style guide and overhauled the content provided. I also worked with a UX designer to create a design system for the app. 

 

My content is persona-driven and backed by competitive analysis and user testing. This was my final project for the UX Writing Fundamentals course.

My Role.png

Process

I developed a process to ensure each element was considered. The app's voice and tone were top of mind as I worked through the iterative process below.

  1. I began by taking stock of page titles and navigation in order to understand the app hierarchy.

  2. Then I looked at subheads, help text, and button copy—elements that direct and inform the user.

  3. Next, I checked for places where things were clarifying help text and tooltips were needed.

  4. Once I had a clear sense of what existed, and what needed to be changed or added, I conducted research (see below). This research informed my user tone map, which guided me as I keyed content to the likely emotions of each persona moving through the app’s flow.

  5. After completing the writing, I asked two people to run through the app and note their questions or moments of hesitancy. From this informal user testing, I made microcopy adjustments to ensure users’ questions were answered and they felt guided.

Research.png

Research methods

  1. Competitive analysis - I explored other billing apps while noting voice, information architecture, key words, and overall flow.

  2. Personas - These were provided by the UXCC and gave key details such as the user’s goals, frustrations, biography, and level of patience for certain tasks.

Solution

Process 1.png
1. Onboarding flow

I worked with a UX designer to develop an upbeat, professional illustration style. UI elements compliment the content, which is clear and engaging.

 

The implied forward movement of the paper airplane becomes a visual guide for the user throughout their experience. The name PaperTrail connects to old-fashioned billing, which creates “paper trails” to be referenced later. It also also refers to “paper,” or money, so is relatable to younger users.

​

Working with a UX designer on this naming/branding change was a fun collaborative exercise.

0 Splash Page.png
1 Welcome.png
2 Sign in.png
3 Create account.png
5 Choose role.png
4 Confirm account.png

2. Project dashboard

When I tested this flow with potential users, I realized that a project dashboard would be a supportive addition. The dashboard is easily accessible and contains all working projects, as well as archived projects, messages, and settings. 

​

Archiving past projects keeps the user's dashboard tidy. I added helpful friction in the form of a question, then provided help text to clarify the step. There is always the option to return to the previous screen.

 

The original screens show that when an invoice is overdue, the business owner can't archive the related project. This was unclear, so I inserted a modal that alerts the user.

11 Project dashboard - main.png
12 Project dashboard - error dialog.png
12 Project dashboard - archive project.png
13 Project dashboard - settings screen.png
Process 3.png

3. Payment flow

I first setup the logic of how payment works: the freelancer proposes and accept the project budget, while the business owner provides a project description. Hours worked, hourly rates, and amounts due are visible. Invoices can be sent and viewed. 

4. Cancelation message

Cancelation messages can be needlessly tricky, so I wrote the header as a clear question and explain what cancelation means. 

16b Payment.png
16c Cancel lighbox.png
Results.png

Results

Given this was a course assignment and not developed, the app's success is hypothetical. Those I shared final screens with commented positively on the look and feel of the app, the addition of a project dashboard, and the app's updated messaging center. 

​

If given the chance to develop PaperTrail, I would work with researchers to conduct further user testing, clearly communicate accessibility features like tab order and alt text to the dev team, and consult with legal aid to ensure we're asking for the right information from users. 

​

Stakeholders engaged*:

Product owner

Project manager

UX researcher

Product designer

Devs

Legal

​

Tools used:

Pen and paper

Mural

Figma

​

Activities executed*:

Desk research

Design thinking workshops

Writing of voice and tone style guide

Tone mapping

UX writing and editing

Content design

User testing

*As a simulated experience, italicized activities/stakeholders listed were not actually used.

bottom of page