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:

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.

I’m proud of the meaningful impact this has made on daily shop operations, enabling service advisors, technicians, and owners to handle payments with greater confidence. With continuous user feedback and iterative enhancements, this new payments system stands as an excellent example of thoughtful, user-centered design.