Honey Droplist Collections — Price Drop Alerts

I expanded Honey’s beloved price tracking tool by designing a feature that lets shoppers save and categorize their favorite items.

Overview

Collections lets you organize items saved to your Droplist while shopping online. This feature naturally came with new affordances and patterns: I designed the bookmark icon set for saving items and the flow for creating, adding to, and managing Collections.

Although product saves have several dimensions to them (item variants like size and color, price drop alert thresholds), I kept the UI lightweight and the UX as seamless as possible using a compact, non-intrusive bottom sheet with preselected values based on the most popular options.

With the launch of Collections, we saw a significant increase in product saves and paved the way to leverage UGC for shopping discovery on joinhoney.com and the app. The feature is still live today on Honey mobile apps and web surfaces.

role

Sr. Product Designer

timeline

Q2 2019

Links

Figma Working File

joinhoney.com Help Article

Outcomes

0 → 1

UX research

Context: Pre-Collections Experience

Post-save organization had been implemented via tags that users could assign to their droplisted items, but it wasn't performing as well as we'd hoped. Our hypothesis was that tags were too implicit of a mental model for categorizing items for personal shopping. So we wanted to pivot to Collections, a more explicit and personal mental model with its purpose built into the name.

The existing Droplist flow was also victim to tiptoeing around technical constraints, like having to select size or color options before actually saving. The result was a multistep flow that felt too cumbersome for what should really just be a quick save. When I joined the team, I wanted to simplify the experience and ruthlessly question which constraints actually needed to be there.

The existing Droplist flow required selecting item variants like color and size, and put watch duration and price drop threshold in a subsequent page.

UX Refinements & UI Exploration

So we set out to optimize the flow into, ideally, a single step. We wanted to optimize for number of saves and number of collections created after launch. Combining high information density, customization, and organization in a single step required UX optimizations on the flow and clever UI work.

The most obvious issue to look at was the number of choices the user had to make to complete a save. So my PM and I looked at the data on different interactions in the existing flow and found that over 80% of users didn't bother changing the duration and price threshold for Droplisted items, so we kept it at the default value and eliminated a required step in the flow.

Around the same time I had started exploring different UI patterns that could accomplish our goals for Collections. Keeping the sheet was an obvious starting point, since it preserves the existing pattern for saving an item and keeps the context underneath it in view—but we wanted to make the sheet as small as possible to make it feel lightweight.

My process for reducing the visual footprint of the half sheet was to 1) start conservatively, laying out all the required pieces of info and actions first and giving them the structure and space they needed, and then 2) combine and omit aggressively in different permutations until there were a few concepts that felt promising.

UI iteration to make combine steps and reduce the overall footprint of the sheet

The double dropdown was a bit risky since I hadn't seen many examples of the pattern on other apps, but it felt right. It reduces two choice-heavy patterns to one line, staying compact but being able to expose the UI gracefully if needed.

We sent the CEO an update and he gave us good feedback: The Collection component didn't feel super tappable/engaging. So we explored again and landed on a image-button carousel with wide tap targets. This felt much more engaging to use.

With the sheet at a good place, we worked on the "Create a Collection" flow.

Final UI for the new Droplist sheet with Collections

Collection Creation & Management

Taking heavy inspiration from Pinterest (basically the OG collections platform), we landed on a good direction early. We used the multi-thumbnail pattern (with the current item being saved prepopulated in the primary slot) to signify the creation of a new group of items that can be added to later.

We also added suggestions based on keywords in the item's description and popular tags for similar items to lighten the cognitive load of coming up with a name.

Flow for creating a new Collection

All Screens

All main flows, error states, and edge cases for Droplist Collections

Collection Storefronts Concept

Months later, our CEO pitched my PM and me the idea of influencer storefronts built on Collections, where influencers can build and share their own Collections of items and earn commission off its sales. We designed this in a day (and a long night) and our work was used to show the future vision and upside of the Droplist product suite.

Collection Storefronts flows for creating a new storefront, adding items to it, and managing earnings from commissions

Conclusion

Collections was one of the first projects I worked on at Honey. Working with my PM was a joy—we moved super fast together, they were down for late nights, always pushed for excellence, and they had an extensive design background to top it off. I'm proud to see Collections still live today as a core part of Droplist.