Quào Tea

The first layer defined the direction for the whole Quào Tea experience before any interface was designed. The project needed to feel cute and memorable, but still work as a practical ordering tool for real customers.

I treated the foundations as three inputs that move in parallel.

• Brand Identity: logo, mascot, color palette, tone and overall visual vibe.
• Content Strategy: menu narrative, product grouping, promotional story and page structure.
• User Research: customer flow, ordering behavior, delivery/pickup needs and mobile-first personas.

This made the project more focused. The mascot was not only decoration, the content was not only text, and the interface was not only a layout. All three parts shaped the final customer journey.

The design system gave Quào Tea a consistent language across logo usage, menu cards, order buttons, product categories, cart items and checkout states.

The system was organized from small decisions to reusable interface blocks.

• Global Tokens: typography, color, spacing, radius, shadows and brand states.
• Atomic Components: buttons, inputs, icons, badges, category pills and quantity controls.
• Molecules & Organisms: product cards, cart panels, navigation, lists, checkout panels and mobile bottom navigation.

Buttons and cards were placed inside the component library rather than treated as random page elements. This keeps the UI scalable when more drinks, toppings or campaigns are added later.

The prototype stage connected static design decisions to real interaction behavior. The ordering experience needed to feel clear, fast and comfortable on mobile.

• Category browsing for milk tea, matcha, soda, tea, coffee, cacao and toppings.
• Product cards with image, price, size and order action.
• Cart logic with quantity, add-ons, subtotal and order summary.
• Delivery/pickup selection with time and note fields.
• QR payment flow with the correct total amount.

The prototype helped validate the main UX question: can a customer complete an order from a phone without needing staff to explain the process?

The final optimization layer focused on the actions that matter most to the business: opening the menu, adding items to cart, choosing delivery or pickup, and completing payment.

The CTA flow was designed to keep the next step visible without making the interface feel heavy.

• Primary order buttons use strong contrast and rounded brand styling.
• Mobile bottom navigation keeps core actions close to the thumb.
• Cart panels keep quantity, total and payment state clear.
• Tracking points can measure menu views, add-to-cart actions, checkout starts and completed QR orders.

This makes the website not only a visual showcase, but a measurable ordering tool that can be improved over time.