Logo of dubsado

Simplify invoice creation

Project Overview
Dubsado is a CRM product that empowers small businesses with streamlined workflows and efficient payment processes, handling over $100 million in transactions each month.

To increase revenue, we planned to launch our own payment processor to collect processing fees. However, the existing invoice builder was not working efficiently, posing a potential obstacle to the adoption of this new feature. To address this, I led the redesign of the invoice builder to simplify the creation process and enhance efficiency.

The project was launched successfully, receiving a 4.4/5 rating score and potentially contributing $100K in monthly revenue.
My role
Lead Designer - Research, Interaction design, Visual design, Prototyping
    1 product designer(Me),  1 Product manager, and 3 engineers.
    2 months

      Why we do this?

      User complains about the invoice builder's inefficiency, which may hinder the adoption of the payment processor.

      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?

      Small business owners

      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:


      Through a survey, we synthesized 6 key problems in the invoice process.

      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.


      Based on user feedback and survey results, we've narrowed our focus to these 6 key topics.

      customer feedback

      1. Beta user survey

      2. Product board


      Research on Challenges Users Face in the Invoice Builder

      We conducted a beta user survey with 367 responses, revealing that the invoice builder was hard to use and not intuitive.


      Prioritize easy wins: Low discoverability & item table usability

      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.


      How might we enable users effortlessly find features and information, navigating the page seamlessly?

      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...


      Information hierarchy doesn't folow users' workflow

      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.


      The "post-send"experience is not carefully designed

      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.


      Revamped the information hierarchy to align better with the workflow

      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.


      However, the second tab of transaction is not preferred

      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.

      How might we simplify interactions with the item table to expedite the editing process and save users time?

      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.


      The interaction with the item table is so tedious, and presented several usability issues

      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

      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


      Redesigned the item table layout to solve all the problems.

      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.


      However, the "applying a package" is hard to locate.

      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








      3.9 / 5

      Users score

      Task 2 - Add a new line item








      4.6 / 5

      Users score


      How might we make it easier for users to find package dropdown?

      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.

      Iterate design based on the feedback and analysis from usability test

      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


      Mobile app 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 >>


      Received great user feedback after launch

      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


      Contributed to the design system

      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.




      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.