Project Overview & Context

Lalala Café is a next-generation coffeehouse and creative cultural brand pioneering the fusion of specialty beverage craft, modern aesthetic spaces, and seamless digital experiences across Can Tho and Ho Chi Minh City, Vietnam. Founded under the ethos *"Drink Deep, Think Bold"*, Lalala defines itself not merely as a café, but as an "Inspiration Hub" — a vibrant station where flavors are distilled from genuine emotions, sparking creative breakthroughs and empowering a community of ambitious creators.

To bring its brand vision to life and support an expanding ecosystem (including a mobile loyalty application, a dedicated workshop and event rental space, bold lifestyle merchandise collections, and community events), Lalala required an engaging, high-performance digital portal: playful, conveying infectious positivity, driving event space bookings, and delivering sub-second load times on all mobile devices.

The Problem Space

Brand & Business Challenges

• Positioning a Tech-Forward Creative F&B Brand: Distinct from conventional coffee chains, Lalala combines specialty beverages with technological convenience and creative workshop spaces. The web platform needed to express its "stylish, bold, yet approachable" brand personality through a vibrant and energetic visual language.
• Integrating Multi-Tier Conversion Funnels: Beyond showcasing signature beverage offerings, the platform needed to seamlessly guide visitors toward two primary business objectives: downloading the mobile app (App Loyalty & Ordering Funnel) and requesting venue rental consultations for workshop/events (W-S Booking Funnel) accommodating 40–60 attendees.
• Empowering Agile Content Operations for Marketing: The marketing team regularly rolls out seasonal drink menus, apparel merchandise (L-Style), and community stories (Think Bold Wall). The system required a flexible headless slice architecture to allow rapid page updates without developer intervention.

Expected User Experience

• Gen Z creators, freelancers, and event organizers need to inspect space capabilities, technical equipment (large displays, projectors, premium audio), and submit inquiry forms within seconds on mobile screens.
• An uplifting, interactive experience featuring delightful animations (such as the interactive mascot drinking interaction and multi-layer fluid waves) running at 60 FPS without draining device battery or cellular data.

Project Goals & Standards

• Deliver a Playful & Interactive Brand Portal: Expressive color palette (sunny yellow, energetic orange, botanical green, and high-contrast black), dynamic curved typography, and fluid SVG wave transitions.
• Achieve Core Web Vitals Excellence: Attain Google Lighthouse scores of 98–100, sub-0.8s Largest Contentful Paint (LCP), and zero Cumulative Layout Shift (CLS 0.00) despite intricate SVG vectors and animations.
• Ensure 60 FPS Responsive Motion: Hardware-accelerated mascot interactions and 5-layer animated SVG waves engineered to run smoothly on low-to-mid-tier smartphones.
• Streamline Workshop Booking Inquiries: Friction-free inquiry workflow with automatic venue routing (Can Tho / HCMC) and real-time validation.
• Modular Component-Driven Architecture: Headless CMS integration powered by Component Slices for modular landing page composition.

Team & Responsibilities

Team Composition

• Product Owner / Brand Strategist: Brand narrative, core messaging, and conversion funnel strategy.
• UI/UX Designer: Mascot character creation, vector illustration assets, visual slices, and Figma design system.
• Lead Frontend Engineer (Me): End-to-end frontend architecture, SVG animation pipeline, Headless CMS integration, media optimization, and Core Web Vitals performance.
• Full-stack / CMS Engineer: CMS schema modeling, webhooks, and Vercel edge deployment infrastructure.

My Role & Key Responsibilities

• Frontend Architecture: Initialized Next.js App Router with TypeScript and Tailwind CSS, standardizing custom design tokens and fluid typography scales.
• Interactive SVG & Animation Engineering: Built the interactive mascot SVG component, multi-layer wave keyframe transitions, and micro-interactions utilizing CSS transforms and Framer Motion.
• Headless Slice Machine Integration: Developed reusable slice components (Headline Graphic, Image Text CTA, App Promotion, Workshop Space Cards, Merch Carousel).
• Performance & Asset Pipeline: Optimized SVG rendering trees, configured automated WebP/AVIF media delivery, preloaded critical web fonts, and eradicated layout thrashing.

Key Features & Highlights

Interactive Mascot Hero & Multi-Layer Wave System

An engaging landing hero featuring the interactive cup mascot ("Click to let baby La drink!") paired with 5 desynchronized SVG wave layers (animate-firstWave through animate-fifthWave), creating immediate brand delight and playful engagement.

Workshop & Event Space Booking Hub (W-S Portal)

A dedicated portal for organizers hosting workshops, talks, and creative gatherings in Can Tho and HCMC, detailing capacity specs (40–60 seats), audiovisual equipment (large screens, projectors, modern sound system), and quick booking inquiries.

Mobile App & Loyalty Ecosystem Showcase

A clear promotional section highlighting the 3 core pillars of the Lalala mobile app: Order Ahead (skip lines), Exclusive In-App Deals, and Reward Points redemption.

Brand Culture & Bold Merchandise Showcase (L-Style)

Visual presentation of brand lifestyle merchandise (Bold tees, custom Bandanas) alongside stories celebrating the team culture and creative barista talents.

Community Hub & Think Bold Wall

