SOMMSATION
Marketplace Checkout & Order Details Re-design
A multi-vendor wine marketplace checkout that clarified fulfillment flows, reduced confusion, and elevated the overall experience for complex carts involving multiple wineries and digital gift cards.
.png)
Project Summary
Role: UI Designer
Team: UX Designer, PM, Engineering
Scope: Redesign Cart → Checkout → Order Details → Receipt
Status: Shipped to production with measurable improvements
Goal
Simplify a complex marketplace checkout and order details experience where a single order could include products from multiple wineries, digital gift cards, and separate shipping timelines, while also improving clarity around order tracking and fulfillment.
Focus Areas
-
Order Clarity – Help users understand how marketplace items are grouped and purchased.
-
Shipping Transparency – Clearly communicate fulfillment timelines across multiple wineries.
-
Digital Gift Card Support – Integrate digital purchases alongside shipped products.
-
Order Tracking & Details – Improve clarity around fulfillment and post-purchase tracking.
The Challenge
Sommsation’s checkout flow had evolved feature-by-feature without a unified system. As the marketplace expanded, the experience became increasingly fragmented:
-
Orders could include wines from multiple wineries (each shipping separately)
-
Digital gift cards required different fulfillment logic
-
Shipping costs varied by vendor
-
Order breakdowns were difficult to understand
-
Post-purchase order details lacked clarity
Customers expected a standard e-commerce checkout, but the backend orchestration was far more complex.
The core challenge:
How might we make a multi-vendor, multi-fulfillment marketplace feel as simple and intuitive as a single-brand checkout?
Marketplace Order Complexity
This was not just a cosmetic redesign.
Key constraints included:
-
Each winery manages its own shipping and compliance
-
Orders must be programmatically split by vendor
-
Gift cards are delivered digitally and instantly
-
Alcohol shipping regulations vary by state
-
Engineering architecture could not be fully restructured
The solution had to:
-
Respect backend logic
-
Communicate complexity clearly
-
Reduce cognitive overload
-
Preserve conversion
System flow diagrams for different use cases
Understanding the Existing Experience & V1 Visual Updates
Initial Mobile Design — too many steps, busy ux
Initial Desktop Design — too many steps, busy ux
Visual refresh attempt — aesthetic only, didn’t address core issues, items not grouped by vendor
Re-design Strategy
To tackle the core confusion in the original experience — lack of vendor clarity and mixed fulfillment types — we developed a focused set of design principles that guided the checkout redesign.​
​
​
1. Vendor-Based Order Grouping
Instead of presenting items as a flat cart list, we grouped products by winery to:
-
Clearly indicate separate shipments
-
Show shipping costs per vendor
-
Reduce surprise post-purchase
This aligned the UI with how fulfillment actually works.
​​​​​
2. Modular Information Hierarchy
​
I redesigned the checkout layout using a modular structure:
-
Clear sectioning
-
Collapsible groupings
-
Strong visual hierarchy
-
Simplified summary column
​​
The goal was to reduce scanning friction and prevent overwhelm while still presenting necessary compliance and shipping information.​​​
​
3. Unified Digital + Physical Experience
​
Gift cards introduced an additional layer of complexity.
​
We created:
-
Distinct visual indicators for digital products
-
Separate fulfillment messaging
-
Clear receipt differentiation
-
Email confirmation alignment
​​
The experience feels cohesive while acknowledging different fulfillment types.
​​​​​
4. Reimagined Order Details & Receipt
​
The post-purchase experience was redesigned to:
-
Clearly show which winery ships which items
-
Reinforce separate tracking expectations
-
Improve invoice readability
-
Provide confidence and trust after purchase
​​
This reduced confusion-driven support tickets and improved transparency.
Separate winery tracking
Vendor based grouping & collapsible sectioning
Clarifying Order Structure in the Cart
(Shown on desktop)
1. Group by Vendor — Clarify Fulfillment
​
-
Why: Helps users mentally model separate shipments
-
Impact: Reduced confusion in order review and payment
Multi-vendor cart with grouped product sections -- expanded Winery Total sections
Multi-vendor grouping gives users clarity that shipments will be separate.
Mixed digital + physical cart differentiates fulfillment paths to set expectations.
Scalable cart states show robustness across scenarios (single, multi, mixed carts).
2. Distinguish Digital & Physical
​
-
Why: Gift cards don’t ship; wine does
-
Impact: Prevents incorrect delivery expectations​
3. Scalable Modular States
​
-
Why: Cart adapts to variety of scenarios (single vendor, multi vendor, gift-only)
-
Impact: Future-proofs UI for growth
This format mirrors strong case studies where each image has a purpose.
Simplifying the Checkout Flow
(Shown on mobile)
Cart
Contact & Shipping Info
Order Summary
Drop-down
Shipping Method
Shipping Method
(Edit Mode)
Payment Info
Order Details
Systems Thinking & UI Craft
While I was UI-led on this project, much of the impact came from system-level thinking:
-
Standardized spacing, components, and patterns across checkout steps
-
Established consistent summary modules for reuse across cart, checkout, and receipt
-
Aligned typography and hierarchy with the evolving design system
-
Designed scalable states for edge cases (mixed carts, single vendor carts, gift-only carts)
​​
Because the marketplace continues to grow, scalability was critical. The patterns created here now support future expansion without rework.
Collaboration
This was a deeply cross-functional effort.
-
Partnered with UX to refine flow logic and content clarity
-
Worked closely with engineering to understand backend order splitting
-
Iterated with product to balance business and compliance needs
-
Participated in design reviews and implementation QA
​​
Much of the complexity was resolved through tight collaboration between design and development.
Outcome
The redesigned checkout shipped to production and:
-
Improved clarity around multi-vendor fulfillment
-
Reduced confusion about shipping breakdowns
-
Elevated the overall visual and interaction quality of the marketplace
-
Created a scalable foundation for future growth
​​
Most importantly, it transformed a technically complex flow into something that feels simple, structured, and trustworthy.
.png)