Optimizing Content Discovery at Fetch
With Fetch, users earn points for scanning their physical and digital receipts. Points are awarded when a user buys a product from a partner company, or when they buy products that complete special offers. Points can then be redeemed for gift cards and other rewards. Offers promise a certain number of points for buying a specific product or group of products and are the main content on Fetch, along with the partner brands whose catalog of products always give points.
Discover is the landing page of the Fetch app. On this page, users can view partner brands and special offers in a list with sorting functionality, or they can search for specific results. The problem with this page is that this content sits below the fold which causes some users to not know what offers are or how to use them to optimize their accumulation of points.
Previous Experience
Scoping the Problem
When a user has an in progress offer, a new section is generated below the brands section and above the special offers section. This pushes the special offers section even further below the fold. In progress offers should be prioritized in the hierarchy so that users are encouraged to complete them, but creating a new section hijacks the UX of the page.
This image shows the discover page on load without any in progress offers. The Special Offers section is already barely above the fold. How might we provide functionality that allows in progress offers to be prioritized while still remaining in the special offers section?
Defining Scope and Determining Needs
Prior to starting design work, it was decided that filtering functionality would be built on the technical side. With that in mind, we defined the scope as creating one filter that would be integrated into the existing sort menu for the special offers section (shown).
Improved Experience
Low Fidelity
I started conceptualizing what this pattern could look like with some low-fidelity sketching and prototyping. Being as iterative as possible at this stage of a project is a fundamental piece of my process.
A few key points quickly became clear to me:
It was important to clearly differentiate sorts and filters with UI. Users were familiar with how sorting worked on Fetch, but filtering would be new. Communicating this with the visual language of the components was key.
Given that we were trying to save vertical space, it was important to not add more with this component. Some of my concepts involved adding a new line for the filter, which I realized was counterintuitive to the problem we were trying to solve
At this point, the UI and visual design was not being heavily focused on. The top priority was nailing function.
We met with engineers, product managers, and other designers to reach a more well-rounded decision. After those meetings and our own chats, we decided that integrating a new chip into the existing sort chip menu was the best solution.
The rationale for this solution is as follows:
It borrowed from an existing pattern: tapping a chip would change the way the offers list was presented. Because users were already familiar with this, it made sense to utilize it for this new functionality.
It didn’t add any new vertical real estate, meaning the problem of moving offers above the fold would be addressed.
Moving into High Fidelity
After determining how the filter would work and how it would integrate into the existing interface, we decided on final UI. We redesigned the existing sort chips so that the sorts and filters would be equal in hierarchy but different in appearance. This was to drive home the insight from earlier that we needed to communicate to users that sorts and filters were different so they know how to use them.
We also designed a pressed state for all of the chips. This was lacking from the existing pattern and was added to give more feedback to users that an action was taken.
The other addition to the pattern was an animation on the inactive state of the filter. When a user has a new in progress offer, the gradient in the border would shimmer by rotating around the chip. That animation would cease when the user selects the chip.
Documentation & Hand-off
Redlines & Specs
To ensure an efficient hand-off to the developers, I put together a detailed file that included a full-fidelity prototype for the entire new offers section, all of the new Figma components with detailed padding, color, type, and sizing specifications, and a detailed breakdown of animations and interactions.
By doing this, it was easier for engineers and other stakeholders to move quickly with development and implementation. The time between design completion and an internal release was impressively less than two weeks, which was aided by the specs file.
Special thanks to my teammate on this project, Jacob Berchem.