People purchase groceries and snacks 1-2x per week on average. But how do you decide what products to purchase? Do you focus on price? availability? nutritional content? all of the above? At Gopuff, I had the opportunity to redesign our product tiles— the most important entry point for each purchase.
While working on this project, I collaborated with a Product Manager, BE engineer, FE engineer, and consulted with our VP of design and CEOs/Founders. I was responsible for the end-to-end design of the product tile, reorganizing product metadata to allow for easier customer digestion and quicker add-to-cart rates.
How might we improve the information hierarchy on product tiles, thus increasing conversion rates and ultimately, revenue?
I collaborated with our user research team to establish current product tile behavior—what information is being sought and how much information is needed to make a quick purchase decision.
130 customers were asked to complete a max-diff (maximum different scaling) exercise to help prioritize information on product tiles. Users wanted quick information on price, availability, and the ability to add items to their cart. All other information was deemed superfluous, or simply less important.
Additional user research was completed throughout the project to evaluate decision making, including A/B testing and general feedback.
I completed a quick exercise to decipher the existing, or lack thereof, hierarchy. It was important to account for different user types, namely FAM (Gopuff’s paid membership) and non-FAM. So, I created a hierarchy list with all possible elements that could appear on a product tile. This hierarchy was shared with our CEOs and stakeholders, who decided that denoting “Gopuff brand,” or our in-house products, was least important at the time being. Our ad-tech team influenced the high ‘sponsored’ position, as it increased customer purchasing confidence.
I established a separate hierarchy for all badge variations. Our merchandising team was embedding copy into our product imagery, which presented an accessibility issue. The new badge hierarchy resolved the issue and allowed for scalability and flexibility.
One of my first instincts was to swap the position of price and title. This was based on user research as well as a competitive analysis across similar platforms, like Walmart, Target, and Instacart. To my surprise, our A/B test had close to flat results (.01% decrease in add-to-cart rates), not drastically improving add-to-cart rates nor revenue.
Why? For a couple of reasons, one being that Gopuff sells recognizable products so customers tend to ignore the title anyhow. Additionally, our A/B test included fixed-height tiles, meaning our titles and pricing were aligned across each row. However, customers pointed out that the price was emphasized which they did notice and appreciate.
I like that the price is the first thing I see, but I always look for prices first and am able to ignore the title because I recognize the picture
Following our price position testing, we wanted to improve the visibility of sales, especially for FAM members. I noticed our sale badges read “sale,” which is very clear but doesn’t include any offer information. So, I tested a badge with the percentage off in the badge, so that it read “10% off” instead of “Sale.”
Customers immediately noticed the badge difference:
I like seeing how much I’m saving with Gopuff. It kind of makes it worth paying for a subscription
Our FAM members deserved a little extra differentiation, so I changed the badge color to our “FAM Blue” and added our logo next to the strikethrough pricing on the tile.
Not only was our goal to increase add-to-cart rates, we wanted to increase FAM sign-ups. So, I improved the design of our FAM callout for non-members, emphasizing the price and percentage off differential. I tested three different options for the callout, and customers gravitated towards the simplest approach, or Option "A".
I like the icon but it’s too much for me. All I care about is saving more money, so if this FAM program will do that for me, then great.
Another consideration for product tiles was our Starbucks partnership. Since we rely on our partners to upload product imagery, we needed to account for backgrounds. However, I prefer it as it differentiates the products even further. I added extra padding to the bottom of the image so titles and prices would remain aligned across our app. I also utilized our existing metadata size/quantity line for any product customizations.
In-Mar coupons are coupons provided by venders that have to be clipped by customers in order to apply to items in their cart. I completed a quick competitive analysis to see how other e-commerce apps displayed these coupons. I found all the approaches quite similar, suggesting a familiar user experience.
I decided to show available coupons on product tiles if the hierarchy allows, with interactive behavior in-line to other experiences. Additional functionality considered was tapping and holding on coupons to open a bottom sheet with more information, and an animated dotted line when a customer clips a coupon. Both these functionalities were put on hold due to a higher engineering effort.
After launch, we saw a 3.5% increase (stat-sig) in add-to-cart (ATC) rates on product tiles, improving search conversion. We also saw an uptick in average order volume (AOV).
Next steps include a continual monitoring of the new product tiles. We’re also planning to increase the functionality of coupons, adding in the proposed ability to tap and hold to show additional details. This would allow us to display other eligible sale products, potentially driving revenue.