SWIRLZY — Crafting Digital Flavor.

In a crowded market of generic food templates, Swirlzy seeks to reclaim the "Joy of Baking." This project is an exploration of how high-energy colors and non-traditional layouts can increase user appetite and engagement. To build a landing page that feels as "fresh" as a morning pastry. We moved away from standard vertical scrolling to a Bento-Grid architecture that treats every product as a hero.

Year

2024

Focus

UI/UX Design

Reading

1 min· 4 sections

Published

Web

Case Study Report

October 22, 2026

SWIRLZY — Crafting Digital Flavor.

In a crowded market of generic food templates, Swirlzy seeks to reclaim the "Joy of Baking." This project is an exploration of how high-energy colors and non-traditional layouts can increase user appetite and engagement. To build a landing page that feels as "fresh" as a morning pastry. We moved away from standard vertical scrolling to a Bento-Grid architecture that treats every product as a hero.

UI/UX DesignInteraction DesignFront-end Development

The Narrative Structure

This section establishes the "Why" with a premium, editorial feel.

The Hook

In a crowded market of generic food templates, Swirlzy seeks to reclaim the "Joy of Baking." This project is an exploration of how high-energy colors and non-traditional layouts can increase user appetite and engagement.

The Mission

To build a landing page that feels as "fresh" as a morning pastry. We moved away from standard vertical scrolling to a Bento-Grid architecture that treats every product as a hero.

Roles

UI/UX Design / Interaction Design / Front-end Development.

Color Theory

Focus on the "Spatial Design" and "Visual Weight."

Honey Gold #F5C362 Stimulates appetite and warmth.

Olive Green #4A5D4E Grounding the brand in "Organic" and "Natural" origins.

Sky Blue #99C5E8 Creating a "Fresh/Cool" contrast for the baking school section.

Design Breakdown

The Bento Philosophy: By using a tiled layout, we eliminate "scroll fatigue." The user’s eye naturally moves from the Brand Message (Center) to Secondary Services (Right) to Immediate Actions (Bottom). Depth & Realism: The 3D cookie assets "break" the container borders. This intentional overlap creates a tactile feel, making the interface feel less like a screen and more like a physical menu.

The Development Perspective

This is where you demonstrate your programming background.

Responsive Grid Logic

Implementing a complex bento layout requires a "Mobile-First" CSS Grid approach.

Technical Detail

Using grid-template-areas to seamlessly reshuffle tiles from a 12-column desktop view to a 1-column mobile stack.

Performance Optimization

Since the design relies on high-resolution transparent assets, we implemented Next.js Image Optimization and WebP formats to keep the LCP (Largest Contentful Paint) under 1.2s.

Micro-Interactions

Framer Motion: Used for the "Floating" cookie effect (hover-triggered Y-axis translation).

Spring Physics

Applied to the "Add to Cart" button to simulate a "squishy" physical button press.