How I delivered End-to-End Designs 10× Faster
A code-first design approach that bridges UX, UI, and engineering — accelerating design delivery by 10×
The Need
Fincent 1.0 gave business owners a solid foundation for basic operations but relied heavily on QuickBooks Online for core accounting.
To scale, we needed a Version 2.0 that would:
Eliminate external (QBO) dependency
Enable full accounting capabilities — invoices, payments, ledger, and reports
Compete with established players like QuickBooks & Xero
Be designed and validated with real data inside the browser
The Constraints
Solo Designer — handled IA, UX, UI, and prototyping
Timeline — 4 months for end-to-end delivery
Scope — 10+ modules (rivaling QuickBooks’ depth)
Expectation — stakeholders should experience the product as a working MVP, not static mockups
The Breakthrough
A code-first design approach that bridges UX, UI, and engineering — accelerating delivery by 10×.
Instead of static mockups, I built live, data-driven simulations — transforming design from pictures to a working product.
Using Vibe Coding, I shipped Fincent 2.0 (10+ modules) end-to-end in 4 months, as a solo designer.
Results
Accelerated design delivery by 10×
~90% less UI engineering effort
Stakeholders experienced a real MVP — not a prototype
The Simulations in action
Designs that think, move, and perform — not static frames.
We also explored how this experience would work on mobile—where business owners are most likely to quickly check and respond to financial queries.
The mobile version distilled the concept to its essence: one transaction, one decision, immediate action. Each screen focused on a single task, whether approving a match, responding to a bookkeeper question, or categorizing with smart suggestions.
Key mobile optimizations:
Notification-driven workflow - 'We've matched an account' and 'You have a message' prompts
Contextual actions - Approve/Edit/Defer options tailored to the transaction type
Smart categorization - AI-powered suggestions with simple tap-to-select
Minimal cognitive load - One decision per screen, clear visual hierarchy
The mobile prototype revealed how different platforms might require fundamentally different interaction models—a lesson that influenced our later Timeline design.
My Design-Engineering Framework
A behind-the-scenes look at the design-engineering workflow.
The mindset shift that made 10× delivery possible.
The Inbox concept taught us something crucial: most business owners didn't want to be hands-on with transaction management. They wanted professional bookkeepers to handle it efficiently.
This insight led to the 'Bookkeeping' tab—a complete pivot toward bookkeeper-focused workflows. Instead of empowering business owners to categorize their own transactions, we designed for the people who actually do this work day-in, day-out.
Key shifts in approach:
Professional workflow - 'FOR REVIEW' and 'DONE' sections for clear status tracking
Bulk operations - Tools for processing multiple transactions efficiently
Rich collaboration - Comment threads, file attachments, and review processes
Context switching - Detailed transaction panels for thorough review
The interface became more data-dense and workflow-oriented. We added collaboration features like comment histories, file attachments, and approval workflows—everything professional bookkeepers needed to work efficiently while keeping clients in the loop.
This version was closer to the mark, but we still hadn't solved the fundamental problem: unification.
Reflections & Takeaways
Why rapid simulation is shaping the future of product design.
Proved that design engineering accelerates delivery by 10×
Bridged the gap between UX, UI, and code
Reduced rework and dependency on static design tools
Inspired a new mindset — “Design to simulate, not just to visualize.”
This project reinforced one truth: speed and quality are not opposites — when design and code converge, they amplify each other.