UX research

Context: Existing Comparison Shopping MVP

I joined the Tips team (again) in Q2 2022 to take the Comparison Shopping MVP to maturity. The team had launched the MVP in Q1 to get signal on whether the added utility was helpful to users and drove transaction volume (vs. cannibalizing sales away from merchants).

The MVP consisted of 1) a price comparison table on a page separate from the joinhoney.com PDP and 2) a Tip that leads there from merchant PDPs.

The team had built a version of the Comparison Shopping Tip that was less direct (no exact price differentials, higher/lower comparisons) to ship fast while mitigating risk to merchants. The feature received solid engagement without negatively impacting sales on competing merchant sites.

Comparison Shopping MVP flow

MVP Comparison Shopping Tip (autopops on merchant PDPs) — Note the vague wording due to sometimes inconsistent price reporting and legal concerns over merchant conquesting (taking traffic away from affiliate merchants).

The MVP Comparison Shopping Page was separate from the established joinhoney.com PDP to mitigate risk of integrating early on an untested feature.

With promising performance from the MVP, we were ready to build the tech to make consistent and accurate price comparisons and design a new experience to use it.

Product Strategy and Flow

With promising performance from the MVP, we were ready to build the tech to make consistent and accurate price comparisons and design a new experience to use it.

As part of the new experience, I wanted to redesign the joinhoney.com PDP to have the price comparisons baked in (remove a step for the user). I also wanted to keep track of the user's shopping session so we can give the user positive affirmation if they ended up going with what we think is the "Top Pick" or best deal. With positive affirmation, we wanted to reinforce this behavior and normalize this more efficient workflow for our users.

New end-to-end flow for Comparison Shopping — Logic is built in for first-time and repeat impressions to avoid being so spammy, as well as events that track the user's shopping journey to affirm the behavior of using Comparison Shopping. Also using my flowchart component set I made for Honey.

Tip Redesign

Having worked on Tips before (designed the Cash Back Offers Tip in 2021) I wanted to see which Tips performed the best and use their UI patterns as a starting point for exploration.

I ended up going with a variation on the highest performing Tip, the Cash Back Offers Tip. I borrowed the overall layout of the dominant graphic on the left with the main value proposition on the right.

I also included a heading locked up with the product image on the left, giving the user quick and reassuring context to what they were looking at (this tip is related to the product you're currently looking at). Initial explorations used the product image as the dominant graphic, but my brilliant PM Elli Rego gave me a push to see if I could communicate more under a squint test (if you squint, can you still tell what's going on?).

I landed on abstracted bar graph illustrations for "this is the lowest price" and "save $X at another store". To bring it all together, I worked with my friends at Product Messaging to round out the design with concise copy.

Different variants and state of the redesigned Comparison Shopping Tip that autopops on a merchant PDP.

joinhoney.com PDP Redesign

The existing PDP showed a single price for a single merchant, with a button to take users to the deal comparison page. I wanted to rework the PDP to combine PDPs of the same product from different merchants into one page, highlighting comparison shopping as a core feature.

To combine the PDP and Deal Comparison Page, I 1) created a new pattern for "Buying Options" that'd live as the right column next to the product image and 2) implanted the deal comparison table underneath instead of linking out to it.

Flow for the new joinhoney.com PDP with different entry points

Before and after joinhoney.com PDP — The new PDP combines all instances of the same product across different merchants and presents them in the right-hand "Buying Options" column. The option to save to Droplist (price drop notifications) lives at the bottom in case there are no compelling options.

Different states of "Buying Options" depending on where the user clicked from, cash back offer availability, and top pick status

Anatomy of the price subcomponent for devs with click targets highlighted

Prototype

UX research