Checkout Flow Redesign

Tophatter had an outdated checkout flow. Working with our lead Android developer, I redesigned the checkout flow to keep the ease and efficiency of the current checkout, while developing an experience that builds trust and sets context. The new checkout flow resulted in a:

• 12% increase in new user pGTV/user (paid Gross Transactional Value per User)

• 9% increase in new user payer conversion

• 5% increase in return user pGTV/user

Android’s checkout experience became the model for iOS and web.

RESPONSIBILITIES

• Product strategy. Defined the product strategy and outlined business goals

• User research. User research to understand existing problems

• Personas. Persona development in collaboration with our marketing team

• Benchmarking. Competitive benchmarking to assess best practices

• UX / UI design. Wireframes and hi-fidelity designs

About Tophatter

Tophatter is a mobile discovery shopping marketplace that connects buyers and sellers from around the world in real-time 90-second auctions for jewelry, electronics, beauty, and household items. Most of Tophatter’s auctions start at $1 and are designed to generate excitement and competition among shoppers. Tophatter has roughly 20 million shoppers and sells 100,000 items a day. 

Checkout before redesign

Before I began building a new checkout flow, I wanted feedback from our shoppers on what they thought of the current experience. I worked with our UX Researcher, Shawna Kelly, on understanding shopper sentiment:

The lack of transparency and context in the checkout experience made Tophatter seem untrustworthy, especially among new shoppers.

From my research, I created the following “how might we” statement to frame the checkout redesign:

How might we help shoppers feel more confident when making a purchase?

Personas

I considered both new and return shoppers in redesigning the checkout experience. I worked with the marketing team to develop personas and define the audience:

Competitive benchmarking

I started my redesign by benchmarking eCommerce competitors and assessing best practices for a checkout experience. I noticed many new features like “swipe to pay,” but had to decipher what actually is impactful. Here’s what I noticed in benchmarking that would drive the business forward:

• Ability to review order before adding payment and shipping

• Clear context about the flow

• Consolidated/accordion style screen before placing order

Wireframes

For new shoppers, I wanted to build an experience that earns trust so shoppers feel confident entering their sensitive information, like payment and shipping address. After gaining trust, I aimed to design a flow that reduces friction and makes it easy for return shoppers to purchase items.

In addition to building an experience for two audiences, I also designed for two different formats: auctions and traditional buy now. Auctions have a different launch point to the payment flow and start with a modal that congratulates shoppers on their auction win.

After reviewing our personas and benchmarking, I updated our “how might we” statement:

How might we build a checkout experience that’s quick and easy while still earning trust? 

Earning trust among new shoppers

Making it easy for return shoppers

Decision making & trade-offs

My first instinct in the redesign was to create a magical “Congrats you Won!” modal that shows the product image and price.

I created a high-fidelity version and tested with shoppers. I found that the full-screen modal was actually overwhelming shoppers and delaying them advancing in the checkout experience. There were also engineering constraints that the the modal would take more time to develop.

In considering trade-offs, I wanted to tie my decision to the business goal of improving payer conversion and the shopper goal of reducing confusion. With that, I went in the direction of a more discrete modal instead of a full-screen modal with the idea that more people were likely to tap and enter the payment flow with a more cryptic modal.

Hi-fidelity designs

I consulted our visual designer, Sheng Chu, before creating the high-fidelity designs. Our Android developer was pushing for light drop-shadows on the tiles, but Sheng recommended the tiles be flat to match the flat design throughout our app. In addition, Sheng suggested we change the CTA color from purple to teal since teal is more trustworthy.  

New user checkout

From our user feedback, we learned that new shoppers find the checkout flow untrustworthy. In my redesign, I progressively added information to the checkout experience to show a sense of progress. The additional screens are intended to build trust and make shoppers feel comfortable when adding sensitive information.

Here’s how I improved the flow:

Added a “Checkout” screen at the beginning of the payment flow so shoppers can review product info and price before being asked to add their credit card.

Updated copy on CTA buttons to be more customer-centric show where shoppers are in the checkout flow.

Included trusted partners like Google Pay and PayPal.

Asked for payment before shipping. If the shopper selects PayPal or Google Pay Pay, we populate their saved shipping address on file and they can skip the “Add Address” step.

Return user checkout

Performance

In mid-June, our Android developer rolled out the redesigned checkout experience to 25% of our users. By end of June, we saw that the new design was performing significantly better than the control. We then released the experiment to 100% of our users. The redesigned checkout experience became the model for our other platforms.

Takeaways

What I did well

I learned the importance of integrating real shopper feedback from the beginning, especially during a redesign. I started with understanding the end customer’s needs and motivations. I adapted the design accordingly to the needs of two different audiences and was mindful about having every design solution be in direct response to a user goal.

What I would improve

If I were to design the checkout experience again, I would consider more of the edge cases with the checkout experience. I’d rethink how we’re handling product size, color, and style variations and when to communicate when a variation is sold out. I’d also explore how to better integrate upsells and “buy one get one” deals.