Storefront variations
I designed two storefront arrangements: one for general collections and one focused on cookies.
Food commerce | Shipped product
Slurrp Farm: D2C Commerce Redesign
I designed storefront collections and a product-detail page where shoppers compare products and choose a pack.
PROJECT AT A GLANCE
The essentials.
- Design scope
- Food-commerce interface
- Available views
- Product detail · Pack choices
- Screen focus
- Shipped interface
- Key flow
- Collection to pack choice
DESIGN WALKTHROUGH
Storefronts and pack selection.
Three decisions shape how a shopper moves from a collection to a chosen pack.
Pack selection
Pack selection sits within product detail, next to the product being chosen.
Promotions and product rows
Both storefronts balance promotional content with repeated product rows.
Each of these decisions shipped in Slurrp Farm.
Design
Question
What does a shopper need to see when comparing products and choosing a pack?
Design
Scope
I designed these areas of the store:
- Storefront collections
- Product cards
- Product detail
- Pack choices
Screen
Coverage
How the shipped screens connect.
Storefront collectionsProduct cardsProduct detailPack choices
Key
decisions
- The general and cookie-focused storefronts each use their own content arrangement.
- Pack choices live on product detail rather than in a separate checkout step.
- Related products sit alongside the selected product.
Shopping & Product Flows
Shopping experience
Explore the commerce experience for family-friendly food products.
01 / 05FROM THE PROJECT FILES
Inside the shipped product
Screens from the shipped product. Values shown are sample data.
Storefront
Product details
Cookie collection storefront
What I’d Change
Next
Looking back, I’d make the differences between packs explicit before a shopper selects one, and test with shoppers that the comparison reads clearly.