UX research

Context

People Problem

Every so often, online shoppers want or need to make a larger purchase. But for many, using a credit card is either financially perilous (20+% interest) or not accessible to them (lacking credit).

Today, popular point-of-sale lending products like Affirm and Klarna are primarily offered at partnered stores, unable to reach shoppers elsewhere on the web without an additional, friction-full process.

Business Goals

Honey's mission is to make money more fair. By entering the financial products space, Honey can work to offer accessible credit to its 17M coupon extension users and build a payments platform to power future offerings.

With a compelling alternative payment option, Honey can further drive incremental sales for merchants (and affiliate revenue for the company).

Product Solution

Honey, as a business with 17M users shopping with our browser extension, can provide loans at checkout for virtually any merchant to help shoppers spread payment of a large purchase over time.

Honey is also uniquely positioned to use shopping data from its user base as alternative credit data to make loan decisions without an invasive credit check.

Prior Work

I was brought on to lead the design for Honey's fintech vertical. When I joined, one of my fellow designers had already laid out the groundwork for a solid MVP. With our launch date being only a few weeks out, I strategized two design tracks for leveling up the experience: short-term UI/UX improvements and a long-term, insight-driven iteration.

The starting point: MVP designs by the brilliant Anita Wei

Short-term Improvements to the Application

Taking time to understand the existing flow and technical constraints, I realized 1) we could cut down on the number of steps by masking or combining backend processes that the user didn't actually need to keep track of and 2) present the setup flow higher in the shopping funnel.

User flow optimizations using backend process masking and additional entry points

Now with a more streamlined flow, I worked on much-needed quality of life improvements for the user, including dedicated subbranding to help with trust and sense of legitimacy, a global progress bar, a progress bar inside our buttons for individual steps, a persistent help/support link, and places for messaging and microcopy to help guide the user.

This intermediate redesign was dubbed Honey Pay 1.1 and included more rich visuals (to boost legitimacy) and several quality of life improvements (e.g. global progress bar, button loading states non-instantaneous processes).

Long-term: Honey Pay 2.0

After the launch of our MVP, we gave out loans internally (dogfooding) to get feedback. People were hesitant to follow through and connect their bank account to get a loan. They weren't quite sold on the privacy and security of the product, and they were suspicious of the lack of fees, interest, and credit check.

I wanted to solve these concerns with a new UI pattern for the application flow. My hypothesis was that by giving the loan application more space on the page, it will look more legitimate and trustworthy. More space also meant more opportunities consolidating steps and space for helpful messaging.

Hook screen — A popup at checkout presenting the product offering

How it Works screen is a visual overlay over the first step, providing necessary context without adding another step or page to the flow.

The new modal pattern gives room for a sidebar, which houses important purchase context and primes the user for the process ahead.

I built out the flow using this new pattern (after getting the OK from the design team) and the team and stakeholders all agreed that this felt much better.

Second part of step one showing the button loading state to communicate what's going on during lengthier backend processes

Bank connect screen is a more lightweight version of Plaid's ubiquitous API.

Autopay is a critical component to successful (low delinquency) lending products. Here, we try to message for safe, reversible user actions that are for the user's benefit.

Summary screen at the end of the application flow with all the key pieces of information the user needs to proceed to checkout

Another quasi-step using the blurred overlay to feel more lightweight

Final screen for manual entry of the virtual card used to pay for the order in full

Post 2.0 Launch: User Testing in Boulder, CO

We shipped Honey Pay 2.0 successfully and were delighted to see our efforts pay off on our KPIs. All good for the company and its stakeholders, but I wanted to get a deeper understanding of our analytics like CTR on the hook screen and the drop-off rate at different stages in the flow to optimize the experience.

We had been moving super fast non-stop, and I was itching to slow down and do some proper UX work, hungry for insight from real people. We weren't licensed to lend in California, so we had to go elsewhere if we wanted to do in-person user sessions.

Luckily, Honey had an office in Boulder, CO, where we were also licensed to lend! So off we went for a team "vacation" to our friends in the beautiful Centennial State.

