Best Buy Citi Checkout Entry Point

MY ROLE

UX Designer, UI Designer, Web Developer, and Digital Designer. Best practice usability research, wireframing, prototyping, and client presentations.

PROJECT SUMMARY

As the UX designer for this project, I created an option for customers to apply for the Best Buy credit card while at Checkout. This option currently did not exist. Customers have traditionally been shown opportunities to apply for the Best Buy Citi credit card at various points earlier in their purchase journey. Still, currently, they do not see a chance while they are on the checkout screen. By adding this option and communicating the benefits of the credit card, the hope is to increase overall credit card applications and conversions for the credit product.

THE TEAM

I worked with the Payments team for this project in a Senior Experience Designer role.

  • Meghan Glass Product Manager
  • Mikis Kostouros Product Manager Level 3
  • Soumini Karanth D&T Associate Product Manager
  • Edward Ecker UX Manager, Pricing and Payments
  • Financial Services and Legal Team

PROJECT CHALLENGES

The Best Buy credit card offers various benefits, and there are a few different opportunities for the customer to apply for the Best Buy credit card in the sales journey. In addition, there was previously no option for customers to take advantage of the promotional purchase benefit that may come with the customer’s purchase and profile status. The challenge with this project was creating a credit application that presents different designs and text copy of what the customer has previously seen in their checkout journey. The application was also required to avoid unnecessarily interrupting the checkout process. It also provides the customer a way to exit this application while allowing them to reopen it if needed. Lastly, this design had a good to have requirement of doing all this with minimal development changes.

THE SOLUTION

My approach to this design was complex in need but simple in its execution and innovation due to the requirement to stay within the established Best Buy design system and all the other restrictions of working within the corporate framework. My design utilized and repurposed a previously used design element from the design system. My immediate implementation was to create an on-page load callout that could be opened and closed upon click. I used the “Info I” icon as a draw for the customer to close the initial static pop-out above the Credit and Debit card number entry point. This application allows you to Apply for the credit card directly from the checkout entry point. It also offers a click-through for the required T&Cs for the credit card offer, which is also prominently displayed in the head of the application. This approach allows the customer to see the credit card pitch one final time before entering their card information.

App Screen with Percentage Messaging

 

App Screen Choose Your Benefit Selector

RESEARCH

During the discovery phase of this project, I needed to understand the customers’ response to the current checkout flow and what opportunities may be available for us to improve on that experience. So, working with the product managers, I proposed doing some initial user testing with Userzoom to get an idea of how the customer would respond to the entry point and to see if the direction I suggested would be acceptable for their checkout flow.

METHODOLOGY

We surveyed 30 participants for unmoderated testing in the User Zoom platform. For this test, we used the think-aloud protocol, and participants were limited to those that had the following qualifications:

1. Participants that last shopped online within the last three months

2. Participant must have shopped at Best Buy within the last six months 

3. Restricted to participants residing in the United States

The goal was to have 30 participants complete two studies testing two different checkout rewards banners. One of the banners presented a percentage rewards offer; the other showed the offer as a dollar-cost reward. Ultimately we received 30 (15 for 1 and 15 for the other) high-quality participants that were filtered through the screener and completed the usability study.

My designs were created for large and small views, with the testing using a mobile Small View version of the banner solution.

USER JOURNEY

The user journey for this application spanned the cart entry point to the credit card application approval (ex. Checkout, application, thank you, post and first purchase options). It also had a requirement to include guest users, registered user and non credit card holder paths as well. My responsibility was to prototype and mock up this various user journeys and scenarios and present my new design and findings to the team. I also had to present an ideal version of the experience that would be an option as a complete rebuild of the entire process, and then work backwards to get to the eventual MVP.

Application in Checkout Figma Prototype (Large View)
 

RESULTS

As a UX designer  it’s my goal to create a solution that makes the user journey seamless and enjoyable. With the feedback I received on the design direction, it was clear how the look and feel of the imagery needed to be designed. Upon presenting my findings and final design, the team decided to move forward with the plan as a phase one placement, with additional updates and tweaks to come in future iterations. Considering this was one of the first projects that I did with Best Buy it was good to get it on the production site as a new application.

DRT Footer Logo