Inspired by my love for bubble tea culture and early 2000s internet nostalgia, this project reimagines the drink customization experience as a playful, interactive web app. I wanted to capture the fun of in-person ordering and the charm of vintage dress-up games while showcasing my design + engineering skills in development, wireframing, prototyping, and usability testing.
A mobile-first, gamified bubble tea ordering app that transforms drink customization into an engaging, repeatable experience. The project reimagines the drink customization experience as a playful, interactive web app inspired by early 2000s internet nostalgia and vintage dress-up games.
I designed and developed this interactive web app from concept to deployment, handling the complete user experience design, prototyping in Figma, front-end development with HTML/CSS/JavaScript, and deployment via Netlify.
Designed a gamified, repeatable interaction inspired by early 2000s dress-up games, paired with a calm, comforting UI using a beige, milk-tea palette to encourage endless customization and reordering.
Mapped out user flow: Select tea ➜ Add toppings ➜ Confirm milk ➜ Review ➜ Checkout, prioritizing clarity for mobile users. Designed conditional actions and streamlined task flows to ensure an intuitive ordering experience.
Designed modular UI assets in Figma, including customizable tea, ice, and toppings layers optimized for seamless stacking and consistent dimensions. Implemented a cohesive color palette inspired by real milk tea.
Developed with HTML, CSS, and JS, optimized for mobile browsers under 800px width. Added interactive features including dynamic receipts with random order numbers, live timestamps, price updates, and playful animations.
Implemented interactive elements including a milk selection popup, higher contrast states for active items (WCAG compliant), and randomized success messages for a playful closure. Added reset functionality to ensure a fresh start with every new order.
