An end-to-end redesign of a global checkout experience, supporting 19 payment methods across 24 markets.
With a backend services migration underway, my product team was charged with a revamp to our Checkout experience. While the primary objective of the project was to transfer existing functionality from one service to another, this opened up plenty of opportunities to improve the overall user experience of checkout.
About two years prior, the team’s previous designers began a redesign of checkout, but the project had been de-prioritized, so their work was left to collect dust. Fortunately, there was plenty to learn from their previous work that gave us a framework to begin the project anew.
Since the project had already been initiated, I began by meeting with one of the designers that previously worked on the project to review their documentation and designs. He shared with me a functional audit he and his co-designer performed on the current checkout experience, as well as recordings from a US-focused prototype they tested via Lookback.
From there I worked with my team’s product manager to review the functional audit and identify any parameters or requirements that changed since the audit was performed. There had been some major shifts in certain business rules that would impact the checkout experience, and while the initial functional audit gave us a great jumping-off point, it was focused specifically on the US, and we needed to accommodate for all 24 countries for whom the experience would be available. This helped inform the next steps in my discovery process.
I did several things to help facilitate a better understanding of the remaining unknowns within checkout:
Usability Testing Analysis
I reviewed the past usability tests that were performed on the design two years earlier, with the intent of understanding what worked well with their redesign, and what areas we could still improve upon.
Team Research Exercise
With support from the team’s lead UX strategist, I organized a UX team research exercise, where five designers each took a few sections of Baymard Institute's checkout guidelines to study and review with the team. The goal of this exercise was to get the other team members’ perspectives of the guidelines and how they could apply to our experience.
Competitive Analysis
I partnered with the UX Research team to perform a competitive analysis, with a focus on international markets. This was spurred by a loose understanding that the expectations of the general flow of checkout can differ significantly in certain countries. Considering the company’s large presence abroad, and especially in China, we wanted to ensure the design was accommodating enough to gracefully handle these contrasting expectations, while minimizing the cost of creating diverging experiences.
Functional Audit
After gaining a deeper understanding of the benchmarks of a strong checkout design, I took another look at our current experience and performed both a heuristic analysis and a functional audit of our current checkout experience across multiple markets. These exercises facilitated gaining a better understanding where our major weaknesses were, and identifying any additional functionality in other markets that we needed to take into account.
While the scope of the project included updating all of checkout, through the discovery process, we identified some of the biggest areas of improvement to focus on:
Improving Page Structure & Flow
Streamlining Account Creation
Payment Options Messaging
Incorporating SMS Notifications
Promo Redemption Experience
Poor information architecture in the legacy Checkout experience made it challenging for customers to orient themselves on what they needed to do. In addition to that, the legacy checkout experience lacked much visibility of system status, and only provided vague error handling at the full page level. This meant that if a customer made a mistake in one of the form fields, there was very limited assistance in helping them identify and fix the error.
Poor information architecture made it challenging for customers to orient themselves on how to complete checkout.
The previous design attempted to resolve these problems by breaking the checkout requirements into more manageable chunks. While this was a step in the right direction, it still lacked clear feedback for the customer as to what they needed to do to complete the checkout process. So to improve upon that structure, we decided to incorporate clearer states for when a section was complete, was in the process of being edited, or had not yet been accessed. We also improved the visibility of system status by focusing on form field states, providing inline validation as much as possible.
Prior to this project, the process for creating an account was disruptive to the checkout flow. While account creation did provide customers with an incentive of 10% off all purchases, the form field requirements for creating an account were extensive— first name, last name, email, phone number, password and verify password, for a total of six form fields (and in some markets this process included even more than that). Beyond that, in the instance of being referred to USANA by a friend or an influencer, account creation was mandatory for new customers to be able to make a purchase.
In an effort to simplify this process and to increase the perceived value of the discount, I proposed incorporating account creation into checkout. This would allow us to collect the customer's information throughout the checkout experience, and as a last step prior to completing their purchase, have the option to save their account information and receive 10% off their purchase.
Making account creation totally optional required a shift in business rules, so after garnering support from our stakeholders, we performed an A/B test of a redesigned experience where sign-up was forced vs. optional. The test participants overwhelmingly preferred the latter solution, in part because they felt they understood the discount better and were more motivated to sign up for the account when they were already committed to completing their purchase.
Due to past design resource limitations, the implementation of new payment methods was not given any attention from the UX team. This meant that the front-end experience of selecting a payment method was very minimal. We found that this was a common pain point for customers who were interested in using other payment methods beyond a credit card, including statistical evidence of certain payment methods not being used, despite them being more common in certain countries.
In order to improve this experience, I coordinated closely with the development team in charge of payments to understand how each of the 19 payment methods supported across all of our markets work, to ensure we are communicating this behavior to the customers in a clear and concise manner.
I also worked with the notifications team to better understand the omnichannel experience and learn more about any follow-up emails that certain payment methods required. I also coordinated closely with the designer in charge of the order confirmation emails to help bridge the gap between the post-purchase communication channels and checkout itself.
About a year prior to this project, the notifications team developed an SMS notifications system for our customers. The only way to enable them was to go through their account settings. In order to make text notifications more readily available to the customers, we decided to integrate an SMS opt-in option into the checkout flow.
After several iterations, we landed on the idea of incorporating the opt-in process directly into the order confirmation screen. As we got closer to the initial release, however, we decided to eliminate this from the MVP, and instead simply provide a link to the account settings, where the customer can opt in currently. While this is not the ideal solution, it still adds value to the experience for our customers, by informing them that text updates are available to them, and giving them an inroad to set them up.
The redesign of checkout coincided with a project to update the internal tool used by the finance and marketing teams for creating product discounts and promo codes. This worked out wonderfully, as I was able to sit in on the internal user tests and technical reviews of the product team working on the project, as well as coordinate closely with the team’s designer. In this way I was able to advocate for the external customer’s experience as the tool was updated, as well as gain a deeper understanding of the intricacies of each type of promotional the tool supported.
This project was in its beta release to a small segment of our customer base at the time of my departure. To monitor the release and reception of the redesign, the team has had access to FullStory and a Qualtrics survey. The response so far has been positive, with the general sentiment being that the changes have helped make checkout more seamless and intuitive, but it is too soon to understand the true impact of the project on conversions and retention.
