Case study
Mobile • 6 weeks • Q4 2023
Smarter invoice tracking at a glance
Project details
My role
Lead Product Designer responsible for end-to-end delivery. From framing the problem, planning and executing research, leading workshops and ideation, to prototyping, validation, and shipping. I also updated and extended the design system to support the new UI components.
The team
I worked as part of a product trio (myself, Product Manager, Lead Developer) within a cross-functional team of five, including two developers. We collaborated daily to shape and test solutions, involving both developers and key stakeholders throughout discovery and design to gather input and perspective.
Overview
Despite being a core feature, invoicing had surprisingly low engagement across the user base, with only a small percentage of customers actively creating or tracking invoices. This raised a key question, why weren’t more people using it?
Through research, we uncovered pain points around visibility, trust, and usability. This project set out to turn invoicing on Countingup into a more intuitive, helpful experience; surfacing key payment insights, streamlining actions, and giving users a clearer sense of control. The result was a redesigned Get Paid tab that improved usability and significantly increased feature usage.
The challenge
Problem statement
Countingup’s invoicing and payment request features are not delivering the desired outcomes for customers. This leads to poor customer experience, hinders cash flow, and increases the administrative burden on users. To better support our customers, we need to address these issues and create a more reliable, efficient solution that helps businesses get paid faster and maintain accurate financial records.
Hypothesis
By providing customers with a more insightful view on their business income, customers are more likely to get paid, get paid on time and keep an accurate record of their accounts. This will further increase feature adoption of invoices and payment requests and in turn drive customer retention.
Background
From prior user research, we knew that some businesses spend a significant amount of time tracking their expected payments in a spreadsheet or on paper, and mark payments as paid themselves. For businesses who get paid multiple times a month, they spend each week or month looking at payments received and matching them to corresponding expected payments which is a time-consuming task. This is a frustrating process for small businesses in general.
The process
At Countingup, we followed this process when collaborating within our cross-functional teams. While at Countingup, I recognised the need for a consistent product design and delivery approach across squads and led the process of workshops where we discovered and defined our process. In these workshops with the Head of Design, CTO, and wider teams of developers and product managers, we streamlined our workflow into two tracks, Discovery and Delivery.
The Discovery track focuses on validating customer needs and testing ideas, while the Delivery track ensures efficient execution of those validated solutions. This approach allows us to innovate quickly without slowing down development, ensuring we build the right products and ship them rapidly.
Reviewing analytics
Low
proportion of monthly active subscribers (MAS) have ever created an invoice
Most
users who create an invoice will create another within 2 weeks
Over half
of invoices are eventually marked as paid
Competitor analysis
We reviewed a number of our competitors, such a tide, xero and monzo to review how they display invoices and sales. We found that many of our competitors display the information they have in a way that is useful to the user, providing a a breakdown of the current state of their sales and allowing the user to decide what steps to take next.
A clear summary of the current status of invoices
Most recent activity at the top level
Invoices organised by status
User survey & interviews
We sent out a survey and then conducted round of interviews with 7 of the survey respondents about their current experience with the Get Paid tab and requesting payments.
Key issues identified
Using other invoicing tools
Some are using other invoicing tools because Countingup’s is considered too basic and not user-friendly. But, this leads to inefficiencies, as they must manually reconcile between systems.
Lack of clear status
Users of Countingup’s invoicing & request features struggle to track late payments, as the status of the payments is unclear, causing confusion and delays in follow-up actions.
Difficult to know overview state of requests
Some mentioned that it’s difficult to get an overview understanding of their requests, to give them a better understanding of the state of their business.
Using draft invoices as job trackers
Some users use draft invoices to keep track of jobs and build them up over time, but they report difficulty in finding and managing these drafts later, impacting their workflow.
Ideation session
We held a session with our cross-functional team to brainstorm ideas for improving the user experience. As part of the process, we conducted a Crazy 8s exercise, allowing everyone to quickly sketch and share ideas. Afterward, we discussed and consolidated these ideas into actionable insights. We then ran a sticky note session, where we reviewed the existing user flow. Together, we identified pain points and areas for potential improvements.
Key ideas the emerged from the session
• Sending proactive notifications when payments are missed.
• Highlighting overdue payments to improve visibility.
• Introducing a dashboard that shows upcoming and expected payments.
Areas for improvement
After the discovery activities up to this point, I reviewed the existing screens and identified key areas where we could make improvements
User journey
This user journey illustrates the actions and information that would be viewable on each screen.
Wireframes
After identifying the key areas for improvement, I developed wireframes to enhance the user experience of the "Get Paid" tab.
Bringing key data to the forefront
The first wireframe focuses on surfacing more insightful data. I introduced a clear overview that highlights upcoming invoices and provides users with a snapshot of total unpaid, late, and paid invoices. This allows users to quickly assess their financial status without needing to dig through multiple screens.
Data visualisation
The second wireframe builds on this by introducing two key visual elements, a histogram showing the trend of income over the past months and a graph visualising the ratio of unpaid to paid invoices, offering users a clear, visual understanding of their financial health. While these additions would provide valuable insights, I was concerned about the development effort required and whether this would be achievable within the timeframe we had.
Initial designs
Option 1
After creating the wireframes, I designed these screens as a higher-fidelity design to help illustrate how these screens could look using our design system components and to gain better insights during user testing.
The first option displays the primary actions as a list component, with a brief subline describing each action for clarity – this is especially useful for new or less familiar users. Below this, a summary is included of the income due that week. Finally, the screen separates unpaid and paid invoices into distinct sections to give users a clearer overview of the status of their unpaid requests.
Option 2
The second option uses charts to offer an easier to understand insights overview into their payment trends. Although I was concerned about the development effort required and whether this would be achievable within the timeframe we had. Additionally, I wanted to test this concept with users to gauge whether they would find these visual insights useful in managing their payments.
Option 3
After discussing the first design with the Head of Design, he was concerned that turning action buttons into list items might confuse users, I created a third variant to address these concerns and present this to users during the user testing. This iteration retained the core improvements but reverted the buttons to their original form. I wasn’t sure that this addressed the clarity of the function of the buttons however.
User testing
I conducted moderated virtual user testing with 6 of our users. We targeted existing users of invoicing and payment request features.
Highlights from interviews
Clarity of time period
Participants struggled to easily identify the time period of the amounts shown, particularly the totals for the current financial year in the "Pay" and "Get Paid" journeys.
Overview of paid and unpaid was unclear
Presenting summaries of total unpaid and paid amounts on the Get Paid tab was well-received, allowing users to quickly access key information.
Tabs on the invoice/request pages were well received
Participants found it useful to be able to quickly navigate between the paid, unpaid and draft invoices using the tabs
Graph snapshots of income were mostly understood
Helped participants understand the information at a glance. However, some experienced confusion with the specific execution of the graphs, highlighting areas for improvement.
Design development
After completing the research, we chose to move forward with the first design option. This decision was made because the move to the list component for the actions aided comprehension of the actions. However, the introduction of the graphs would have been too time intensive, and the response from users wasn’t that it would be so helpful that it would be worth the time investment at this stage. However, introducing these graphs remains an intended future iteration.
After reviewing the designs and results from the research, sever adjustments to the designs were made to improve the usability and experience.
Addition of headline
To introduce the intention of page in a friendly and approachable way, the headline “How do you want to get paid?” was added. This tone of voice aligned with Countingup’s goal of positioning itself as a helpful partner to small businesses, and this small message creates a little moment of delight that reinforces this value.
Reordering of Get paid tab
Given the variable length of the upcoming invoices & payment requests, we moved this list to the end of the page, so that the buttons to access the full list of paid and unpaid invoices were not beneath the fold.
Visibility of drafts
The button to access the drafts was added to the top level, as this proved a valuable resource for users. This made it easier to find and access rather than viewing it at the top level.
Paid invoices organised by time
To make it easier to navigate, the paid invoices screen is organised by last 30 days, so the user can understand how much they’ve been paid in the last 30 days.