top of page
Bread_Lockup_White.png
title image _ Bread.png

Checkout Redesign

Context

BACKGROUND

Bread, a merchant-first, Buy Now, Pay Later payment solution, was undergoing an overhaul to create Bread 2.0. The business wanted to take this opportunity to optimize our checkout experience for our Bread Direct merchants and business partnerships.

ROLE

Lead designer for the project owning all of UX research, design, and usability testing.

CHALLENGES

Designing a scalable solution that provides a range of white labeling customizations from Bread Direct to Enterprise. Emerging partners want divergent experiences and capabilities which impede on scalability.

Goals

STANDARDIZE

Standardize our flows and merchant customization offerings in order to scale more efficiently.

OPTIMIZE

A cleaner & more engaging UI to improve the user experience, elicit trust, & demonstrate to merchants the value Bread puts into research, design & engineering.

CONVERT

Improve conversion through a more clear, transparent and efficient application process.

SELL

Improve SMB merchant sales by showcasing the most seamless, user-friendly checkout flow. Improve Enterprise sales by showcasing the most customizable checkout flow that builds upon their brand.

Design Audit

FLOW WALL

I uncovered all the different screens, flows, edge cases, and inconsistencies within our current experience. I presented it all on a wall so we could see the state of checkout in one view

IMG_4682.jpg

DATA ANALYSIS

We analyzed the data we had on our checkout experience, like our checkout conversion funnel, Looker data (element click, rage clicks etc), results from our previous A/B tests and more. 

Data not shown under NDA

CUSTOMER DEMOGRAPHICS

We looked at the data we had on our current customer base. 

Data not shown under NDA

bread shoppers transparent.png

Illustration I did to represent our Bread consumers for our different products

User Research

maginify glass people white.png
I conducted all the user research for this project which included:
  • 33 User Interviews (non Bread users, Bread users and Bread abandoned users).

  • Multiple rounds of usability testing to get feedback on our current flow, competitor flows, and early concepts.

  • Taking part in interviewing some of our merchants

  • Surveying around 200 customers.

Research Findings

It's easy & transparent
Trust is key
People don't know Bread
Flows need work
More context needed

Research findings not shown. Under NDA.

Archetypes

Based on the user research I was able to create "Pay Over Time" archetypes (I went for a "The Big Short" theme)
Practical Pay-Over-Timer.png
Zero Percenter.png
Pay-over-time Pro archetype.png

Journey Maps

goals.png
Journey Maps.png

Wireframes & User Flow

I designed many different flows based on conversations I had with my product manager and engineers. I had to take into consideration when certain data needed to be collected, what data could be stored and passed, how to gradually lead the user from the least amount of friction input to the ones with the most friction, and the different points of entry a user could take depending on their shopping journey. The below frames were my "puzzle pieces" I moved around into different places to demo the different flows we could explore. 

wireframe flow.png
checkout user flow.png

High Fidelity Mocks

After multiple rounds of testing where we found that copy was the main aspect that needed iteration to provide clarity to the user and elicit trust, we landed on the below MVP screens. This was a very de-scoped MVP experience. Nothing was final, and there was a lot to continue to iterate on.

A sample of some of the "final" screens:

Whitelabeling vs. Customization

The company always referred to its product as a white labeled solution, but this was never true. The customer will find out who the financing provider is post checkout, and this is a source of confusion for users. I pushed for a new strategy that was based on tiered customization vs white labeling.

TIER 1

tier 1 desktop.png

TIER 2

tier 2 desktop.png

Deceivingly Simple

What looks like a simple application is actually quite complex. Returning user edge cases, 17 versions of our terms screen, and multiple reasons for a user to get stopped or denied had to be architected into the flow.
Group 1902.png
bottom of page