Ibotta case study
During my time at Ibotta i’ve touched many areas of the business. From Launchpad (an internal marketing tool) to Pando (design system) as well as the web and mobile app. This case study focuses on the Ibotta browser extension and it’s first iteration (Phase 1). It is a key strategic initiative in Ibotta’s suite of products.
Phase 1
I was originally hired at Ibotta to get a greenfield project off the ground to compete with our main competitors in the space. Popular cash back browser extensions had been in the market for years and were mature products by the time this project began. So, when I began working on the Ibotta browser extension (which i’ll lovingly refer to as the BEX) I had a lot of work to do. How would Ibotta enter a crowded market with something fresh, innovative, and differentiated that would meet Ibotta’s key business objectives?
My role: Design a payments-forward browser extension for Chrome from the ground up, utilizing user research best practices, competitive analysis, stakeholder feedback, and innovative design thinking. Deliver assets to and support a squad of 10+ engineers. Facilitate cross-functional weekly check-ins and live design sessions with senior leadership, product management, engineering, UX research, and marketing.
Fuctionality: The phase 1 BEX is a mechanism for purchasing digital gift cards that you can apply at checkout and then be rewarded a percentage amount of cash back via Ibotta. It works on hundreds of retailer sites that offer digital gift cards as a payment method. This functionality is completely new to the marketplace and i’m listed as a co-inventor on a few patents for this version of BEX.
Tools: Figma, usertesting.com, Ibotta’s Pando design system, Google docs, Zoom.
Timeline: 6-8 months
Outcome: Establish a foothold in the cash back browser extension space, expanding to affiliate cash back offers (phase 2) within a year.
Getting started
The BEX began with dozens of low fidelity sketches looking at sizing and positioning on a website. We needed to stand out in case a user had several extensions installed, yet stay out of the way of native navigation elements such as shopping carts, account settings, and other important CTAs. Several rounds of user testing led to the bottom ribbon approach. It was seen as the least obtrusive form factor, more easily dismissable, and differentiated.
The shopping journey
Research and testing users’ online shopping habits was a key initial step in deciding when and where to pop up the BEX on a retailer site. I worked closely with Ibotta’s UX research team to conduct various tests.
What did we do?
Conducted surveys with dozens of participants. Some were familiar with Ibotta, while others were new users.
Conducted user interviews in-person and over Zoom.
Conducted an all-day focus group with new and existing users.
What did we find?
In short, we found that users had wildly different shopping patterns. For example, some users preferred to shop on their mobile devices for smaller items, but would then shop larger ticket items on desktop for the benefit of extra screen real estate and larger imagery. Many people sought out bargains first, then decided what to buy based on the deals they could find — whereas other shoppers found what they wanted first, then looked for deals after the fact. After synthesizing all the feedback received, we settled on a flow that would accommodate most users.
Low-fidelity user flows
Mapping out user flows is an integral step in most design projects. I prefer to start with low fidelity sketches limited in color, typography, and imagery so as not to distract from the actual flow. In many cases, both sad and happy paths are mapped out at this time.
High-fidelity designs
After many design iterations and rounds of testing, we settled on final designs for the new Ibotta browser extension. The following screens are representative of the final designs for phase 1 BEX.
Activation
This is the first screen in the BEX journey. When a user lands on a supported retailer site they see the “ribbon” at the bottom of the screen prompting them to activate cash back.
Post-activation
At this point in the flow, the cash back amount is locked in and waiting for the user to initiate the payment process. This usually happens on a checkout screen.
Minimized state
This is showing the ribbon minimized down to it’s “nubbin” state to get it out of the way while browsing. Clicking on it brings up the full ribbon component.
Checkout amount input
When the user is ready to buy a gift card, they are presented with an input for the amount of gift card they wish to purchase.
Purchase confirmation
When a valid amount is entered into the input, the button turns green and primes the user for the purchase.
Processing
At this point, the multi-state button changes to a processing state as the sale is verified.
Conclusion
Ibotta soft launched the BEX to dozens of high traffic retailers in a carefully controlled release that was feature flagged for a subset of Ibotta users. The vast majority of users enjoyed the instant cash back experience of paying with a digital gift card. A small number of users were confused on how it worked since they hadn’t seen anything like it in the market before. This prompted an onboarding functionality that would serve to educate users on how the product worked at their favorite online retailers.
In the weeks and months that followed, more feature enhancements were added to Phase 1 BEX. A web app dashboard was built so users could quickly see all of their gift cards and retrieve the numbers later on, for instance. All in all, Ibotta achieved it’s primary objective with Phase 1 BEX by becoming a dominant player in the cash back browser extension marketplace. The learnings from Phase 1 led to many new innovations and design patterns that are now industry standards. Phase 2 of the Ibotta browser extension would grow the company’s overall business from 0% to 15%. Case study for phase 2 coming soon.