A curated space sharing inspiring community stories, creative collaborations, and social initiatives reinforcing the brand motto *"Stay Lalala, Stay Inspired"*.

Technical Architecture & Stack

• Framework: Next.js 14/15 App Router with React Server Components and Turbopack.
• Headless CMS: Prismic Headless CMS utilizing Component-Driven Slices.
• Styling: Tailwind CSS with custom design tokens, fluid typography, and SVG animation utilities.
• Animation Engine: Pure CSS GPU-accelerated keyframe transitions, SVG clip-paths, and Framer Motion.
• Media Optimization: Next.js Image Optimization Pipeline, automated WebP/AVIF transformation, and Blurhash placeholders.
• Deployment: Vercel Global Edge Network delivering worldwide TTFB < 45ms.

Technical Challenges & Solutions

Optimizing High-Density SVG Vectors & Multi-Layer Wave Animations

• Problem: The hero screen combined intricate vector artwork with 5 constantly animating SVG wave layers, resulting in noticeable frame drops (< 40 FPS on mid-range mobile devices) and elevated CPU/battery usage.
• Why It Was Difficult: Brand graphics relied on high-precision Bézier curves, complex nested clip-path definitions, and SVG drop-shadow filters that had to remain tack-sharp on high-DPI displays.
• Investigation: Profiling with Chrome DevTools Performance panel showed that animating SVG attributes directly while rendering SVG filters (feGaussianBlur, feColorMatrix) forced continuous CPU rasterization and layout recalculations on the Main Thread.
• Solution Approach:

1. Isolated static graphics from dynamic vector layers into distinct rendering planes.
2. Replaced path-level modifications with hardware-accelerated CSS transform: translate3d(x, y, 0), offloading all rendering to the GPU Compositor Layer.
3. Applied contain: strict, will-change: transform, and pointer-events: none to the wave wrapper to eliminate hit-testing calculation overhead during scrolling.
4. Conditionally bypassed heavy SVG filters on mobile screen sizes.

• Implementation: Staggered the animation cycle durations across all 5 wave layers (@keyframes firstWave ... fifthWave) to create an organic fluid rhythm without compounding CPU spikes.
• Result: Sustained a locked 60 FPS on all tested mobile devices; reduced browser CPU consumption by over 65%.

Eliminating Layout Shifts in Dynamic Headless Slices (CLS 0.00)

• Problem: Pages are composed of asynchronous Prismic slices varying in height and content density. Dynamic slice hydration caused visible layout popping (CLS > 0.15), harming user experience and SEO rankings.
• Why It Was Difficult: Slices can be reordered and customized freely by the marketing team in the CMS, making hardcoded container heights impossible.
• Investigation: Web Vitals tracing identified image banners and carousels lacking preset aspect ratio wrappers, pushing DOM elements downward once images finished downloading.
• Solution Approach:

1. Built a Server-Side Component Registry mapping Prismic slice types directly to React Server Components for instantaneous SSR delivery.
2. Enforced strict CSS aspect-ratio containers on all media elements paired with lightweight Blurhash placeholders.
3. Leveraged CSS content-visibility: auto with contain-intrinsic-size on below-the-fold slices so the browser defers layout calculation until scrolled into view.

• Result: Reduced Cumulative Layout Shift (CLS) to an absolute 0.00; improved First Contentful Paint (FCP) to 0.6s and LCP to 0.8s.

Core Engineering Decisions

Prismic Slice Machine with React Server Components

• Context: Enable marketing stakeholders to compose campaigns autonomously without frontend code changes.
• Choice: Component-driven slice architecture on Prismic coupled with Next.js Server Components.
• Trade-off & Impact: Required strict upfront component API design; reduced landing page turnaround time by 4x while maintaining a lean codebase.

Pure CSS Keyframes over Heavy JS Animation Libraries

• Context: Animate fluid wave dynamics while maintaining ultra-fast mobile load times.
• Choice: Native CSS GPU transitions instead of bundling heavy runtime engines like GSAP or Three.js.
• Impact: Kept the First Load JS bundle under 85KB, ensuring instant interaction even on throttled 3G/4G networks.

Results & Impact

Business & Brand Outcomes

• +50% Workshop Booking Inquiries: Intuitive venue specs and streamlined contact funnels boosted online space rental requests.
• Accelerated App Installs: The dedicated loyalty section became a high-performing user acquisition channel for the mobile app.
• Distinct Brand Identity: Successfully positioned Lalala as a prominent tech-forward creative coffee landmark in Vietnam.

Engineering Metrics

• Google Lighthouse Performance: 98/100
• Accessibility: 100/100
• Best Practices: 100/100
• SEO: 100/100
• Largest Contentful Paint (LCP): 0.8s
• Cumulative Layout Shift (CLS): 0.00
• First Contentful Paint (FCP): 0.6s
• Global Edge TTFB: 45ms

Retrospective & Next Steps

• Key Takeaways: In interactive brand experiences, aesthetic energy and technical performance must reinforce each other. Mastering SVG composition and GPU acceleration allows rich visual storytelling without sacrificing sub-second page performance.
• Future Roadmap: Planning a 360-degree virtual space tour for workshop areas and online pre-order capabilities integrated directly into the web interface.