Shopmanager - Order Payments
Shopmanager - Order Payments
Redesigned payments solution simplifying how automotive shops manage customer transactions, enhancing visibility and clarity at every step.
Redesigned payments solution simplifying how automotive shops manage customer transactions, enhancing visibility and clarity at every step.
Shopmanager SaaS Platform
UX/UI Product Design
2 Months
SaaS Product Website
SaaS Product Website



Introduction
As a Product designer dedicated to simplifying complex business processes, I took on the challenge of redesigning the payment portal within ShopManager, a software used by automotive repair shops. The existing transaction process was confusing, lacked clear feedback, and created frustration for both staff and customers.
Watching real shop employees struggle to confirm if payments were successful, I was determined to improve transaction clarity and usability. I framed my design challenge around a single question:
How might we redesign the payments system to be clear, intuitive, and reassuring, empowering staff to confidently complete transactions?
Research & Initial Assumptions
I began by observing how users currently managed payments in real shop environments, noting pain points and identifying areas of confusion.
Value Proposition – Why Should It Be Made?
Increased Clarity
Clearly indicate payment steps and transaction status to reduce user anxiety.Reduced Errors & Frustration
Provide explicit transaction confirmations, ensuring staff and customers feel secure during payments.Improved Shop Productivity
Faster, clearer payment flows mean staff can efficiently handle more customers each day.
Personas – Who Is It For?
Service Advisors
They process multiple payments daily and need clear, immediate feedback on transaction status.Shop Owners
Need an organized system to monitor and track payments accurately, quickly spotting discrepancies.Customers (Retail & Dealer): Require clear transaction statuses to build confidence in the shop’s professionalism and trustworthiness.
Ideation
System Map
To understand how everything connected, I mapped out the flow clearly:
This clarified which key steps required better emphasis and guidance.
Key Challenges Uncovered
Through user interviews and 100+ transaction observations, critical issues became clear:
The existing payment process lacked visual prominence, blending into the interface.
Users felt unsure about payment status due to unclear confirmation indicators.
Lack of real-time transaction feedback forced frequent manual verifications, causing delays and frustration.
Wireframes
I created mid-fidelity wireframes showing the work order when it's ready for payment & how the transaction would get processed:
Work Order Screen - Order ready for payment
Work Order Screen - Add a Payment Menu
Visual Design
Building upon the wireframe feedback, I refined visual design elements:
Solutions
A Clear Workflow for accepting payments for orders

Work Order after customer and product information is captured, ready for payment

Add a Payment Modal - Payment Method, Transaction Type, Payment Amount

Payment ready to be accepted - Terminal Modal Animation (Indicator)

Payment Success Screen - Successful payment captured

Work Order after successfully capturing payment - Post Payment Screen
High Fidelity Flows
Full Payment Flow (100%)
Quick and easy one-step payment process. Real-time visual confirmation clearly indicates payment success, instantly updating order status.

Partial Payment Flow
Shops now easily process multiple partial payments, crucial for larger orders spread over several weeks or months, with clear tracking of remaining balances.

Dealer Invoice Flow
Simplified invoice creation tailored to dealer customers who pay on specific terms (NET 10, 15, 30, 60 days). Clearly indicated due dates and easy invoice management.

Estimate Creation Flow
Allows advisors to create comprehensive estimates that customers receive via printed copy, email, or text link, ensuring transparency and convenience.

