FUNKY MATCHA | Vibrant Beverage

FUNKY MATCHA | Vibrant Beverage Website & Shopping Experience

A vibrant bilingual beverage website that combines purple disco branding, orange and lime contrasts, expressive typography and detailed campaign visuals with a clear shopping journey.

MY ROLE Visual direction, page structure, responsive web design, front-end development, campaign imagery, animation and the complete customer journey from flavour discovery to purchase confirmation.

BRAND AND PRODUCT EXPERIENCE A colourful introduction transforms blurred colours into a dynamic splash reveal. A sunny close-up, oversized typography and an animated smiley establish the brand. The extended gallery combines six product campaigns, summer lifestyle moments and contrasting graphic panels.

Cherry Fever, Lemon Disco, Berry Afterparty, Strawberry Slide, Mango Hustle and Peach Groove have individual colour identities and matching fruit, ice and drink imagery. Large image dialogs offer previous/next navigation, keyboard controls and direct flavour selection.

VIDEO AND MOTION The shopping section pairs a looping lifestyle film with a GET FUNKY overlay and the flavour selector. Playback responds to visibility, pauses when the page is hidden and includes manual controls and an expanded viewing mode. The introduction is skippable; a motion-pause option and reduced-motion support provide a calmer alternative.

PERSONALISED MIX BUILDER Choose a 6-can or 12-can box, combine flavours and adjust quantities. An all-flavours action creates a balanced selection. Live item counts, progress, line prices and totals make each choice clear. Capacity rules prevent overfilling. The review step opens when the box is complete, while mix and language preferences are retained locally.

CHECKOUT JOURNEY A review dialog summarises the chosen flavours and prices. Delivery fields collect first and last name, email, street and house number, optional address details, postal code, city and country. Required-field and email validation guide completion. The final purchase confirmation shows a reference, items, total and delivery details. Personal delivery entries are not stored permanently in the browser.

RESPONSIVE AND BILINGUAL German and English interfaces preserve the mix across language changes. The gallery adapts from three desktop columns to two on smaller screens. On mobile, the player, selection and summary form a clear vertical journey. Native dialogs, focus states, descriptive image text and keyboard access support usability.

TECHNOLOGIES HTML5, CSS3, JavaScript, SVG animation, localStorage, IntersectionObserver, requestAnimationFrame, native dialogs/forms, local fonts and MP4 video.

CLIENT SETUP For commercial operation, the payment provider, server-side order handling, shipping rules and transactional emails are configured to client requirements and the agreed scope. Campaign visuals use AI-assisted image generation; the lifestyle film uses licensed stock footage.