01
DISCOVERY
Deep categories slowed high-intent shoppers before they reached a product.
Calabria Market
From local grocery shopping to one connected product flow.
ROLE
Product Design · UX/UI
PLATFORM
Mobile commerce
FOCUS
Discovery → Fulfillment
YEAR
2026
01
The app had the right features, but not a coherent decision model.
The existing experience supported the core commerce tasks, but context was lost between them. Discovery, configuration, fulfillment and post-purchase states behaved like separate features, forcing customers to reinterpret the journey at each step. The redesign reframed the app around continuity rather than feature boundaries.
02
DECISION
Variants, customization and pricing were not clear at the moment of choice.
03
FULFILLMENT
Pickup, payment and order status felt like disconnected operational steps.
Prepared food
Ready-made and configurable products coexist in the same shopping journey.
Deli orders
Weight, quantity and preparation choices add configuration before cart.
Pickup
Availability, date and time affect whether the order can be completed.
02
One journey, six dependent decisions.
The redesign treats commerce as a sequence of dependent decisions rather than a stack of screens. Each stage answers a specific user question, preserves prior context and surfaces constraints before they can become downstream surprises.
01
DISCOVER
Search and browse
02
SELECT
Product + variants
03
CUSTOMIZE
Deli and quantity
04
FULFILL
Pickup + time
05
PAY
Fast checkout
06
RETURN
Track + loyalty
01
High-intent shoppers had to navigate deep categories.
Prioritize intent before taxonomy.
Search and direct entry points surface products earlier.
02
Fulfillment appeared as a late operational step.
Treat pickup as part of the purchase decision.
Method, date and time are resolved before payment.
03
The journey ended too abruptly after checkout.
Extend the experience beyond payment.
Order status, notifications, support and loyalty remain connected.
03
The experience preserves context across the flow instead of treating each screen as an isolated task.
The product experience was designed around real states, not only polished happy-path screens. Selection, fulfillment, payment, notifications, recovery and support all share the same order context, so the app behaves like one product even when the journey changes direction.
Payment recovery
Failure states keep the shopper moving instead of ending the journey.
Order communication
Notifications make fulfillment status visible after checkout.
Support
Issue reporting gives customers a clear path when fulfillment breaks.
Each decision carries context into the next one.
Product selection, customization, fulfillment choices and order status remain connected as the user moves forward. That continuity reduces repeated decisions and keeps the interface understandable across browsing, checkout and post-purchase. It is also what turns a set of mobile screens into a coherent product model.
04
Four product decisions changed how the journey behaves.
The product challenge was not to remove complexity, but to place it in the right moment. The redesign makes product options, fulfillment rules and recovery states visible when they become relevant, so shoppers do not have to remember rules, reconstruct context or discover critical constraints at the end.
01
SEARCH-FIRST DISCOVERY
Reduce time-to-product
Global search and clearer browsing prioritize intent over deep category navigation.
02
VISIBLE PRODUCT CHOICES
Reduce decision ambiguity
Variants, quantity and pricing stay visible at the point where customers compare options.
03
FULFILLMENT BEFORE PAYMENT
Reduce checkout surprises
Pickup method, date and time are treated as core order decisions before the final payment step.
04
POST-PURCHASE CONTINUITY
Reduce uncertainty after checkout
Tracking, notifications, recovery states and support extend the product beyond the receipt.
05
A compact system built around
the moments that matter.
The visual system was built to support repeatable product behavior, not only visual consistency. Typography, spacing, controls, status patterns and selection states create a shared language for browsing, configuration, fulfillment and checkout, making future flows easier to design and build.
Core Colors
Burgundy
#AF1124
Brown
#5B403F
Gold
#C5A059
Ink
#1B1C19
Cream
#FBF9F4
Warm
#F2EFE9
Success
#006D34
Typography
Display / Epilogue Bold
Taste of Calabria
H1 / Epilogue SemiBold
Fresh from the market
H2 / Hanken Bold
Popular near you
Body / Hanken Regular
Premium Italian groceries, prepared food and wine.
Label / Hanken SemiBold
ADD TO CART
Spacing & Radius
4 px
8 px
16 px
24 px
32 px
8 px
12 px
16 px
Pill
Search products
Available
−1+
SuccessAccentNeutral
PickupDelivery
10:00 AM
10:30 AM
11:00 AM
Product image
PopularProsciutto di Parma
DOP • sliced fresh
$14.99
06
The product model has to survive beyond the happy path.
A usable commerce product has to survive ordinary failure. Payment can fail, pickup availability can change, an order can move through unexpected states, and customers may need help after checkout. These cases were designed as first-class product states so recovery remains clear and the user never loses the order context.
PAYMENT FAILED
Recover without losing order context.
SLOT UNAVAILABLE
Explain the constraint and offer the next valid choice.
ORDER UPDATE
Keep fulfillment status visible after purchase.
REPORT AN ISSUE
Give customers a direct support path from the order.
07
From disconnected tasks to a connected mobile commerce system.
The result is a clearer mobile product model for the complete customer journey: finding food, configuring products, making confident purchase decisions, scheduling fulfillment, paying, tracking an order, resolving problems and returning through loyalty. The case demonstrates product design across flow architecture, interaction states, edge cases and a reusable UI system, not only screen styling.
CLEARER
Fewer hidden decisions across the purchase journey.
FASTER
High-intent actions surface earlier in the flow.
MORE RESILIENT
Recovery and support states are designed into the product.
SCALABLE
A compact component system supports future commerce flows.
CALABRIA MARKET · UX/UI & PRODUCT DESIGN · 2026
Next project
Next project: PerfectMockup