Challenge
Lead Full-Stack Developer & UI/UX Designer
Boba Bliss is a premium digital storefront for an artisanal bubble tea brand, designed to translate the sensory delight of handcrafted boba into a minimalist, high-fidelity web experience. The challenge was to create a "digital refreshment" that balances rich visual textures with fluid, performant interactivity.
I architected and implemented the entire Next.js 15 application, including a dynamic menu filtering system, an immersive rewards dashboard, and a location discovery engine. I developed the "Liquid Joy" design system, utilizing glassmorphism and organic motion to evoke the creamy textures of the product.
Problem
““I want a bubble tea website that feels as fresh and artisanal as the drink itself, where I can easily explore flavors and track my rewards.””
User Needs
Modern tea enthusiasts seek more than just a drink; they want a curated experience that feels artisanal, transparent, and digitally seamless from discovery to loyalty.
Constraints
The platform needed to handle high-resolution visual assets without compromising on core web vitals, while providing a clear "in-progress" roadmap for upcoming features.
Internal Factors
Balancing the bold, high-contrast "Primary Brown" brand colors with soft, translucent glass textures to maintain a premium feel.
External Factors
The competitive bubble tea market demands a digital presence that feels distinct from generic, template-driven retail sites.
Solution
A high-performance Next.js 15 application featuring a custom notification engine, real-time product filtering, an immersive glassmorphism UI, and a dedicated rewards experience.
Deliverables
- 01Artisanal "Liquid Joy" Design System
- 02Interactive Real-Time Menu Catalog
- 03Premium Pearl Rewards Dashboard
- 04Location Discovery & Store Finder
- 05Integrated Feedback & Feature Notification Engine
Key Decisions
- 01Use Sora & Outfit typography for a modern, approachable feel
- 02Implement state-lifting for real-time menu and location filtering
- 03Utilize backdrop-blur and translucency for atmospheric depth
- 04Develop a global notification system for feature roadmapping
Process
Visual Identity & "Liquid Joy" Aesthetic Research
Dynamic Menu & Search Engine Architecture
Glassmorphism Design System Implementation
Immersive Rewards & Loyalty UI Development
Cross-Platform Performance Optimization
Impact
Delivered a visually stunning prototype that effectively communicates the brand philosophy of "Liquid Joy". The platform achieved high interactivity scores through optimized filtering and responsive design, setting a new digital standard for the artisanal tea space.