Spense App Redesign: Empowering Dealership Efficiency
VueLabs
Introduction
Designing a seamless experience for Spense, a leading SaaS platform for dealership payment management, required a focused redesign of the admin-side payment flow. Spense simplifies dealership operations by offering timely invoicing, automatic reconciliation, and transaction transparency, but the existing admin experience had pain points that hindered efficiency.
Our redesign streamlined the payment process for employees, ensuring faster workflows, reduced errors, and a more intuitive interface. By addressing user feedback and industry needs, we crafted a solution that enhances productivity while aligning with Spense's mission to deliver hassle-free payment management.
The Challenge
The admin-side payment flow in Spense faced significant usability challenges:
Fragmented Processes: Admins had to navigate multiple screens to complete a single payment task, leading to inefficiencies.
High Error Rates: Manual reconciliation processes left room for mistakes, impacting financial accuracy.
Limited Insights: Dashboards lacked actionable data, making it hard for employees to make informed decisions.
Outdated Design: The visual and interaction design did not match modern SaaS standards, affecting user satisfaction.
Our goal was to redesign the payment flow to improve efficiency, accuracy, and user experience while incorporating robust insights for better decision-making.
REDISIGN - STAGE 1
Research and Insights
We organized ideas from our FigJam brainstorming sessions into actionable hypotheses. For example, we identified that users needed clearer navigation to key features, so we hypothesized that redesigning the header layout and simplifying the navigation structure would increase engagement with Nightwatch’s core tools.
Key Findings:
• Admins needed a centralized process to reduce navigation time.
• Automation opportunities were underutilized, especially for reconciliation.
• Users wanted customizable dashboards with real-time metrics.
• Visual consistency and branding alignment were critical for a professional feel.
REDISIGN - STAGE 2
Comprehensive Design Exploration
Using insights from the research phase, our team collaborated with Spense stakeholders in workshops to ideate and validate solutions.
Highlights
Key Innovations
Streamlined Payment Workflow We redesigned the payment process into a single interface:
Integrated payment steps (invoicing, reconciliation, and reporting) into one flow.
Added smart prompts and error checks to minimize mistakes.
Reduced task completion time by eliminating redundant steps.
Enhanced Dashboard Features Admins now have access to actionable insights through:
Real-time transaction data.
Customizable widgets displaying metrics like revenue, payment status, and cash flow.
Filters for granular reporting and improved decision-making.
Automated Reconciliation System The new system reconciles payments automatically:
Matches invoices and payments seamlessly.
Reduces manual effort and errors.
Provides a clear audit trail for accountability.
Modernized Design Language We introduced a contemporary design system:
Simplified navigation with a clean layout.
Visual consistency across components.
Intuitive interactions for smoother user adoption.
REDISIGN - STAGE 3
Prototyping and Iteration
High-fidelity prototypes were created and tested with real users to refine the design.
Testing Insights:
• Admins completed payment tasks 40% faster.
• Error rates in reconciliation dropped by 25%.
• Dashboard engagement increased by 30% within the first month.
REDISIGN - STAGE 4
Export and Integration
Export to Tailwind Code
With an AI plugin inside Figma, we exported designs directly into Tailwind-compatible code, reducing the need for manual front-end development.
Integration with Dev Environment
We incorporated the generated code into a dev build using Claude and a code editor, ensuring compatibility and smooth integration.
Implementation and Results
Launch Strategy The redesigned payment flow was rolled out incrementally, allowing for feedback and iterative improvements
Challenges and Lessons Learned
Balancing Automation and Control: Some users preferred manual control over automation, requiring additional customization options.
Cross-Department Collaboration: Aligning design and development teams was essential to meet tight deadlines.
Balancing Automation and Control: Some users preferred manual control over automation, requiring additional customization options.
Cross-Department Collaboration: Aligning design and development teams was essential to meet tight deadlines.
These challenges reinforced the importance of user feedback and adaptive design practices in achieving impactful results.
Key Results:
Improved Efficiency
Task completion time reduced by 40%.
Error Reduction
Manual errors decreased by 25%.
Dashboard Engagement
Interaction with new dashboard features rose by 30%.
User Satisfaction
Admin satisfaction scores increased significantly post-launch.
Conclusion
The Spense app redesign highlights VueLabs’ expertise in creating efficient, user-centered SaaS solutions. By transforming the admin-side payment flow, we not only enhanced operational efficiency but also aligned the platform with modern usability standards.
This case study demonstrates our ability to deliver high-impact design solutions tailored to industry-specific needs. Whether you’re looking to enhance user workflows or modernize your app’s experience, VueLabs is your trusted partner in creating exceptional SaaS designs.