THE SMART LOLLIPOP — How a startup tells its product

A landing page for The Smart Lollipop, a children’s health device · Product landing · Startup · 3D + GSAP

Client

The Smart Lollipop

Role

Web development · 3D · GSAP

Timeline

Client project

Stack

Frontend development, 3D graphics, GSAP, Custom templates, UX/UI

The Smart Lollipop is a startup with a product unlike anything before it — and therefore with no inherited visual language to draw on. The project was developed in close collaboration with Stimulo Design Agency, combining creativity and technology: helping a startup define how to present its product and communicate its value is always a stimulating challenge.

The problem: A startup without a language of its own yet

Before building the website something earlier had to be solved: how this product presents what it does and why it matters. With no direct category references, every visual and narrative decision defines the positioning — and a startup can’t afford a website that ages in six months.

scroll → emotional narrative: Defining the message → Script by section → Animated 3D graphics → GSAP · scroll sync → Custom templates → Content management

Solution: 3D narrative with the tempo in the user’s hands

Animated 3D graphics were integrated to create narratives synced with the browser scroll: the user sets the pace of the story and builds empathy with the product. In parallel, a system of custom templates lets the team update content easily without breaking the consistency of the design.

Product decisions

• my role: Communication · UX/UI · Frontend development · 3D and GSAP animation
• context: A project in collaboration with Stimulo Design Agency for an early-stage startup. Public site — thesmartlollipop.com
• key design decision: 3D narratives synced with the browser scroll. The user controls the pace of the story, which makes it easier to connect emotionally with the product.
• key product decision: Custom templates to manage content flexibly without compromising the visual and structural integrity of the design.

Results

• 3D — animated graphics synced with the scroll
• ∞ — content updates without touching the design
• 1 — visual language defined from scratch with the startup

"Helping a startup define how it presents its product and communicates its value is always a stimulating challenge."

What was learned

1. In a startup, the website is designed after the message. Starting with the interface without having defined what is being communicated produces a pretty site that positions nothing.
2. Custom templates are the balance between freedom and consistency. A completely free editor degrades the design within weeks; a locked one forces a call to the developer for every change. Templates confine freedom to the space where it breaks nothing.
3. Empathy with the product is built with rhythm, not adjectives. Syncing the animation with the scroll lets the user discover at their own speed — and what is discovered convinces more than what is asserted.