FOrd motor credit company: Payment System
Role: Senior Product Designer
Deliverables: Heuristic and Accessibility report, User flow, Prototype, Hi-Fi Mockups
The Team: 1 Product Managers, 1 Product Owner. 6 Engineers
My Responsibilities: It was my responsibility to evaluate and improve the usability of Ford’s payment experience
Problem
I was tasked with addressing Ford Motor Credit Company’s need for a unified payment system. The company sought a versatile solution that could be adopted across various departments processing customer payments. The design had to be flexible enough for seamless integration with other sites and applications within Ford.
Approach
Heuristic Evaluation & Accessibility Audit – I began by conducting a heuristic evaluation of the existing payment system, which had been developed without a designer’s input. Given the urgency to launch the first phase quickly, I focused on identifying major usability issues and provided severity ratings and recommendations for quick fixes that could be addressed before the next iteration of the design. This approach allowed the project to continue without delaying production.
Comparative Analysis – Next, I conducted a comparative analysis of other payment systems, including PayPal, Amazon, Discover, Citi, Comcast, and DTE. This research informed the redesign of Ford’s payment system by highlighting industry best practices and user expectations.
Low-Fidelity Sketches & User Flow - I begin every design process with sketches to organize the hierarchy, information architecture, and user flow. These low-fidelity sketches help me communicate the design direction to the product owner, product manager, and engineers. By involving the team early, I can gather feedback before moving on to high-fidelity designs.
Prototype and Usability Test - I created high-fidelity desktop and mobile mockups using Sketch and the Ford Design System. These mockups were then uploaded to InVision, where I built a prototype for testing.
Once the designs were in InVision, I set up an unmoderated usability test on UserTesting.com. Participants were asked to complete tasks such as updating their primary credit card, adding a new card to their profile, and completing a payment.
Revise Designs – While most of the feedback and testing results were positive, there were a few unexpected areas for improvement. Although all users were able to complete their tasks, some didn't realize they could scroll down the page due to the blue header section. Additionally, the summary section at the top of the page took up a large amount of space. To address this, I revised the design by removing the summary section and redesigning the primary card on file to be less obstructive.
Development – After revising the designs based on usability testing, it was time for the engineering team to begin building. I kept the engineering team involved throughout the process by sharing the heuristic evaluation and initial sketches, ensuring they were aligned with the direction. I met with the team to review the high-fidelity mockups and prototypes, fostering an open dialogue about the testing process and design decisions. As development progressed, I paired with engineers to fine-tune small UI elements.
Results
The new payment system was successfully implemented across all Ford online payment platforms. It was first used during the 2021 Ford Bronco launch as the primary method for vehicle preorders. Today, it is utilized on Ford.com and the FordPass mobile app, providing users with a consistent and familiar payment experience across all Ford digital platforms.
Lessons
A key lesson from this experience was that testing uncovers issues that might not have been anticipated. While the user goals were achievable in the initial design, additional usability and UI challenges were revealed through testing.