CHECKOUT
& PAYMENT FLOW
PROJECT OVERVIEW
As part of an automotive subscription platform mobile design, I redesigned the checkout and payment flow to simplify the process of adding, selecting, and managing payment methods. The new design reduces friction, addresses failed transactions, and improves user confidence when completing purchases or subscriptions.
I led the UX/UI design process for the payment flow, from wireframes and prototypes to high-fidelity mobile screens, collaborating closely with product managers and engineers to ensure usability, scalability, and smooth integration.
MY ROLE
TOOLS
PROBLEM STATEMENT
The previous payment flow was fragmented and confusing. Users struggled with expired cards, unclear error handling, and extra steps when adding or updating a payment method. This led to failed transactions, dropped checkouts, and frustration when users could not quickly resolve payment issues.
Problems with
the Old Flow
Complex and Confusing – Manually entering custom point amounts created unnecessary mental effort and made the redemption process harder than it needed to be.
Unclear Value – The point-to-dollar conversion was not obvious, leaving users uncertain about how much their points were actually worth.
Error-Prone and Low Confidence – Manual input increased the risk of mistakes, added extra steps, and left users unsure if their points would be applied correctly until the very end.
My Process
DESIGN
EXPLORAIONS
I created early high-fidelity explorations to test multiple design directions, compare usability, and refine the solution before finalizing.
I redesigned the checkout and payment flow to make managing payment methods faster, clearer, and more reliable. By introducing card-on-file selection, real-time error validation, and simplified forms for adding new payment methods, the flow reduces failed transactions, streamlines the checkout process, and gives users confidence that their payment will be processed successfully.
My SOLUTION
Functionality of
the NEW Flow
1. Card on File Checkout
Users can select from saved cards or alternative options like Apple Pay.
2. Real-Time Validation
Errors such as expired cards are flagged upfront with clear guidance.
3. Add Payment Method
A simplified form allows users to quickly enter card or bank details in one screen.
4. Error Handling
Clear, in-line messages prompt users to correct mistakes without starting over.
4.Confirmation State
Users receive immediate reassurance when their new payment method is added and saved for future transactions.
I designed the new checkout and payment flow to remove unnecessary friction and prevent failed transactions. This works because users can now resolve issues upfront, switch to an alternative payment method instantly, and feel reassured through real-time validation and confirmation.
WHY THIS WORKS
DESIGNER’S INSIGHT
Through research and user feedback, I learned that payment is one of the most critical moments in the user journey. Even small errors or unclear messaging can cause major frustration and drop-offs. By improving error handling and streamlining card management, I saw how thoughtful design decisions directly reduce friction, build trust, and improve conversion.