Why we do this?
We were launching our own payment processor. To use it, users had to use our invoice builder, however, we received numerous complaints about the invoice builder's inefficiency, which could impede the adoption of our new payment solution. Therefore, we needed to redesign the invoice builder to maximize the revenue potential of Dubsado Payment.
Who are the users?
Most of our users are small business owners working in creative industry. There are usually 1-3 people in the team. Their typical workflow is like follow:
Research
To gain deeper insights, I collaborated with the product manager to conduct a survey aimed at understanding the typical invoice process and identifying main challenges users face. We received 367 responses and synthesized their pain points.
Research
1. Beta user survey
2. Product board
We conducted a beta user survey with 367 responses, revealing that the invoice builder was hard to use and not intuitive.
Prioritization
Due to limited time and resources, we conducted an impact and effort analysis to prioritize our findings. This led us to focus on two key issues: the low discoverability of certain features and information, and the misalignment of information hierarchy with users' typical workflow.
Following a detailed page audit, I pinpointed three main issues: navigation difficulty, a disorganized information hierarchy, and inconsistent design components. Addressing these, I introduced a new header, restructured the information layout, and standardized design elements...
Problem
By analyzing user flow, I found that the information hierarchy on this page does not follow users' typical workflow. As a result, users have to scroll up and down actively to find specific features or information.
Problem
Once an invoice is sent, users typically need to take actions related to the transaction rather than further editing the invoice. However, the transaction information is currently located at the bottom of the page and is not highlighted, which causes users additional effort to locate this information.
Design
I revamped the information hierarchy by moving the related tasks together, and created a second tab to put the transaction info. Users would land on the second tab if the invoice is already sent to clients.
Iteration
However, by getting feedback from users and the customer care team, I found that most users did not like the idea of putting transaction information on a second tab. They preferred to see the transaction information together with the payment plan.
.png)
Through research and an audit, I identified three major issues with the item table. Exploring 3 redesign directions to improve user experience, I selected a solution collaboratively with other designers and PMs that reduces errors and speeds up editing.
Problem
There were three key problems identified when editing the invoices:
• Users need to scroll up and down when editing the invoice.
• The edit and view modes look too different, increasing cognitive load.
• Users constantly misclick the "remove" button when trying to edit.
Users scroll up and down when editing
.gif)
Edit and view mode look too different
View mode
Edit mode
Accidentally click "remove" when trying to edit
Inline edit
View and edit at the same time, intuitive and natural.
The layout is close to the client view, so users will can get a sense of what clients see.
With so much info in one line and being inline editing, it could be hard to organize
Option 2 - Edit in a modal
Modal editing
Editing in modal is the easiest way to edit complex information.
It doesn't require the table to be interactive, and can be the easiest one to implement
Modal editing sacrifices context, making it challenging for users to compare information across items on a single screen.
Option 3 - Click to edit
Click to open an editing field of line item
Click to edit opens a editing mode where users have more space to edit
A "Save" button can be added after users finish edit one item
It might not be super clear that users can click each item line to open edit fields
Option 1 - Inline edit
2 tasks in the usability test
Heat map & root cause
Design
I explored three design directions for the new table: inline-edit, modal edit, and "click to open edit field." I ultimately chose "click to open edit field." In the new design, I utilized the table space more effectively, ensuring that the view mode and edit mode look similar enough to reduce cognitive load. Additionally, I separated the remove and edit actions to prevent misclicks.
Iteration
To validate my design, I conducted an unmoderated usability test with 42 testers. The test revealed that the new table interaction was effective overall. However, users encountered difficulties with Task 1, which involved selecting a package. Further analysis of the conversion rate indicated that users were getting stuck while trying to locate the package dropdown.
Task 1 - Select a package
5.0%
Failed
23.87%
Misclick
3.9 / 5
Users score
Task 2 - Add a new line item
2.5%
Failed
9.8%
Misclick
4.6 / 5
Users score
Iteration
To address the issues uncovered during testing, I did two key improvements:
• Changed the copy from "Apply" to "Invoice option" to reduce confusion.
• Designed a dedicated editing mode for the entire invoice. It allows users to focus specifically on editing the invoice, reducing distractions.
The usability tests revealed that the item table interaction was intuitive, but the package dropdown's placement proved difficult for users to locate. In response, I made adjustments to enhance its visibility and a fluent user experience.
Final design
As Dubsado is launching its first mobile app, I also designed the mobile app version of the invoice builder from scratch.
View more mobile app >>
Impact
We have launched this new invoice builder to a group of beta users, and we received a 4.4/5 user rating through a survey. We also launched our payment processor. We anticipated $100k/ month revenue increase.
$100K / month
Potentially contributed to revenue increase
4.4 / 5
Users satisfaction rating
Impact
In the design process, I contributed several components to the design system, including invoice table, invoice title, which could be reused in the redesign of all the type of other forms.
I also added a tag component to the design system that we previously didn't have.
Impact
Be cautious to change users' current behavior
Changing user habits is hard. Great design balances UX gains with learning curves. We tread carefully, even with imperfect features, because disruption frustrates users. Significant improvements justify the learning bump.
Product design is not a linear process
Project feedback has ranged from details to core design. Product design is challenging, filled with unforeseen limitations. Let's embrace agility, adapt to feedback, and find the best solution.