DUBSADOInvoice Builder Redesign
PROJECT OVERVIEW
Dubsado is a CRM platform that empowers small businesses with streamlined workflows and efficient payment processes, handling over $100 million in transactions monthly across 30,000+ active users.
To increase revenue, we planned to launch our own payment processor. However, user complaints about the existing invoice builder's inefficiency posed a potential obstacle to adoption. I led the complete redesign to streamline the invoice creation process and maximize the revenue potential of Dubsado's new payment solution.
📍Problem
⚠️Critical Business Challenge
User complaints about invoice builder inefficiency could hinder payment processor adoption, directly impacting our $100K+ monthly revenue potential.
Two Major Pain Points:
Workflow Inefficiency
Users reported spending 15-20 minutes per invoice due to poor information hierarchy and tedious interactions.
User Experience Friction
High error rates from misclicks and confusing interface elements created frustration and reduced platform adoption.
Existing Solutions
Current solutions like QuickBooks and FreshBooks focus on accounting features but lack streamlined invoice creation workflows for creative small businesses.
RESEARCH & DISCOVERY
Target Users
Small business owners in creative industries
Solo entrepreneurs and small teams (1-3 people) in creative fields including photographers, designers, consultants, and freelancers who need efficient invoice management.
Research Method
User survey & Usability testing
Conducted comprehensive survey with 367 responses and usability testing with 42 participants to identify pain points and validate solutions.
Key Findings
🔧Phase 1 Information Architecture Redesign
Restructured the entire information hierarchy to align with users' natural workflow, moving related tasks together and creating intuitive navigation paths that reduce cognitive load and improve task completion rates.
Before: Scattered Information
Users had to scroll extensively to find features
After: Logical Grouping
Related tasks grouped for efficient workflow
Key Improvements
⚡Phase 2 Interactive Table Redesign
📍Problem
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.
To address these issues, I explored three design approaches:
Option 1: Inline Edit
View and edit simultaneously, intuitive and natural approach.
Option 2: Modal Edit
Dedicated modal space for editing complex information.
Option 3: Click to Edit ✅
Click opens expanded editing mode with more space.
Design Rationale
- •Separated remove and edit actions to prevent misclicks
- •Made view and edit modes visually consistent
- •Utilized table space more effectively for complex data
Validation Results
- •42 participants in usability testing
- •4.4/5 rating for new line item interaction
- •85% reduction in misclick errors
🔥Achievements
The redesigned invoice builder launched in Q2 2024, successfully supporting Dubsado's payment processor rollout. The improvements led to 40% faster invoice creation, 85% reduction in user errors, and positioned the platform for $100K+ monthly revenue growth from payment processing fees.
Post-launch metrics showed significant improvements in user engagement and task completion rates. The streamlined workflow reduced average invoice creation time from 15-20 minutes to 8-10 minutes, while user satisfaction scores increased from 3.2/5 to 4.4/5.
Most importantly, the improved invoice builder successfully supported the launch of Dubsado's payment processor, with 78% of users adopting the new payment solution within the first quarter, directly contributing to the company's revenue diversification strategy.