Product Pages

Foxtrot · Web · iOS · Android

The Problem

Foxtrot carries everything from bananas to tequila bottled in a hand crafted decanter. We needed a product detail page (PDP for short) that allowed us to display the relevant information for every item in the spectrum.

The Approach

We interviewed customers to compile a list of information people wanted to see on our PDP. Storytelling, nutrition facts, and compelling videos, topped the list of requests.

The Results

The old PDP displayed the bare minimum information. The new PDP displays everything our customers asked for and more.
Product detail page desktop design for Extreme Cookie Dough Sprinkle Ice Cream
Product detail page mobile design for Extreme Cookie Dough Sprinkle Ice Cream
Item story mobile design for Matcha Latte
Product detail page mobile design for Kentucky Straight Bourbon
Content block mobile design for Visitor seltzer
Product detail page mobile design for Burrata Chopped Salad
Item story mobile design for Kid Sister Rosé
Product detail page desktop design for Sun Lips Rosé
Product detail page desktop design for Sun Lips Rosé

The Details

We created detail templates for different taxonomies so we could display relevant information for products across all categories.

Wine bottle with two filled wine glassesProduct detail page mobile design for wine details

Wine Details

Close up of saladProduct detail page mobile design for food details

Food Details

Topo Chico Seltzer in a coolerProduct detail page mobile design for beer & seltzer details

Beer & Seltzer Details

Rotating product detail page desktop design for wine, food, and beer & seltzer details

Content Blocks

Though we believe every product we carry is special, sometimes we really wanted to sing about a specific product. We set out to create an outlet for long form content that allowed the Foxtrot team to tell in depth stories about products and the people who made those products. Thus the “content block” was born.

The “content block” is a flexible module composed of an image and accompanying text. The Foxtrot team could tell stories on the product page by adding as many or as few content blocks as they needed to communicate why that product was so unique.

Scrolling product detail page mobile design for wine with content blocks
Product detail page desktop design for wine with content blocks

Quick Content

The marketing team produced a lot of great content for products across our social media channels. We wanted to figure out a way to distribute that content even more by including it on app and web as well.

We aligned on the idea of an “item story” that could be used to showcase videos and images. This would give the marketing team a playground for more fun and expressive content that could be created quickly.

Animated product detail page mobile design for popcorn with item story
The redesigned product page went live across web, iOS, and Android in September of 2022 and was immediately impactful.
16%
Increase in conversion rate
119%
Increase in rate of products added to basket from product page
10%
Increase in avg. time spent on page
Browse Projects
Person holding phone with Cafe Pickup home screen open
Cafe Pickup
Placeholder
Pick & Pack
Placeholder
Product Pages
Placeholder
Careers Hub
Men's clothing displayed on shelves
Featured Trunks
Embroidered logo on green fabric
Cody Williams
Desert landscape with bright blue sky
Pinpoint