03 / Product Design / Commerce

Nestlé Commerce

Turning recipe inspiration into a shoppable experience.

A connected recipe-commerce platform spanning four Nestlé brands, multiple retailers and personalized product selection.

Role: Product Design Lead
Client: Nestlé
Platform: Responsive Web / Mobile
Scope: UX / UI / Commerce / Personalization

01 / TOLL HOUSE

02 / LA LECHERA

03 / RECETAS NESTLÉ

04 / EL MEJOR NIDO

01 / Challenge

Bridge inspiration and purchase without breaking the recipe experience.

Recipe content already had attention. The design problem was connecting that intent to real products, local retailer inventory and checkout without making the experience feel like an ad.

Many brands, one system

The experience had to feel native inside Toll House, La Lechera, El Mejor Nido and Recetas Nestlé while operating from a shared design and commerce framework.

Complexity behind one action

Retailer availability, product mapping, substitutions and cart building needed to happen behind a simple shopper action: shop the ingredients.

01Recipe intentPreserve the content experience that earned the shopper’s attention.

02Ingredient semanticsTranslate amounts and preparation language into purchasable products.

03Local inventoryResolve retailer, store, assortment, price and availability in real time.

04Shopper controlMake every match, swap, removal and quantity change understandable.

05ResilienceKeep the journey useful when products, stores or services fail.

02 / System

A commerce layer built around the recipe.

The design hides a complicated transaction behind one understandable action: turn the ingredients in this recipe into a Walmart basket I can review and buy.

Nestlé Toll House recipe page ending directly after the save, print and share controls — **01 / RECIPE**Intent begins in content

THE CONNECTED LAYER

Ingredients become a local basket.

2¼ cups flour→Bob’s Red Mill
All-Purpose Flour

1 tsp baking soda→Arm & Hammer
Pure Baking Soda

Recipe amounts, brand rules, location and live assortment resolve before the shopper sees the list.

Walmart ingredient basket generated from a Nestlé Toll House recipe without browser navigation controls — **02 / WALMART BASKET**Products remain editable

RETAIL INTEGRATION

Nestlé creates the intent. Walmart completes the transaction.

The integration used the shopper’s location to select a Walmart store, checked the recipe against that store’s assortment, then handed a reviewed basket into Walmart’s cart for fulfillment and checkout.

01Choose a nearby Walmart
02Match products and prices
03Review swaps, quantity and total
04Continue in Walmart checkout

COMPLETE BASKETReady to review

Every ingredient has a local product, quantity and price.

INVENTORY GAPOne decision needed

The basket stays intact while the shopper resolves the affected ingredient.

03 / Experience

Designing the experience.

03.1 / Experience design

Keep commerce secondary to the recipe.

The shopping entry point was visible when it mattered, but the recipe remained the hero. This kept the experience useful first and transactional second.

Nestlé recipe commerce mobile experience

CONNECTED CTA / EMBEDDED ON NESTLÉ SITESOrder the ingredients for this recipe.The commerce layer appears inside participating recipe pages after intent is established, not as a separate storefront.

03.2 / Personalization

Translate ingredients into the right products.

Ingredient-level product mapping supported localized assortments, default selections and substitutions. The shopper could adjust choices without having to rebuild the recipe manually.

Nestlé mobile recipe experience — 01Start with the recipeIntent already exists

Nestlé ingredient selection — 02Shop ingredientsOpen the connected layer

Nestlé retailer selection — 03Choose a retailerUse local availability

Nestlé product substitutions — 04Resolve productsAccept or swap matches

Nestlé shopping list — 05Review the listKeep the shopper in control

Nestlé cart handoff — 06Continue to checkoutHand off the finished basket

03.3 / Basket control

Keep the basket transparent and the shopper in control.

The system did the heavy lifting, but never treated its first answer as final. Shoppers could see ingredient-to-product matches, change stores, compare substitutions, adjust quantities and understand the running total before handoff.

Nearby Walmart store selection — **01 / LOCALIZE**Store choice determines assortment

Ingredient list mapped to retailer products — **02 / REVIEW**Ingredient and product stay paired

Product substitution choices — **03 / RESOLVE**Alternatives stay within context

03.4 / Multi-recipe planning

Scale from one recipe to a whole plan.

The same commerce model supported a single dish or dozens of saved recipes. Duplicate ingredients were consolidated, recipe sources remained visible and people could switch between the recipe view and the combined ingredient list without losing their selections.

Desktop basket containing products from multiple recipes — **DESKTOP / 12 RECIPES**Products are consolidated while recipe cards preserve origin.

Mobile ingredients for multiple recipes — **INGREDIENT VIEW**One combined list

Mobile selected recipe list — **RECIPE VIEW**Every source remains editable

04 / Resilience

Keep the shopper moving when the perfect basket isn’t possible.

Availability changes by store and moment. Instead of presenting dead ends, the experience keeps the recipe, the affected ingredient and the next useful decision together.

Mobile basket warning identifying an unavailable quantity — **NAME THE GAPOne ingredient needs attention.**The recipe and basket remain intact while the issue is explained.

Mobile product substitution choices for the affected ingredient — **OFFER A USEFUL DECISIONResolve it in context.**Compare a substitute, change the store, remove the item or continue.

Mobile basket ready for review after the inventory issue is resolved — **KEEP MOVINGReturn to a reviewable basket.**The shopper sees the updated product, quantity, price and total before handoff.

ISSUE EXPLAINEDCHOICE STAYS LOCALBASKET IS PRESERVEDCHECKOUT REMAINS OPTIONAL

05 / Impact

From recipe engagement to measurable commerce.

The platform gave Nestlé a direct path from content to purchase while preserving the value of the recipe experience. It connected personalization, retailer integration and commerce in a framework that could scale across brands.

For shoppers

Fewer steps between deciding what to cook and having the right ingredients in a cart.

For Nestlé

A reusable commerce system that turned high-engagement recipe content into a measurable sales channel.

06 / Reference

“Scott was far more than a talented designer. He was a true partner who brought both strategic vision and hands-on excellence to every project we tackled together.”

Stathis Mytilinaios
COO, Innit

Next project

Innit

↗