Ford Remote Payment User Interface
About the Project
Remote payment has become increasingly the standard for a lot of industries, automative not excluding. In Ford’s ongoing effort to streamline their customer experience into a seamless flow, Ford is looking to create a branded payment tool powered by Stripe. The entry point would be for their service dealerships across the nation, but we needed to start small. This would be a multi-pilot process that would be tested, adjusted and scaled to fit the needs of consistency and ease for customers to pay their repair service orders.
My Role on this project:
Tweak wireframes provided by the UX designer for MVP 1, that were based on earlier research findings that delved into current pain points within the dealership payment process.
Develop high-fidelity wireframes for MVP 2, that integrated more features and incorporated Ford’s Design System.
Work with development, legal, and Ford’s own CE team in achieving set goals.
Central Question
How might we provide a reliable and trusted payment experience for our customers who service any vehicle at a Ford, Lincoln, QuickLane, or CVC site, when they are not at the service location or want to have a touchless experience?
Dealership and customer interviews pushed a lot of our design decisions.
Benchmarking
We compared different remote payment features between Amazon, Uber and Wayfair.
We realized our Remote Service experiences will be seen as incomplete without a simple way to pay.
Benefits
Customers desire security, transparency and ease with remote payments. This product will provide all three. It also provides a way to easily take payment at a lower cost to dealers.
Our payment tool provides peace of mind
A Ford branded tool that allows Credit Card payments relieves fears surrounding security
Payment confirmation via customer’s channel of choice
Ease and predictability lower anxiety
“I would prefer online. Doing it in person would seem a bit inefficient as online is available now.” – Customer verbatim
By meeting the standards of other payment experiences, customer will feel comfortable and know what to expect.
Customers want to be met where they are
“Yeah, I expect it. I expect that to be an option that is provided. If you can book the service online, you should be able to pay online too.” – Customer Verbatim
How it works (flow)
MVP 1 Prototyping and Scale
Wireframes created by the UX designer, giving options for the service dealer to check appointments, receive in-person payment via dipping or swiping the card using a provided Stripe reader, or sending the link directly to the customer to pay via various checkout options.
MVP 1 screen flow, using iOS 15 UI kit as a base for design.
Dip card payment process example visual flow.
Microinteractions were a small way to sell the experience to stakeholders.
Examples of native and inline error states I developed using iOS15 design toolkit.
MVP 2 Prototype with Ford Design System applied.
Stripe’s default checkout UI was used as a base wireframe, with custom styling and small adjustments to the layout and hierarchy.
Please note: as of July 2022, this application is still in the testing and iteration phase of design with chosen dealers.
Above: Itemized dropdown to visually save space and clear checkout options, making the most important parts of the invoice, what you are paying and how, most prominent.
Right: Responsive desktop/tablet version.
