Quào Tea

Quào Tea is a full from-scratch project that connects brand identity, mascot design, menu content, ordering UX, responsive UI and web development into one customer-facing experience.

The goal was to make the brand feel cute, memorable and easy to order from, while keeping the website practical enough for real beverage sales.

• brand concept, mascot and visual identity
• menu/content structure for drinks, sizes and toppings
• mobile-first ordering flow with cart and QR payment direction
• responsive web interface and CMS-ready project structure

The project started by defining what Quào Tea needed to communicate and what customers needed to do. The brand had to feel friendly and playful, but the digital experience still needed to be direct, readable and easy to complete on a phone.

The foundation focused on three questions: what should the brand feel like, how should the menu be understood, and what actions should customers be able to complete without friction?

• define a cute, bright and approachable brand personality
• structure the offer around drinks, toppings, size options and pickup/delivery needs
• prioritize mobile ordering because most customers interact from a phone

The menu needed a structure that works both as a designed visual menu and as a digital ordering system. I organized the content around clear categories, product names, sizes, prices, toppings and simple ordering copy.

This makes the brand easier to manage because new drinks or seasonal products can be added without changing the whole design system.

• category groups such as milk tea, matcha, soda, tea, coffee, cacao and toppings
• product card content with name, category, image, size and price
• clear support for toppings and add-on pricing
• short Vietnamese copy that feels friendly but still functional

The UI system translates the mascot-led brand into reusable web components. Cards, buttons, category pills, cart panels, checkout controls and bottom navigation all share the same rounded visual language.

The interface uses large touch targets, clear hierarchy and friendly contrast so customers can move through the ordering flow without confusion.

• rounded product cards and category tabs
• primary CTA buttons for ordering and checkout
• cart item components with quantity and total state
• delivery/pickup controls and time selection panels
• mobile bottom navigation for the most important actions

The development direction focused on making the design usable, responsive and manageable. The website needed to support product browsing, cart behavior, checkout details and a QR payment direction while staying lightweight enough for a small business.

The structure is prepared so content can be updated later without rebuilding every screen.

• responsive front-end layout for desktop and mobile
• menu/product components that can scale with new items
• cart and checkout interface logic
• QR payment-oriented order flow
• CMS-ready structure for future updates and support

The launch layer covers the practical checks that make the project usable beyond presentation: mobile responsiveness, content clarity, CTA visibility, order flow review and future update planning.

Because Quào Tea is a small business concept, the site also needs to be easy to maintain after go-live. The system is built so future support can focus on content updates, new menu items, seasonal campaigns and UX improvements.

• mobile layout review and touch target checks
• content and product data review
• CTA and checkout flow polish
• basic performance and cache readiness
• future support path for new drinks and campaigns