Problem
I was presented with the problem the Ford Motor Credit Company had multiple ways of implementing a payment system. The company was looking to create a universal payment system that could be adopted by all areas in the business that process payments from customer. The design had to be versatile enough that other sites and applications within Ford could integrate with it seamlessly in the UI.
Approach
Heuristic Evaluation & Accessibility Audit – The first step I took was to conduct a heuristic evaluation of what the development team already built without the guidance of a designer. The first phase of the payment system was to be launch quickly, so I chose to start with the heuristic evaluation including severity ratings & recommendations on major usability issues that could be fixed quickly until the next iteration of the design (as to not slow down production).
Comparative Analysis – My next step was to conduct a comparative analysis on other payment systems before redesigning the entire Ford payment system. I researched and compared other companies like PayPal, Amazon, Discover, Citi, Comcast, and DTE.
Low-Fidelity Sketches & User Flow
I always start my design with a drawing first. I do this to organize the hierarchy & information architecture of elements, as well as determine the user flow. I also use my low-fidelity sketches to communicate the direction of the design with the product owner, product manager, and engineers. I involve the team in sketches so that they can provide feedback before I move onto high-fidelity designs.
Prototypes & Usability Testing
I created high-fidelity mockups of desktop and mobile mockups using Sketch and the Ford Design System. I then uploaded the mockups into Invision, where I built the pages into a prototype that I could use for testing.
Once the designs were in Invision, I created an unmoderated usability test in usertesting.com. Participants were asked to complete a series of tasks like, changing their primary credit card on file, adding a new card on their profile, and completing a payment.
Revise Designs – Most of the feedback and testing results were positive but there were some areas of improvement I was not expecting. All users were able to complete their tasks but because of the blue header section, some users didn’t realize that they could scroll down on the page. The summary section at the top of the page took up a large amount of space. I revised the design by removing the summary section and simply changing the design of the primary card on file to be less obstructive.
Development – After revising the designs based on the usability testing, it was time for the engineering team to build. I kept the engineering team involved during the process, so they had an idea of the direction based on the heuristic evaluation and sketches. I met with the entire team to go over the high-fidelity mockups and prototypes. It’s an open conversation where I can tell them about the process with testing and they can ask questions about the design. As portions of the designs are being built, I pair with the engineers to tweak small UI elements.
Results
The Ford payment system was implemented across all Ford online payment systems. It was first used for the 2021 Ford Bronco launch. It was the payment system all customers experienced to preorder their vehicle. It’s now used on Ford.com, and Ford Pass (Ford mobile app.) As a result, users now experience a familiar payment experience within Ford, no matter the site or medium.
Mobile Design
Desktop Design
Lessons
A lesson I took away from this experience was that testing will undercover issues one might have not thought of before. The user goals were achievable in the first design but other usability/UI issues were discovered.