Context
Project overview
We built a flower delivery storefront where merchandising, funnel design, and performance share the same priority—so “beautiful product” translates into completed orders, not abandoned carts.
Delivered as one program:
- Responsive commerce surfaces with mobile-first interaction models
- A structured catalog with scannable hierarchy and decision-ready cards
- A checkout path with explicit progression and transparent delivery economics
- Visual direction that supports emotional positioning without decorative overload
The north star: reduce cognitive load at every step from browse to confirmation.
Delivery
How we delivered
Concrete ownership, scope, stack, and team structure—so this reads as shipped work, not a concept deck.
Our role
We owned the commerce experience end-to-end: information architecture for the catalog, interaction design for selection and comparison, checkout flow modeling, and responsive execution—so conversion work is visible in navigation, forms, and performance—not only in mockups.
Project scope
- Merchandising layer: category logic, product cards, and decision-ready fields (price, variants, delivery windows) without noisy chrome.
- Funnel: explicit stages, validation that matches mobile behavior, and pricing transparency before pay.
- Systems: adaptive layouts, touch targets, and loading discipline so the same journey works on phone-first traffic.
- Art direction: typography and spacing that stay quiet—product photography carries emotion.
- Instrumentation: funnel checkpoints to see where intent dies (not just landing page vanity metrics).
Technologies used
- Next.js / ReactComposable storefront routes; shared tokens between catalog and checkout.
- Commerce integrationsCart, catalog, and fulfillment hooks structured for growth—not one-off pages.
- PerformanceImage strategy and layout stability prioritized for mobile checkout completion.
- Design systemRepeatable components for cards, filters, and step UI—consistent affordances.
- QA & analyticsDevice matrix and funnel reviews around real purchase scenarios.
Team involvement
- Draxon: product design, UX, frontend engineering, and checkout QA on production paths.
- Client: assortment, brand, and operational rules (delivery cutoffs, regions, substitutions).
- Cadence: reviews on urgency scenarios—same-day paths, not only happy-path desktop strolls.
Problem
The challenge
Gifting and last-mile delivery create pressure: users decide fast, compare on thumbnails, and abandon when the path feels uncertain.
Constraints we addressed:
- Complex ordering flows that reduce conversion
- Unclear product presentation
- Lack of hierarchy in catalog structure
- Poor mobile experience
- Friction during checkout
The product had to earn trust in seconds—then get out of the way.
Strategy
Strategic approach
We treated the site as a funnel instrument: every screen answers what happens next, what it costs, and when it arrives.
The work centered on:
- Reducing friction in the purchase flow
- Simplifying product discovery
- Emphasizing key decision points
- Designing for mobile-first usage
- Aligning visuals with emotional intent
Optimization target: fewer hesitations between intent and payment.
Catalog UX
E-commerce experience
Merchandising is the first conversion layer: taxonomy, cards, and density tuned so users compare without hunting.
What we structured:
- Clear product categorization
- Visually driven product cards
- Quick access to key information (price, size, delivery options)
- Simplified add-to-cart interactions
- Intuitive navigation across catalog sections
Two modes—browse and buy-now—share the same predictable grammar.
Funnel
Checkout flow
Checkout is where ambiguity becomes abandonment—so we reduced steps, surfaced totals early, and kept progression legible on small screens.
Funnel changes:
- Minimal number of steps
- Clear progression through checkout stages
- Structured form inputs
- Transparent pricing and delivery details
- Mobile-optimized flow
Measured outcome: fewer exits at the moment of commitment.
Cross-device
Responsive design
Most revenue paths start on a phone—layouts, hit targets, and load behavior were validated as one system, not a scaled-down desktop.
System properties:
- Adaptive layouts across all devices
- Touch-friendly interactions
- Optimized loading and performance
- Consistent experience between desktop and mobile
Users can complete an order quickly from any device.
Art direction
Visual direction
Emotional categories still need editorial discipline—photography leads; UI stays quiet.
Direction:
- Clean and soft visual language
- Focus on product imagery
- Balanced typography
- Minimal distractions
- Elegant use of spacing
The interface enhances the perceived value of the product without overwhelming the user.
Experience
Product experience
End-to-end behavior was modeled as intent states—not page templates.
What the system supports:
- Quickly find relevant products
- Understand key details without effort
- Complete purchases with minimal steps
Same stack for leisurely browsing and same-day urgency.
Outcomes
Results
Directionally, the program improved the purchasing spine—fewer friction points from discovery to confirmation:
- Reduced friction across the ordering process
- Improved product visibility and selection
- Smoother checkout experience
- Increased user engagement
- A scalable foundation for future e-commerce growth
FAQ
Frequently asked questions
Storefront quality, mobile commerce, and scaling the catalog.