Refactoring checkout

Since the first Kiva website launched in 2007, our basket experience has been a no-frills, transactional experience. While basic checkout and receipt functionality are of course the MVP, the information hierarchy left much to be desired. Worse yet, we found this final user touchpoint of the session exited our users on a down note.

The Checkout team's goal was to make the final step of the site's primary UX flow as frictionless as possible, celebrate our users' philanthropic spirit, and well... not look like shit.

old basket page layout

Checkout step 1 — If our intention was to confuse people, we're winning. Man, that mobile layout is bad... View full image (1.6 MB)

When the brand and site were refreshed, the checkout page was deemed "out of scope" due to backend complexity. So for two years our users have experienced this basket flow as the final touchpoint of their visit.

old review page layout

Checkout step 2 — The old review page layout. View full image (132 KB)

old thanks page layout

Checkout step 3 — The old confirmation page layout. View full image (264 KB)

While the team's primary goal of improving technical functionality naturally leads to an enhanced UX, the team was united in the opinion that it would be negligent to not intentionally focus on making the experience more joyful.

With that in mind, I begin by taking the existing UI and functionality, and converting it to Kiva's established CSS styles and UI patterns, to make it cohesive with the rest of the site experience.

basic UI improvements

Basic UI improvements. View full image (320 KB)

While wrangling styles and establishing an obvious visual hierarchy were a big step in the right direction, the obvious next phase was to improve the experience by thinking through which information was essential to the customer, and how that could be served more intuitively. At this point, the checkout team also looped-in Kiva's legal team to discuss which information was non-negotiable from a legal compliance standpoint.

basic UI improvements

Refinement of information, context and common UI patterns to make the layout more instinctual. View full image (287 KB)

thank you checkout celebration

A more celebratory "thanks" page, with a secondary CTA to share on social networks. View full image (634 KB)

The testing feedback for this layout reflected a significant improvement, but the team still saw low hanging fruit. In all current flows, the customer is taken to their basket, then must register/login to review and click continue to finally progress to payment. Each step was an opportunity for drop-off. We decided to work toward a single-page checkout by first testing if moving register/login before the basket adversely affected conversion. When negligible results returned, the checkout team moved forward with a unified checkout experience.

Initial wireframes for single-page checkout with minimum registration requirements. View full image (181 KB)

At this stage, we've reduced all of the information we're giving the customer to core components:

  • Registration form
  • Borrower photo, name and location
  • Pertinent loan details (matching) and cautions (long loan terms)
  • Monetary additions and subtractions in a column on the right, so it can be read like a receipt
  • Donation as a line item, and optional, nested gift card

First mockups for the single page checkout design. View full image (246 KB)

Loans proved to be easy enough to handle in an itemized list, but adding Kiva Card line items added a layer of complexity. Again the team was tasked with paring down the information to the minimum necessary for this feature's user goals. Ultimately there was plenty we could discard, and the paring down even helped to clarify some information! ($25 on the dropdown but "Quantity: 2" means the total at the bottom shows $50 — that's confusing.)

current Kiva cards as line items

Current checkout layout for the three types of Kiva Cards and their corresponding details.

In our experimentation for this design solution, users were getting distracted by their baskets below and were confused why they couldn't continue with checkout. Reducing the opacity of the basket section visually indicates that this isn't the section they are meant to interact with at this time. We also added a tip message on hover to remind the user to register/sign in before they can continue.

Step 1 of new checkout flow

Step 1 — New basket landing using contrast to visually indicated the active focus. View full image (225 KB)

Step 2 of new checkout flow

Step 2 — including all functionality from the existing basket flow. View full image (231 KB)

This project is a currently running experiment, and while initial metrics are positive, it has yet to yield statistically significant numbers thus far. Feel free to jump back to the beginning to see how bad checkout used to be :)


Next project