Home Depot Payments
A scalable, user centered solution for payments on checkout
Why Redesign Checkout?
The original ask was to implement a Save PayPal to Profile feature and align the PayPal experience with PayPal’s new standards. While we already had PayPal functionality, we needed to add an “Edit PayPal” link that would allow users (especially customers using their saved PayPal) to open the PayPal overlay and edit which payment method to use in their PayPal wallet.
The Challenge
However, the hierarchy on Checkout did not allow for additional PayPal CTAs since the card level actions were aligned with the Payment header, and adding the PayPal edit link here could get confusing and crowded. Alternatively, if you put the PayPal edit link by the PayPal logo while keeping some of the card level CTAs next to the Payment header, this would mismatch the patterns and the user’s expectations.
The current state and hierarchy problem
This project would serve as the pattern for how all other alternative payment methods would be integrated into Home Depot’s checkout.
We needed to find a scalable solution to provide that framework.
The Process
Research
A B User Test on usertesting.com
Goal Writing
How Might We statements
Brainstorming
Mobile first wireframing
Matrix of scenarios for each exploration
Peer Feedback
Concept 1
Whiteboarding
Prototyping
Writing a test script
Analyze results from usertesting.com
Concept 2
Desktop and mobile high fidelity designs
New UI patterns with usage guidelines submitted to the pattern library
Next Steps
Research
The first step was to conduct an A B user test to get a sense of which approach felt more natural for them. These designs were focused on an MVP of just implementing the new Saved PayPal feature with editing abilities.
User Testing
To verify this theory, we tested the location of the CTAs to see if users had a preference and why they gravitated to either option.
The user feedback was split. Out of 6 users total, 3 preferred below the information, and 3 preferred above the information. For those who preferred above they said that they liked how it was easy to find. For those who preferred below, they said that they liked that it was in order of how they would read top to bottom and they liked how all the Credit Card actions were grouped.
For Cancel and Done, 2 out of 6 said they preferred above, 2 out of 6 said they preferred below, and 2 out of 6 had no preference.
All users understood the Edit PayPal link and its location.
What do these results mean?
The location of the links below the information was a logical location based on how users would read from top to bottom. Oftentimes the users would be asked to look for the actions and they would automatically start scrolling down. Those who preferred the links above stated that they valued the prominence of the actions, and they said very little about the location.
So a better solution would be to combine the two qualities they valued into one design, one with the CTA’s located below next to their category, but with enough prominence to not get lost in the content. With better grouping of related elements, the available actions would be easier for users to scan and find what they need.
With more 3rd party payment methods coming down the pipeline, it was clear that we needed to rethink the how the payments section was organized and how to scale with new features and payment types.
Our Goals
Before we started any ideation, we aligned on our goals with “how might we” statements.
Cohesion
How might we organize individual payment options to be more cohesive as a unit with corresponding hierarchy of actions.
Scalability
How might we better incorporate and promote other payment methods such as the Home Depot Credit Card in a scalable way for future payment methods?
User’s Mindframe
How might we match our user’s expectations on how they think of their payment options and how these should be organized?
Brainstorming
I started to brainstorm some possible solutions and started mobile first. However, things were getting complex quickly, so in order to better organize and contrast the differences between the designs I organized them in a matrix with columns for the main areas I was looking at including:
Guest Checkout
Authenticated Checkout
Change Card/Add Card
Gift Card experiences.
Gathering Peer Feedback
I then printed out the matrix and asked my design colleagues and product managers to give me feedback. They placed little dot stickers on their favorite designs and wrote next to it their reasoning as to why. The product managers were given different colored dots since they were the main stakeholders in the designs. I compiled the feedback and set forth to create a design that captured the elements that were resonating.
Concept 1
For this first concept, we pushed the designs into a completely new framework.
We separated Saved and Other payment methods and treated things less as payment categories and more as a list of all the user’s possible payment options.
So instead of a credit card section with Add Card housed within it, we treated Add Card as an equal option. Additionally, we displayed multiple saved payment methods. at once.
Guest Checkout
Authenticated Checkout
Authenticated Checkout Continued
Testing
This was a dramatic shift to see what resonated with users compared to today, so the next step was to see what users thought of this change in a qualitative user test. We submitted a study to ten users and asked:
Their general impressions (Does anything stand out? Is anything missing that you would expect here? What do you think of how things are grouped and organized? Is there anything they would change about their experience or layout?)
How would they expect to pay for their product?
What Payment Methods did they notice were available to them, and did any of them resonate as something they would like to use in the future?
Does the gift card flow make sense to them?
Did they understand what to do in order to split their payment using a gift card?
Did the guest and authenticated experience make sense in context with one another?
How did they expect PayPal to work within checkout?
How would they access their saved payment methods in authenticated checkout?
The Test Results
While the designs were well received by users on usertesting.com, there were a few pain-points.
The links for “Add a Gift Card” and “See More Saved Payment Methods” were initially overlooked and could use more visual emphasis, which is a relatively simple fix.
The separation between Saved Payment Methods and Other Payment Methods were seen as unnecessary and users would rather see a combined list of payment methods.
However since we were truncating the amount of saved payment methods displayed at once, there wasn’t a clear way to translate this action while combining these sections. Users thought that their saved payment methods should be shown all at once, but this would not help our users (especially Pros) with 50+ saved payment methods.
While we succeeded in matching our user’s mind frame, we were not accomplishing our other two goals of Scalability and Cohesion.
Concept 2
The new design moves back to the category organization with revamped CTA visual designs and locations.
The payment methods are now contained within a box, helping to distinguish how elements relate to each other and the orange outline makes it clear what is selected.
This formatting should provide the template for additional payment methods as we add them. This will give us the opportunity to explore highlighting payment types like PLCC.
We’ve also re-examined the gift card flow and location. Part of this was rehoming the PO/Job Code link next to the Tax Exempt ID link, grouping these Pro focused features together.
Credit Cards
New work flow buttons have been introduced to give more prominence to category level actions without competing with the primary actions of the page.
More prominent Cancel and Done buttons are now located at the bottom of the information to match user’s expectations of reading top to bottom, while also being contained to the information it references.
PayPal
PayPal will serve as the template of how to treat 3rd party payment methods as we move forward with potentially more alternative payment types.
We’ve included this pattern where the PayPal button replaces the Place Order button that has been testing well, in addition to another alternative where the PayPal button is contained within the PayPal section that we may want to T&T.
Home Depot Credit Cards
Surfacing PLCC as an equal payment option will highlight our credit offerings in a way that is less subject to “banner blindness.”
In our future state, cardholders will have additional functionality like the ability to look up their card or apply for a card.
Gift Cards
Gift card is given more prominence and can be combined with more payment options like PayPal. We also show the amount available on the card and how much more funds are needed if necessary.
We’ve also included a pattern from a B2B user test that we think would help the users understand their new order total and the statuses of their gift cards.
The Right Rail Math Box
Although we were focused on the Payments Section on Checkout, we realized that the math box in the right rail was heavily tied to the Payments Section. We proposed changes to the math box in the right rail to better reflect the new payments organization and support it. This includes:
Gift Card line items from the B2B user test (since they affect the order total and provided clarity to the user)
Promo codes located next to gift card (due to their reductions to the order total)
Tax Exempt ID and PO/Job Order grouped together since they are B2B related actions. (PO/Job Order previously was grouped with Gift Cards in the main payments section)
New Patterns
Why do we need action buttons?
From previous user tests, we saw that customers were overlooking link level actions related to specific features in the Payments sections. Based on this insight, we created a new pattern.
Action buttons provide a way to highlight and emphasis actions for a single object or group/category of objects, that does not compete with our primary and secondary buttons.
It is recommended that these Action Buttons are only used in instances where there is a link level or supplementary action (Ex. viewing details, adding objects, deleting objects, etc.) that requires additional emphasis.
Usage Guidelines
As a UX team, we will continue to craft use cases and guidelines for this pattern when launched.
Iconography
Because we are leveraging iconography and brand logos to help customers quickly scan available payment methods, we need to consider how the icons we are using are used across the Home Depot site and adjust them accordingly.
Because of this, our recommendation is to update all instances of the Credit Card icon for PLCC Use Cases, with the Credit Card Art itself, or a differentiated icon.
Want to dive deeper?
Download the full presentation to see all the documented scenarios and mock-ups
What Next?
We are submitting the new button styling to the Pattern Library Guild with corresponding action states, and usage guidelines.
Our next steps are to user test these designs in focused sections:
Credit Card and Overall Organization: Do users understand the flows such as Add Card, Change Card, and Edit Card? What do they think of the payments section hierarchy and will they look over the new button designs that are supposed to give more emphasis?
PayPal: Do users understand the flow? Is this how they expected to engage with a 3rd party payment method? Do users prefer when the PayPal button replaces the “Place Order” button or when it is included inside the PayPal box?
Home Depot Credit Card: Do users find value in a separate section for Home Depot Credit Cards? Would they not know if they need to enter their information in the regular credit card section? Would this confuse Non-Home Depot Card holders?
Gift Cards: Do users understand where and how to add a gift card? Do users understand whether they have covered the full amount of the order or need to provide an additional method of payment? Do users understand the status of their gift cards and how much money will be or won’t be left on the cards?
This project is scheduled to be developed and released in Q3 2020.