Cocoon Web Admin Dasboard
Product Design - UI/UX - Desktop & Mobile
Project Details
Cocoon builds self-service kiosks for cannabis dispensaries, enabling faster transactions and reduced staff load. While the kiosks provided a great customer-facing experience, operators lacked a unified backend to manage machines, cash levels, downtime, product offerings, and user permissions.
I was brought in to design the entire admin ecosystem—a desktop and mobile-responsive web portal that would become the operational backbone for Cocoon’s clients and internal teams.
These designs were conducted while working for Audacious (AUSA).
Role: Product Designer — UX, UI, interaction design, component library, research synthesis, and developer handoff.
Client
AUSA (Audacious)
Year
06/2020 - 04/2021
The Challenge
Fragmented Systems. No unified oversight.
Dispensaries were juggling spreadsheets, manual reports, and outdated tools to monitor kiosks. Technicians in the field had no mobile-friendly view to see machine issues. Business owners couldn’t compare kiosk performance across locations.
Key Problems Discovered
No centralized way to see which kiosks were online/offline
Cash levels, machine errors, and product usage were hidden behind manual checks
Pricing and product updates required tedious, error-prone workflows
User permission structures didn’t exist
Leadership lacked analytics and trend visibility
Design Constraints
Must support both deep operational data and quick-glance summaries
Must be fully responsive for field technicians
Must work with real-time machine data streams (React.js + APIs)
Must be simple enough for non-technical admin users
The goal was clear: Design a scalable, intuitive command center for the entire Cocoon ecosystem.
Key Features Designed
-
A centralized control center showing:
Active vs inactive kiosks
Cash in machines
Recent sales
Product trends
Critical alerts (offline machines, cash low, failed transactions)
Core benefit: Operators get immediate situational awareness without digging.
-
A full machine health module including:
Online/offline status
Error messages
Cash-in-machine
Uptime history
Maintenance timeline
Location and configuration details
Design priority: Give technicians and admin users the fastest possible path to root-cause issues.
-
A flexible system enabling:
Product catalog with images, pricing, SKUs
Assigning products to specific kiosks or locations
Availability toggles
Batch updates
Usage analytics
Goal: Allow teams to deploy pricing or catalog changes across dozens of kiosks in seconds.
-
A roles-based access system:
Create groups (Admin, Manager, Technician, Read-Only)
Assign permissions per module
Track activity logs
Outcome: Secure access that scales with organizational complexity.
-
Custom reporting tools with:
Sales trends over time
Machine uptime/downtime
Product performance
Cash collection history
Export capabilities
Guiding idea: Make every operational decision data-driven.
Final Summary
The Cocoon Web Admin Dashboard was designed to be a powerful, intuitive command center for the entire kiosk ecosystem. By grounding the design in user research, mapping workflows to real-world operational needs, and building a scalable design system, the dashboard became a critical tool for business owners, admins, and technicians alike.
It represents the intersection of data clarity, operational control, and high-performance UX/UI, wrapped in a responsive, modern enterprise interface.