I coordinated the entire interview process, from the our objectives and script to the AV setup. Scheduling left us with only one day to do our interviews, so the pressure was on. (I would not recommend booking multiple back-to-back sessions in one day—it's too much! Synthesis at the end of a long day was pretty rough.)

As always, usability sessions with real people were insanely insightful and the action items we drafted from reenergized the team to continue iterating. Here's an innocuous clip with Erin showing unnecessary friction in the beginning of the application flow, due to the next button sitting below the fold without any affordances or indication to scroll.

Clip from our user lab in Boulder, CO with a custom template for our multicamera setup. To get the whole picture, we recorded the screen and two angles of the interview to pick up facial expressions and body language.

So maybe the new pattern is a little too big. We could solve this by constraining the height of the modal to be less than the viewport height + sticky CTA and/or signifiers to scroll (e.g. a gradient mask or a down arrow). But since the drop-off rate on this screen was one of the lowest in the journey, we decided it was a low priority issue for later. There were a bunch of other critical incidents (CIs) that we turned into insight-driven initiatives around usability and product understanding.

At the time, we didn't have autofill on the personal info form and on the virtual credit card (VCC) experience at the end. It's an obvious quality-of-life improvement, but up until this point we had other things to prioritize. Actually hearing the frustration from these users motivated us to revisit adding that feature.

Lastly, a lot of friction and hesitation came from the hook screen feeling like it was "too good to be true" without a way to learn more. So we added a growth-esque landing page to the roadmap to help people on the fence decide better.

Building Out the Ecosystem

Now that the first-time borrower application flow was live and tested (with a roadmap to address CIs), it was time to 1) design the landing page, 2) scale to allow repeat borrowers, and 3) give quality of life improvements to users with existing loans (loan dashboard) and our wonderful member experience team (admin dashboard).

Landing Page

Based on our user testing sessions we set out to create a landing page for people on the fence about using Honey Pay. We wanted to be super transparent and reassuring in explaining mechanics and benefits of the product.

I teamed up with the insanely talented Visual Art and Product Messaging team to have a cohesive content strategy as I designed the page.

Honey Pay growth landing page has sections for the value proposition, how it works for the user and for the business, and privacy and security assurances.

Loan Dashboard

Another issue to address was user confusion on the loan dashboard. With POS lending products, there are naturally different types of transactions and adjustments that can occur over the course of repayment.

The current table didn't afford any explanation to what's going on, just one-word events and the dollar amount. For the redesign, I wanted to go with a new pattern that felt less like a spreadsheet and more like a journey.

After looking at competitors like Affirm and Klarna, I felt like a timeline structure best fit the user mental model of a long-term repayment process. We could string together past, present, and future visually and add friendly, human messaging to explain each event.

The main KPI for this was lowering the number of member experience tickets that came from dashboard confusion—The member experience team had been working tirelessly to cover some of these UX issues and it was time to treat the problem and not just the symptoms.

After we launched the redesigned dashboard, we saw a significant decrease in dashboard-related member experience tickets.

User loan dashboard before and after: The new design implements a timeline structure for transaction events over the course of the loan.

Admin Dashboard

After the success of the loan dashboard redesign, we decided to take things further and redesign the member experience dashboard for servicing loans. It was originally built by engineering and was in desperate need of quality of life improvements from design.

I worked closely with my PM and the member experience team to understand their workflows and identify their pain points. I worked to 1) improve scannability by adding structure and accessible color and 2) add CTAs for critical and common actions.

With the redesign, we were able to lower our main KPI of ticket resolution time.

Member experience dashboard before and after: The new dashboard gets new TLC from Design with more structure, color, and added functionality.

Repeat Borrower Experience

Now that we had a solid ecosystem around lending, we decided to reopen the product to existing Honey Pay users (member experience reported a lot of users requesting this!).

The first-time application flow had a large footprint to build trust and a sense of legitimacy for our beachhead financial product. But for repeat borrowers, we didn't need to address these concerns so heavily.

I wanted to make the experience familiar but much more lightweight and streamlined. I made the modal smaller and fit the entire process in one page vs. several steps separated by a big "Next" button. These changes, along with the global progress bar, made the application process feel much faster. It was delightful to move so quickly through a once effortful process.

New lightweight and streamlined Nth-time borrower application flow

Legal and Compliance

As we grew, we needed to pay more attention to legal and compliance issues since lending is heavily (read: federally) regulated. Legal implored us to add more robust KYC (Know Your Customer) verification with legal ID or SSN. With Honey being such a consumer-centric company, it was a new, juicy challenge to satisfy these hefty legal requirements. I created new patterns and flows to enable more thorough user verification.

ID verification screens

Outcomes and Conclusion

In the first year, we were able to issue over 5,000 loans totaling over $600K USD, with an exceptional 0.03% delinquency rate. Honey Pay was eventually sunsetted after the PayPal acquisition, being effectively replaced by PayPal's similar Pay in 4 product.

As the company's first financial product, Honey Pay ballooned to an entire ecosystem within the Honey product suite. All the problems we solved and structures we built paved the way for our second financial product, Gift Card Deals.

Throughout it all, the team and I were motivated by our core mission of giving underserved populations access to affordable credit. I'm deeply proud of our work in this space.