SHIPPED 2025
PRODUCT DESIGN
B2B PLATFORM
E-COMMERCE
ROLE
UX/UI Designer
TIMELINE
2022
TEAM
1 PM
2 Developers
1 Designer (Me)
SKILLS
UX/UI Design
Research
User Testing
Transforming Madame Coco’s B2C platform into a B2B experience to support large-scale, professional purchasing workflows.
Designing for B2B meant shifting from visual browsing to clarity-driven, data-heavy decision workflows. This project was about reducing cognitive load and supporting confident high-volume decisions.
To achieve this, the platform needed to move beyond typical consumer shopping patterns. B2B buyers work with bulk quantities, negotiated pricing, repeat-order logic, and the interface had to reflect that. My goal was to redesign the experience so that key information is surfaced at the right moments, making ordering faster, clearer, and easier to control at scale.
Target Audience
This platform was built for professional buyers who regularly purchase in larger quantities and need clear stock visibility and pricing accuracy. This includes:
Small retail store owners
Interior designers and decorators
Hotel and hospitality procurement teams
Wholesalers and distributors
Corporate purchasing departments
Online Retailers
My Role
As the UX/UI designer on this project, I was responsible for reshaping the shopping experience for B2B purchasing. My focus was on clarity, efficiency, and confidence during high-volume ordering. I worked on:
- UX Strategy: Understanding professional purchasing behaviors and workflows.
- UI Design: Creating a clean, structured interface that supports quick scanning and decision-making.
- B2B Workflow Adaptation: Designing flows that accommodate bulk orders, stock-based pricing, and account-specific conditions.
- Checkout Optimization: Ensuring accuracy through clear validation and review steps.
The goal was to create a platform that feels fast, reliable, and effortless for professional buyers — even when handling complex or large orders.
Pain Points & Solutions
Managing bulk orders was time-consuming and difficult to compare.
Large carts became overwhelming and hard to verify before checkout.
Payment and credit processes felt unclear and caused hesitation when finalizing orders.
Product discovery prioritized browsing instead of efficient decision-making.
These improvements made the platform easier to navigate, faster to use, and more reliable for professional buyers, especially when processing large or repeated orders.
Prioritizing information that drives purchasing decisions
Product Detail Page
B2B purchasing relies on clear access to the right information at the right moment. I restructured the product detail page to highlight stock levels, pricing tiers, and variation options before anything else. This allows buyers to evaluate quantities and pricing quickly, without digging through the interface.
This structure supports confident, fast decision-making when ordering in large volumes.
Product Detail Page
Iterations for structuring large orders into a clear review process
As ordering patterns evolved, the page needed to display more granular details within bulk packages. I refined the product table to show product codes and item-level pricing under each variation, making it easier to reference, compare, and order specific items.
This iteration improved traceability and reduced friction in high-volume ordering workflows.
Structured for clarity in large-scale orders
Shopping Cart Page
Large B2B carts can easily become overwhelming. I redesigned the cart to group related items, clarify quantity and pricing breakdowns, and make the review stage easier to navigate. This helps users verify orders quickly before checkout, minimizing confusion and mis-ordering.
This layout turns a complex dataset into a manageable, scannable overview.
Shopping Cart Page
Iterations for better hierarchy and visibility
As the platform scaled, users needed to distinguish product variations and track item-level details inside bulk orders. I introduced a clearer grouping structure and added product codes and individual pricing visibility to support referencing, adjustments, and internal purchasing workflows.
These improvements made the cart more transparent and actionable in real procurement use.
Built for clear post-purchase management
My Orders Page
In B2B environments, past orders are often referenced, reordered, or adjusted—not simply reviewed. I redesigned the My Orders page to highlight product groups, payment status, and shipment progress in a format that supports quick scanning and confident follow-up actions.
This structure helps businesses verify purchases, manage delivery timelines, and move forward without friction.
My Orders Page
Iterations for item-level visibility
As user needs expanded, the page required more detailed visibility into what each bulk order contained. I refined the layout to show product codes and item-level pricing beneath each grouped order, enabling accurate referencing and easier follow-up steps such as reorders or returns.
This increased transparency made the order history more actionable and better aligned with real procurement workflows.
summary
This project required me to think beyond traditional e-commerce patterns and design for professional purchasing behaviors.
Instead of focusing on persuasion or browsing, the goal was to support clarity, precision, and repeat-use workflows.
Working with large order structures, variable pricing, and detailed data tables taught me how to prioritize information effectively and reduce cognitive load in complex interfaces. It also strengthened my understanding of how interface decisions connect directly to business operations and purchasing efficiency.
The result is a platform that feels structured, transparent, and dependable, reflecting how real procurement happens rather than how standard e-commerce shops are designed.
