Cocoon eCommerce Experience

Transforming a cannabis kiosk company into a modern omnichannel shopping platform

Project Details

Cocoon began as an in-store self-service kiosk provider for cannabis dispensaries. As the retail market evolved and users grew more comfortable buying online, Cocoon needed to expand beyond the physical kiosk and offer a fully functional mobile and desktop e-commerce experience.

I was brought in to design this complete digital ecosystem — from homepage to PDPs, from deals to personalized content — translating the kiosk’s streamlined retail flow into a responsive online shopping platform.

My role: Product Designer - UX, Interaction Architecture, UI Design, Responsive Design, User Flows, & Developer Handoff

The Challenge

The market shifted — and Cocoon needed to shift with it.

Dispensaries increasingly wanted a unified solution offering:

  • In-store ordering via kiosk

  • Curbside pickup

  • Online browse & reserve

  • Loyalty integrations

  • Real-time inventory synced with their POS

The legacy kiosk UI couldn’t simply be “ported” to the web — consumers shop differently when they’re not under time pressure, and mobile users need fast, intuitive experiences.

Key problems discovered

  • No existing web storefront tied to Cocoon’s kiosk product

  • Users needed a mobile-first experience for browsing menus & placing orders

  • Product data, filters, and categories were inconsistent across brands

  • Dispensaries required customization (colors, branding, promotions)

  • Flow needed to support both recreational & medical purchase constraints

  • SEO & marketing needed a coherent, modern UI to drive traffic

Design constraints

  • Must work seamlessly on both desktop & mobile

  • Must easily skin for different dispensaries using Cocoon’s platform

  • Inventory & product data comes directly from dispensary POS APIs

  • Must maintain compliance with cannabis regulations (age gates, regional legality, disclaimers)

  • Must closely mirror the ease and clarity of Cocoon’s in-store kiosk UX

The goal: Create a modern, conversion-focused cannabis e-commerce platform that feels native to Cocoon’s physical retail experience.

Key Features Designed

    • Clean, quick DOB verification

    • State-specific disclaimers

    • Seamless entry for returning customers

  • The homepage was designed with merchandising flexibility in mind:

    • Promo banners

    • Featured categories

    • Trending products

    • Location selector

    • “Shop by effect” modules

    • Dispensary branding integration

    • Mobile-first scrolling hierarchy

  • A highly optimized PLP including:

    • Category filters

    • Effects filters

    • Price sliders

    • Potency filters

    • Product tags

    • Sort options (popular, price, newest)

    • Infinite scroll for mobile

    • Clear product cards with:

      • Image

      • Price

      • Potency

      • Available weights

      • Deal badges

  • Designed for fast comprehension:

    • Full product imagery

    • THC/CBD percentages

    • Effects & terpene profiles

    • Reviews

    • Strain type (Indica/Sativa/Hybrid)

    • Pricing table for all available formats

    • Add-to-cart sticky CTA

    • Recommended products

    • Dosage & education blocks

  • The checkout flow was intentionally simplified:

    • Sticky cart drawer

    • Clear subtotal & deal calculations

    • Pickup time selector

    • ID & payment instructions

    • Age/compliance confirmations

    • Text-message order confirmations

  • The design system supports:

    • Custom colors

    • Logo placement

    • Swappable hero banners

    • Custom typography

    • Minor layout variations

    This allows Cocoon to deploy the same platform across many brands while making each feel unique.

UI & Interaction Design

Design System

Includes:

  • Typography scale

  • Color tokens for dispensary branding

  • Product card variants

  • Button hierarchy

  • Promo badges (BOGO, % off, daily deals)

  • Grid spacing patterns

  • Iconography for effects, product types, terpenes

  • Form elements, pickers, drawers

  • Checkout & cart components

Visual language

  • Clean, retail-forward

  • Modern spacing & depth

  • Highly visual product cards

  • Familiar UX patterns (Amazon, Instacart, DoorDash behaviors)

  • Legible mobile layouts

  • Consistent elevation, color, and spacing rules

Responsive behavior

  • Mobile-first

  • Tablet-optimized

  • Desktop layouts with multi-column grids

Cocoon_Home.png
Cocoon_Locations.png
Cocoon_Locations_Location–Specials.png
Cocoon_Account-Dashboard_Last-Purchase_More-Info.png

Final Summary

The Cocoon E-Commerce Experience transforms a kiosk-first retail product into a complete omnichannel shopping platform — giving dispensaries a modern, mobile-first menu and giving customers a streamlined way to browse, learn, and place pickup orders.

It demonstrates the impact of bringing enterprise retail UX, cannabis compliance, and high-performing mobile UI together into a cohesive platform.

Previous

Cocoon Web Admin Dashboard
Next

Konami Gaming - Synkros