Impact & Results
Conducted moderated usability tests with 22 shop staff members to validate design effectiveness:
Metric | Improvement |
---|---|
Transaction Speed | 36% faster payments per order |
Entry Errors | Reduced transaction confusion by 64% |
User Satisfaction | Increased by 81% |
What Users Said:
“It’s clear, easy, and intuitive—I feel confident knowing exactly what’s happening with each payment.” – Sales Rep
“No more guessing if a payment worked. The new design makes everything visible instantly.” – Technician
Reflection
Prioritize User Confidence
Clear real-time payment confirmations significantly boosted user confidence. Explicitly showing transaction outcomes reduced anxiety and errors.Seamless Integration
Design solutions should blend naturally with existing workflows. Users appreciate minimal disruption and easy adoption of enhancements.Scalable Design Systems
Creating flexible, scalable components ensured this redesign would smoothly support future expansions or new payment methods without extensive rework.
Key Takeaways & Next Steps
The redesigned ShopManager Payments Module successfully simplified a critical aspect of the shop workflow, validated by:
Transactions processed 36% faster
Transaction errors reduced by 64%
User satisfaction improved by 81%
Next Steps for Refinement:
Continued Peak-Hour Testing
Validate the flow under busy shop conditions.Integration of Mobile Payments
Future expansion to mobile payment platforms (Apple Pay, Google Pay) for enhanced customer convenience.Additional User Interviews
Regular check-ins with users to refine and maintain continuous improvements.
Conclusion
The Shopmanager Payments redesign clarified, simplified, and streamlined how automotive repair shops process customer transactions. By focusing on intuitive visual indicators, real-time confirmations, and clear, guided user flows, the solution significantly improved efficiency, accuracy, and user satisfaction.
Introduction
As a Product designer dedicated to simplifying complex business processes, I took on the challenge of redesigning the payment portal within ShopManager, a software used by automotive repair shops. The existing transaction process was confusing, lacked clear feedback, and created frustration for both staff and customers.
Watching real shop employees struggle to confirm if payments were successful, I was determined to improve transaction clarity and usability. I framed my design challenge around a single question:
How might we redesign the payments system to be clear, intuitive, and reassuring, empowering staff to confidently complete transactions?
Research & Initial Assumptions
I began by observing how users currently managed payments in real shop environments, noting pain points and identifying areas of confusion.
Value Proposition – Why Should It Be Made?
Increased Clarity
Clearly indicate payment steps and transaction status to reduce user anxiety.Reduced Errors & Frustration
Provide explicit transaction confirmations, ensuring staff and customers feel secure during payments.Improved Shop Productivity
Faster, clearer payment flows mean staff can efficiently handle more customers each day.
Personas – Who Is It For?
Service Advisors
They process multiple payments daily and need clear, immediate feedback on transaction status.Shop Owners
Need an organized system to monitor and track payments accurately, quickly spotting discrepancies.Customers (Retail & Dealer): Require clear transaction statuses to build confidence in the shop’s professionalism and trustworthiness.
Ideation
System Map
To understand how everything connected, I mapped out the flow clearly:
This clarified which key steps required better emphasis and guidance.
Key Challenges Uncovered
Through user interviews and 100+ transaction observations, critical issues became clear:
The existing payment process lacked visual prominence, blending into the interface.
Users felt unsure about payment status due to unclear confirmation indicators.
Lack of real-time transaction feedback forced frequent manual verifications, causing delays and frustration.
Wireframes
I created mid-fidelity wireframes showing the work order when it's ready for payment & how the transaction would get processed:
Work Order Screen - Order ready for payment
Work Order Screen - Add a Payment Menu
Visual Design
Building upon the wireframe feedback, I refined visual design elements:
Solutions
A Clear Workflow for accepting payments for orders

Work Order after customer and product information is captured, ready for payment

Add a Payment Modal - Payment Method, Transaction Type, Payment Amount

Payment ready to be accepted - Terminal Modal Animation (Indicator)

Payment Success Screen - Successful payment captured

Work Order after successfully capturing payment - Post Payment Screen
High Fidelity Flows
Full Payment Flow (100%)
Quick and easy one-step payment process. Real-time visual confirmation clearly indicates payment success, instantly updating order status.

Partial Payment Flow
Shops now easily process multiple partial payments, crucial for larger orders spread over several weeks or months, with clear tracking of remaining balances.

Dealer Invoice Flow
Simplified invoice creation tailored to dealer customers who pay on specific terms (NET 10, 15, 30, 60 days). Clearly indicated due dates and easy invoice management.

Estimate Creation Flow
Allows advisors to create comprehensive estimates that customers receive via printed copy, email, or text link, ensuring transparency and convenience.

Impact & Results
Conducted moderated usability tests with 22 shop staff members to validate design effectiveness:
Metric | Improvement |
---|---|
Transaction Speed | 36% faster payments per order |
Entry Errors | Reduced transaction confusion by 64% |
User Satisfaction | Increased by 81% |
What Users Said:
“It’s clear, easy, and intuitive—I feel confident knowing exactly what’s happening with each payment.” – Sales Rep
“No more guessing if a payment worked. The new design makes everything visible instantly.” – Technician
Reflection
Prioritize User Confidence
Clear real-time payment confirmations significantly boosted user confidence. Explicitly showing transaction outcomes reduced anxiety and errors.Seamless Integration
Design solutions should blend naturally with existing workflows. Users appreciate minimal disruption and easy adoption of enhancements.Scalable Design Systems
Creating flexible, scalable components ensured this redesign would smoothly support future expansions or new payment methods without extensive rework.
Key Takeaways & Next Steps
The redesigned ShopManager Payments Module successfully simplified a critical aspect of the shop workflow, validated by:
Transactions processed 36% faster
Transaction errors reduced by 64%
User satisfaction improved by 81%
Next Steps for Refinement:
Continued Peak-Hour Testing
Validate the flow under busy shop conditions.Integration of Mobile Payments
Future expansion to mobile payment platforms (Apple Pay, Google Pay) for enhanced customer convenience.Additional User Interviews
Regular check-ins with users to refine and maintain continuous improvements.
Conclusion
The Shopmanager Payments redesign clarified, simplified, and streamlined how automotive repair shops process customer transactions. By focusing on intuitive visual indicators, real-time confirmations, and clear, guided user flows, the solution significantly improved efficiency, accuracy, and user satisfaction.
View NEXT CASE STUDY
View NEXT CASE STUDY
View NEXT CASE STUDY
Available for freelance & contract projects!
Available for freelance & contract projects!
Available for freelance & contract projects!
© 2025 Poojan P. All rights reserved.