STMPlatform
Reimagining direct-to-consumer fashion commerce — 3D product exploration, AR try-on, in-platform collaboration, and a digitalized production pipeline that cuts lead time nearly in half.
What needed
to be solved
SAITEX — a sustainable denim manufacturer — needed to eliminate intermediaries and own the end-customer relationship directly. The STM (Saitex To Market) platform had to solve three interconnected problems simultaneously.
Traditional apparel selling relied on physical showrooms and lengthy sampling cycles. Going D2C meant replacing the tactile experience entirely — the product had to feel real before it even existed. This is the central design challenge the STM platform was built to solve.
Who are we
designing for
Qualitative research and ethnographic field studies revealed two distinct user groups — customers buying finished garments and merchants co-creating custom orders — each with fundamentally different mental models and failure points.
Quick-decision buyer — wants speed and certainty
- Needs fast, frictionless checkout with minimal steps
- Driven by social proof, return policies, and trust signals
- Pain point: too many steps between interest and purchase
- Motivation: confidence that the product matches expectation
Detail-oriented buyer — needs to see before buying
- Thoroughly studies fabric specs, stitching, hardware details
- Requires 3D views and material close-ups to feel confident
- Pain point: can’t assess true quality from flat photography
- Motivation: certainty that craft and material justify the price
Fashion-forward buyer — visual-first, discovery mode
- Discovery-oriented, influenced by curated looks and styling
- Motivated by AR try-on and aspirational editorial photography
- Pain point: generic catalog feel with no editorial context
- Motivation: finding something that feels exclusive and on-trend
Price-conscious buyer — compares before committing
- Compares options exhaustively before any purchase decision
- Motivated by bundle deals, duty transparency, honest pricing
- Pain point: unclear pricing for custom orders and hidden fees
- Motivation: knowing the final price before entering checkout
Both the customer and merchant journeys broke down at the exact same moment: the transition from browsing to committing. Customers couldn’t visualize products; merchants couldn’t co-design in-platform. Both needed a shared confidence layer — the design had to bridge intent and commitment.
Turning insights
into priorities
Synthesis workshops distilled all research into an opportunity landscape. Mapping insights across impact × feasibility gave the team a clear, evidence-backed design roadmap — and made trade-off decisions explicit.
Immersive 3D + AR Product View
Highest demand (91% of users), proven technology via Sketchfab. Directly eliminates the #1 pain point. Ship in v1.
AI-Powered Size Recommendation
Desired by 58% of users but requires significant body measurement data corpus. Deferred to Phase 2 roadmap.
Wishlist + Social Sharing
Easy to implement, moderate engagement uplift. Included as a v1 hygiene feature without investing design resources.
VR Showroom Experience
Compelling vision, but hardware-dependent and marginal reach. Deferred post-MVP as a future premium tier.
The convergence session revealed that no competitor was addressing all five capability dimensions simultaneously. The whitespace was clear: STM could own the intersection of 3D visualization, AR try-on, and merchant co-creation within a single unified platform.
Constraints that
shaped every decision
Before a single wireframe, the team established a set of non-negotiable principles and technical constraints. These governed every trade-off from layout to feature scope — acting as a design constitution.
Confidence First
Every screen must reduce doubt before asking for any commitment from the user
Zero Wait State
3D models load progressively — users explore while assets stream in the background
Merchant Parity
Dashboard mirrors consumer flow — shared mental models reduce the learning curve
Mobile Primary
AR try-on is mobile-only — every interaction was designed for that context first
Accessible Commerce
WCAG AA compliance throughout — contrast, keyboard nav, and alt text on all 3D assets
Site structure: Homepage → Category → Product Detail (3D) → Cart → Checkout → Order Tracking. Each step was explicitly designed to reduce drop-off at the very next step — a linear funnel with confidence checkpoints, not a traditional e-commerce template.
Mapping the landscape
and the whitespace
Competitive benchmarking mapped STM’s opportunity against five leading D2C platforms. Three concept directions were then generated, stress-tested against personas, and evaluated before committing to the final approach.
| Platform | 3D Product View | AR Try-On | Collab Tool | Custom Orders | D2C Native |
|---|---|---|---|---|---|
| Generic Shopify | ✕ | ✕ | ✕ | ~ | ~ |
| NIKE By You | ~ | ~ | ✕ | ✓ | ✓ |
| Warby Parker | ✓ | ✓ | ✕ | ✕ | ✓ |
| Unmade.com | ~ | ✕ | ✓ | ✓ | ~ |
| ASOS / Zalando | ✕ | ✕ | ✕ | ✕ | ✕ |
| STM (target) | ✓ | ✓ | ✓ | ✓ | ✓ |
No single competitor combined 3D product visualization + AR try-on + in-platform merchant collaboration in a unified experience. STM had a rare opportunity to own this intersection for sustainable fashion manufacturing — a genuinely uncontested position.
Direction A — Editorial flat
Clean photography, editorial layout, fast performance. Safe and familiar — but fails on confidence-building. Doesn’t solve the #1 pain.
Direction B — Immersive 3D
3D model center-stage, AR on mobile, progressive spec disclosure. Directly addresses the top pain, differentiates clearly, and serves all four personas.
Direction C — Custom builder
Heavy customization upfront. Ideal for merchants but creates too much friction for consumer purchase journeys. Absorbed as the merchant mode.
Five flows, two
platforms, one system
Four primary customer flows and a merchant dashboard were designed in Figma — all built from a shared design system. Each flow was purpose-built to address a specific failure point identified in the research phase.
Landing Page
Hero section with strong value prop, 3D product as the primary visual anchor, and social proof above the fold.
Product Detail
3D viewer sticky on scroll, color + size selector, AR trigger on mobile, material details in expandable tabs.
Cart & Review
Persistent cart, inline quantity edit, live pricing with duties, cross-sell in sidebar, clear CTA.
Checkout
3-step (ship · pay · review). Guest-first. Stripe-embedded payment with one-click for returning users.
Merchant Dashboard
Order management, design collaboration thread, production status timeline, and Stripe subscriber billing.
Cart and checkout were kept as deliberately separate steps. Research showed users needed a “review moment” before committing to payment — especially on higher-value custom orders. A forced single-page checkout elevated anxiety and increased abandonment. The two-step separation acted as a confidence checkpoint.
Five signatures that
define the platform
Five design solutions emerged as the platform’s defining differentiators — each directly traceable back to a user pain point identified in research, and each impossible to replicate with an off-the-shelf e-commerce template.
Sketchfab 3D Model Integration
Real-time 360° product views via embedded Sketchfab. Users rotate, zoom to material level, and inspect every stitch before ordering. Progressive loading ensures zero wait-state blocking — users explore while the model streams. Directly eliminates the #1 purchase hesitation driver identified in research.
WebAR Try-On via Mobile
A WebAR layer allows customers to project garments into their real environment using a smartphone camera — no app download required. Reduces return rates by bridging the gap between imagination and reality. The single most-requested capability across all research sessions.
In-Platform Merchant Collab Tool
Comment threads attached directly to design specs with full version history. Collapses a 5-email back-and-forth into a single threaded canvas on the order page. Merchant pilot participants reported eliminating an average of 12 email exchanges per custom order.
Stripe Multi-Tier Payment Integration
Per-subscriber Stripe integration handles tiered merchant pricing, custom order deposit flows, and global multi-currency support. PCI-compliant, embedded directly into the checkout UX — not a redirect. Duty estimates shown at cart stage to eliminate checkout-stage surprises.
Streamlined 3-Step Purchase Flow
Cart persistence across sessions, inline quantity editing, transparent pricing with live duty estimates, guest checkout with account upgrade prompt post-purchase. Every friction point identified in usability testing was resolved before handoff. The checkout flow reduced from 6 steps to 3, with account creation moved entirely post-purchase.
The combination of 3D + AR + in-platform co-creation makes STM the only fashion D2C platform that serves both end consumers and B2B merchants in a single unified experience with shared infrastructure. It’s not two products that look alike — it’s one system with two modes, reducing design and engineering maintenance overhead significantly.
Testing, iteration,
and the SUS score
Iterative usability testing across two prototype rounds — customer flows and merchant dashboard — generated specific, actionable findings that directly drove the final design revisions before engineering handoff.
Moderated Usability Testing
- 12 participants — 6 consumers, 6 merchants
- Think-aloud protocol across 45-minute sessions
- 3D interaction and checkout flow as primary tasks
- Task completion rate + System Usability Scale (SUS) scoring
- Session recordings reviewed for hesitation patterns
Prototype Walkthrough
- Figma interactive prototype shared with stakeholders
- Heatmap simulation analysis on key decision screens
- Checkout drop-off scenario testing with replay
- Mobile AR prototype tested on 3 device types
- Accessibility audit run against WCAG AA checklist
Competitive Benchmarking
- Side-by-side task testing vs Shopify store baseline
- Time-on-task measured for 3D product exploration
- Perceived trust ratings compared on product detail page
- Checkout completion rate vs industry average (68%)
Merchant Pilot Review
- 3 early-access merchants reviewed full dashboard flow
- Workflow mapping against existing email-based process
- Collaboration tool feature validation with real orders
- Stripe billing tier walkthrough with actual pricing scenarios
Before testing — issues found
- ✕ 3D model occupied full viewport, blocking all page scroll
- ✕ Add-to-cart required account creation upfront
- ✕ Checkout had 6 steps — address and billing on separate pages
- ✕ Merchant collab tool buried in settings, not on order page
- ✕ No price transparency — duties revealed at final step only
- ✕ Mobile AR entry point was 4 taps deep in PDP
After iteration — resolved
- ✓ 3D in sticky scrollable panel — content flows alongside it
- ✓ Guest checkout added — account prompt moved post-purchase
- ✓ Checkout collapsed to 3 steps: ship · pay · review
- ✓ Collab thread surfaced directly on the order detail card
- ✓ Persistent cart shows total + duty estimates at all times
- ✓ AR trigger moved to primary CTA row on mobile PDP
Impact that compounds
over time
The STM platform launched with measurable outcomes across production efficiency, customer experience, and merchant adoption. The shift to D2C fundamentally altered SAITEX’s go-to-market economics — and the platform was designed to compound value with every order cycle.
STM is not merely an e-commerce site — it is a manufacturing intelligence layer. Every D2C transaction generates demand signal data that feeds directly into production planning, enabling SAITEX to produce closer to real demand rather than forecast. Over time, this compounding loop eliminates overstock, reduces waste, and makes each production cycle more efficient than the last. The platform was designed with this flywheel in mind from the very first architecture decisions.
Discovery + Research
User interviews, ethnographic field studies, competitive audit, business goal alignment with SAITEX leadership
Synthesis + Opportunity Mapping
Persona development, HMW framing, impact-feasibility matrix, design principle definition
Information Architecture + Wireframes
Dual-platform IA, site structure for both consumer and merchant flows, low-fidelity validation
3D + AR Prototyping
Sketchfab embed integration, WebAR.js mobile testing, progressive loading pattern exploration
High-Fidelity UI + Design System
Full component library in Figma, responsive layouts across breakpoints, Stripe checkout embedded flow
Usability Testing + Iteration
Two rounds with 12 participants, SUS scoring from 62 → 81, six specific issues resolved before handoff
Engineering Handoff + Launch
Figma dev-ready spec, annotated component library, merchant onboarding flow, dual prototype delivery