Logo of dubsado

Renovate Invoice Builder

Project Overview
Dubsado is a CRM product that empowers small businesses with streamlined workflows and efficient payment processes.

The Invoice builder, a key feature to help users create the invoice, wasn't working efficiently as user expect, causing much more time on the task.

Therefore, I led the redesign of invoice builder to improve user experience. Stay tuned for a more intuitive and modern invoicing solution.
My role
Lead Designer - Research, Interaction design, Visual design, Prototyping
    Team
    1 product designer(Me),  1 Product manager, and 3 engineers.
    Timeline
    2 months

      Context - why we do this?

      We were launching a new payment processor, aimed at reducing processing fees for users and increasing revenue. However, we have received numerous complaints about invoice features, which might hinder the adoption of the new payment solution.
      Therefore, we are dedicated to enhancing the invoice builder's user experience and maximizing the revenue potential of Dubsado Payment.

      The invoice builder was not working efficiently, and we've received numerous user complaints.

      Context - who are the users

      Small business with 1-3 people mostly in the creative industry.

      What are the problems?

      14%

      of users choose not to use Dubsado as their primary invoice tool because they find the bookkeeping platforms they use offer a better invoice creation experience

      32%

      of users consider the invoice's lack of intuitiveness and difficulty in use as their primary challenges when it comes to invoicing.

      Low satisfaction towards the invoice builder(2.9/5), a trend to churn

      Research

      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

      manage_search

      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.

      Research

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

      Collaboration

      Prioritize easy wins by discussing with PM and engineers: information hierarchy & item table usability

      Due to the limited time and resource, we conducted an impact and effort analysis to prioritize our findings. This led us to focus on:

      Low discoverability of some feature/info

      Low discoverability of some features: notes & discount. More important information is not prioritized.

      Interaction with the item table is tedious

      Time consuming when editing invoice
      Hard to recover from error when users misclick

      visibility_off

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

      Problem analysis

      Sequential editing tasks are not grouped together

      I collected feedback from users and customer care team, and it turns out:

      69%

      of users think it "very important" (10/10) to see the transaction in the original place.

      89%

      of customer care team don’t like the idea of the second tab.

      Then, how might we remind users the invoice status without changing the position of the transaction?

      status pill option

      Option 1. Status Pill

      Option 2. Payment Progress

      We landed on option 2, because it aligns better with our future vision of the invoice builder - create a dedicate "sent" view that prioritize different information after invoice is sent, and can better help users take action to get paid.

      progress bar option
      status pill option
      check_circle

      A simple change that doesn't impact other areas, and provide a clear status.

      progress bar option
      check_circle

      A dedicated area to show the payment progress, and have a shortcut to scroll to transection part.

      Design improvement

      A new header component for better navigation and quick access to key information.

      • Before

      • After

      The new header component has been added to the design system and is now implemented across all types of form pages.

      Design improvement

      Reorganize the information hierarchy to align with users workflow

      • Before

      • After

      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.

      Item table interaction

      Item table is hard to interact and tedious when editing.

      mouse

      Need to scroll up and down when editing items

      psychology_alt

      Edit and view mode look too different - add cognitive load

      delete

      Accidentally click "remove" when trying to edit

      Item table interaction

      Upgraded table component for easier reading and editing.

      • Before

      thumb_down

      Information overload

      thumb_down

      Design inconsistency

      The description field is text-heavy, making it hard to quickly scan and locate specific information.

      The edit mode's design language deviates from the view mode, disrupting the visual flow.

      • After - similar view & edit mode with refined action controal

      Inline edit

      thumb_up

      View and edit at the same time, intuitive and natural.

      thumb_up

      The layout is close to the client view, so users will can get a sense of what clients see.

      thumb_down

      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

      thumb_up

      Editing in modal is the easiest way to edit complex information.

      thumb_up

      It doesn't require the table to be interactive, and can be the easiest one to implement

      thumb_down

      Modal editing sacrifices context, making it challenging for users to compare information across items on a single screen.

      checked

      Option 3 - Click to edit

      Click to open an editing field of line item

      thumb_up

      Click to edit opens a editing mode where users have more space to edit

      thumb_up

      A "Save" button can be added after users finish edit one item

      thumb_down

      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

      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.

      2 tasks in the usability test

      Usability test

      Usability tests show the table interaction is intuitive, but "applying a package" poses challenges.

      To confirm my design, I conducted an unmoderated usability test. With 42 testers, we uncovered some intriguing findings.

      Task 1 - Select a package

      cancel

      5.0%

      Failed

      error

      23.87%

      Misclick

      score

      3.9 / 5

      Users score

      Task 2 - Add a new line item

      cancel

      2.5%

      Failed

      error

      9.8%

      Misclick

      score

      4.6 / 5

      Users score

      thumb_down

      The high rate of misclicks in Task 1 and the relatively low user ratings suggest there may be  elements that are not intuitive or clearly defined.

      thumb_up

      The editing interaction proves to be intuitive for users, facilitating a quicker task completion with minimal misclicks, and higher rating.

      To understand the reasons behind this issue, I looked at the exit page, and found a lot of users stuck at first step. Therefore, I looked at the heatmap, revealing 3 specific reason where users frequently misclicks.

      Heat map

      Usability test

      Two improvements making editing invoice more efficient

      Heat map & root cause

      • After

      thumb_up

      Dedicate edit mode for entire invoice

      Creating a dedicated edit mode for the entire invoice can indeed streamline the editing process. This approach would allow users to enter a distinct environment tailored for modification, minimizing distractions and reducing cognitive load.

      thumb_up

      Change the copy

      "Apply" to "Invoice option" to avoid misunderstanding.

      Final design

      Desktop

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

      Reflection

      Received great user feedback after launch

      Increase in user satisfactory.

      XX%

      Increase in user adoption.

      xx%

      Contibuted to the design system

      Streamlined the hand off process

      Due to the project's growing complexity, our design file has become quite extensive. The overall workflow is also intricate, and as a new team, we lacked a consistent handoff process, particularly for mobile development. To address this, I took the initiative to create comprehensive documentation and establish a well-organized handoff system.

      Impact

      Learning

      account_tree

      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.

      change_circle

      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.

      workspaces

      Involve the cross-functional partners early and often

      Frequent communication streamlines workflow and catches issues early. Shared understanding is key, especially with limitations.