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
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
Illustration I did to represent our Bread consumers for our different products
User Research
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)
Journey Maps
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.
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 2
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.
