.png)
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.
Overview
Sommsation is a multi-vendor wine marketplace where independent wineries fulfill orders directly to customers. Unlike traditional e-commerce, orders often contain items that ship separately from different wineries, along with digital products such as gift cards.
The existing checkout experience did not clearly reflect this complexity, leading to confusion around shipping, fulfillment timing, and order breakdown.
I led the UI redesign of the full checkout flow — including cart, checkout, order details, and receipt experiences — while collaborating closely with UX, product, and engineering to simplify a technically complex system into a seamless, cohesive experience.
​
-
Role: UI Designer (with UX & cross-functional collaboration)
-
Scope: Cart → Checkout → Order Details → Receipt
-
Shipped to production with measurable improvements
Context & Problem
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?
Initial 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
Constraints & 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
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
Cart Re-design
Shown on desktop
Structure:
1. Group by Vendor — Clarify Fulfillment
-
Why: Helps users mentally model separate shipments
-
Impact: Reduced confusion in order review and payment
Multi-vendor grouping gives users clarity that shipments will be separate.
Multi-vendor cart with grouped product sections -- expanded Winery Total sections
2. Distinguish Digital & Physical
-
Why: Gift cards don’t ship; wine does
-
Impact: Prevents incorrect delivery expectations
Mixed digital + physical cart differentiates fulfillment paths to set 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.
Scalable cart states show robustness across scenarios (single, multi, mixed carts).
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)