Overview
In the months after the Website Merge, we noticed that sales and offers appeared differently on the product tile depending on which offer engine it came from. I was tasked with updating the offer displays on product tiles, which ultimately turned into a complete product tile redesign. My assigned product manager left shortly after the project started, so, in addition to design, I also took on a lot of product work.
Who is the audience?
All digital users will benefit from offer display consistency since everyone interacts with offers on the website and app. Online shoppers use product tiles to build their cart and in-store shoppers come to the website primarily for browsing the weekly ad and clipping coupons.
What is UX Success?
Consistent visual look of offers across the experience
Give product tiles a more modern look and feel
Allow product tile to display more than 1 offer
Make product tile scalable for future additions
Role Design + Product Lead
Landscape analysis
Design Ideation
UX/UI Design
Usability Testing
Duration 6 Months
Platform Desktop, Tablet, Mobile
Landscape
Our Website
Offers come from different sources
Our sites have multiple offer engines that serve up offers for customers.
Tiles and PDP are visually inconsistent
Offers use different colors and character treatments depending on where they come from.
Tiles and PDP are inconsistent in use
Offers shown on the product tile don’t always appear on the product detail page (PDP) and cart.
Product tiles only show one offer at a time
Many products have multiple offers that a customer can take advantage of, but we only surfaced the highest stacked offer.
Our Competitors
I looked at competitors in the grocery industry and best in class eCommerce to…
See how they displayed sales and offer across their experience
Study the structure of their product tiles.
Insights learned…
Offers stand out when one consistent color is used. If another is used it needs to serve a clear purpose.
Most competitors put price and image near each other for easy scanning .
Responsive tile height allows for more items in one view and feels more modern.
Ideation
Workshop
I set-up and ran a half day workshop with 10 designers, product managers, offer delivery, and developers.
Our goal was to breakdown our current tile and generate ideas for a new one focusing on design consistency and presentation of multiple offers on a tile.
The output was product tile concepts that had a lot of overlap in ideas.
Wireframes
I synthesized ideas from the workshop and picked the ones with real promise to vet feasibility and level of effort with PDL tech and Offer delivery teams .
After the vetting meetings, I had a good understanding of our technical capabilities and where the design could go.
Tile Design
Tile Structure and UI
Updated Tile Architecture
The price was moved up next to the product image to improve tile scannability and allow sale price and promotion to stand out.
Addition of Promo Zone
A designated promo zone was put at the bottom of the tile above the ‘Add to Cart’ button. By having them all in one area, we set customer expectation on where to search for deals.
Dynamic Tile Height
Tile heights change based on a product’s description and promotion to maximize the amount of product tiles viewed. On desktop and tablet when products are in rows, heights adapt to the tallest height.
Unified Promotion Color
We gave each brand one promotional color to communicate sales and deals throughout online experience. Color’s were chosen that stood out against the brand’s primary color.
Tile Interaction Enhancements
Offer fulfillment clarity
A large customer complaint involved customers thinking they completed an offer and later finding they did not get the discount. A checkmark was added to the tile when a customer completes an offer to help communicate offer fulfillment and reduce uncertainty.
Improved Coupon Visibility and Feedback
In the previous tile, the coupon button and offer copy were separated. In the new design, the copy is inside the button to help connect the relationship between the two. As you clip and fulfill the coupon, the text changes to help communicate offer fulfillment in addition to the completion checkmark.
Informing Customer of Multiple Offers
Products often have multiple offers tied to them. In the previous tiles, only one offer could be surfaced so the customer wouldn’t know all the savings they had available to them. In the new designs, a ‘View All Item Offers’ button was added that brings customers to the detail page to see all offers.
True Price Reflection
For the offers that change price when you buy a certain amount of items, we were able to change the pricing on product tiles to reflect of what the customer will actually pay.
Cart View
Tiles in the cart were also updated to reflect the new designs and functionality. Now when a customer is reviewing their cart, they can see coupons they haven’t clipped and offers they haven’t fulfilled.
Usability Testing
I conducted an unmoderated usability test with online grocery shoppers to see if they were able to interpret and use use the new designs correctly. I went into testing with 3 questions to answer:
Q1: Do users know when an offer is fulfilled?
All customers easily took advantage of the deal when prompted. The fulfillment checkmark was intended to be what users called out, but instead they referenced the cart. The completion checkmark was kept because it was not seen as a usability issue and could still be useful, but it was interesting to find that the cart was the customer’s source of truth.
Q2: Do users understand multiple offers display?
Initial button for multiple offers said ‘View More Offers’ which users thought would goo to see more of the same offer type instead of more offers for the item. We updated the button to say ‘View All Item Offers’ to be clear about where you go and what you see.
Q3: Do users know how to see full offer details?
Intended path for the user was to click on the offer link on the tile, but most went to the page sort and filter initially. Although not the intended path, customers would be able to get that information by filtering for specials. This was not seen as a usability issue and no updates were made.
Production AB Testing
The product tile is a cornerstone of our online shopping experience, so we rolled out the new designs slowly to the public and ran a series of AB tests to make sure we didn’t effect add to cart KPIs.
Sale Price Display
We ran a test on showing the original price strikethrough on sale items (new design variant) vs not showing the original price (original design control). Our hypothesis was showing the original price will lead to more add to carts leading to higher basket size and order conversions.
The results were a +2.93% in sale items added to carts and a +1.30% sale items as % of total add to carts.
Mobile Product Image Size
We ran a test to see if image size on mobile tiles affected add to cart KPIs. Our hypothesis was making image size larger would make it easier for customers to find the products and add them to cart.
Variant 2 (100px) was the ultimate winner, but both variants led to significant increases in revenue/session, basket size, order conversion, and add to carts/session. This test had the largest incremental revenue lift of 2020 adding an additional 32 million in revenue.
Takeaways
What I Learned
Strength in numbers - Having a workshop early with multiple stakeholders helped gain buy-in and built support for the project.
Talk to Devs Early - The discussions we had with developers early in the project helped create scope and avoid wasted design time.
Design Restraint - It was a challenge to find the right amount of information to present on the tile without making it feel busy.
What I would do differently
Additional coupon testing - Coupons are a corner stone of our online experience and I would have liked to do more testing around how customers interact with coupons on product tiles.
Offer Language Testing - Early in the project it was determined out of scope to update offer language, but if possible it would be interesting to see what language updates we could have made to make offers clearer.
