Marketplace Checkout & Order Details Redesign
Making a multi-winery purchase easier to understand, from cart to delivery.
Sommsation brings independent wineries together in one marketplace. A single purchase can include multiple shipments, separate shipping costs, and digital gift cards. I led the UI design for a responsive checkout and order-details experience that made those differences visible within a consistent interface.
SOMMSATION · RESPONSIVE E-COMMERCE
Project Overview
-
Role: UI/UX Designer
-
Team: UX Designer, Product Manager, Engineering
-
Scope: Cart, checkout, order details, and receipt
-
Platform: Responsive web
-
Status: Shipped to production
Problems & Constraints
One customer-facing order could trigger several independent fulfillment journeys behind the scenes.
Sommsation’s marketplace allowed customers to purchase wine from multiple wineries alongside digital gift cards. Although customers experienced this as one order, each winery managed its own shipping, costs, compliance requirements, and tracking.
The existing checkout lacked a unified structure, making it difficult to understand how items were grouped, what would ship separately, and what customers should expect after purchase.
The redesign needed to clarify these relationships while working within the existing fulfillment architecture.
My Contribution
I owned the visual and interaction design across cart, checkout, order details, and receipt. My focus was the interface: how orders were grouped, how costs and delivery information were presented, and how the experience adapted across screen sizes.
I partnered with UX on flow and content, with Product on requirements, and with Engineering on fulfillment behavior and implementation. My work included responsive layouts, reusable components, interaction states, handoff specifications, and implementation QA.
Where the Experience Needed More Clarity
The existing experience provided a starting point for reviewing how customers encountered order, cost, and delivery information.
I focused the UI redesign on three questions:
• Which items belong to each winery?
• How do shipping charges relate to the overall total?
• What happens to each part of the order after checkout?
The original tablet, desktop and mobile checkout presented numerous steps without clearly communicating vendor-level fulfillment.
Existing Experience
The original checkout required customers to navigate several dense steps while interpreting how products, costs, and shipments related to one another.
Mapping the possible purchase and fulfillment paths revealed the need for a flexible system rather than a single fixed checkout flow.
Marketplace Complexity
The customer-facing checkout needed to accommodate several interconnected constraints:
• Each winery managed its own shipping and compliance requirements.
• Orders were programmatically separated by vendor.
• Shipping costs and delivery timing varied by winery.
• Digital gift cards were delivered separately and immediately.
• Alcohol-shipping regulations varied by location.
• The existing fulfillment architecture could not be fundamentally restructured.
The interface needed to reflect this complexity clearly without exposing customers to the full complexity of the system.
How might we make one purchase across multiple wineries feel clear and cohesive?
1. Make each winery’s part of the order clear
I organized items by winery so the interface reflected how the order would be fulfilled. Each group brought the winery, its products, and the relevant shipping information together.
This made the relationship between items and shipments explicit while preserving an overall summary of the purchase.
​
-
Winery heading establishes the group.
-
Products and shipping information stay together.
-
The order summary brings the purchase total together.
2. Give costs and next steps a clear hierarchy
Checkout brings together detailed information and a simple immediate task:
Knowing what to review and what to do next.
I refined typography, spacing, and emphasis to distinguish product details, shipping charges, and the overall total. Consistent summary patterns and primary actions gave the experience a recognizable structure across steps.
1 winery, promo code
multiple gift cards
1 winery + gift card, promo code
1+ wineries, promo code
3. Distinguish shipping from digital delivery
Wine and digital gift cards can share a purchase, but they require different delivery information.
I designed distinct treatments for physical and digital items within the same visual system. The interface communicated winery shipping and gift-card delivery in the context of the relevant products.
3 wineries, change shipping method
1 winery + gift card, change shipping method
4. Carry clarity beyond checkout
Placing an order is only the beginning of fulfillment.
Customers still need to understand what they purchased, which winery is sending each shipment, and where to find updates.
I carried the order-grouping and summary patterns into the receipt and order-details experience, connecting the purchase overview with the information for each winery’s portion of the order.
Default view
Expanded details view
A consistent experience on smaller screens
On mobile, the same order information needed to remain understandable in a single column.
I adapted the layouts to preserve winery grouping, cost hierarchy, and clear actions across the purchase journey. Shared components connected cart, checkout, and order details while accommodating the available space.
Cart
Contact & Shipping Info
Order Summary
Drop-down
Shipping Method
Shipping Method
(Edit Mode)
Payment Info
Order Details
A Reusable System Across the Purchase Journey
I standardized spacing, typography, order groups, and summary modules across cart, checkout, and receipt. Shared patterns supported single-winery, multi-winery, and gift-card scenarios while maintaining a consistent visual language.
Working with UX, Product, and Engineering helped connect those patterns to the underlying fulfillment behavior. I documented responsive layouts and interaction states, then participated in design reviews and implementation QA.
Outcome
The redesign shipped to production across cart, checkout, order details, and receipt.
The delivered experience organized products by winery, distinguished physical and digital delivery, and carried consistent order-summary patterns across desktop and mobile.
Reflection
This project reinforced that UI design can make complex fulfillment rules understandable. Grouping, hierarchy, and consistency were central to explaining how one purchase could become several deliveries.
The most important decision was to carry the winery-based structure through the journey, connecting what customers reviewed before purchase with what they saw afterward.
