←

All work

Concept 02

Skincare

Framer

Self-initiated

Ondo.

Kind to the scroll.

Brief

Self-initiated concept · skincare

Written by RELAY

Brand

Ondo

Fictional plant-based skincare brand · Portland

Scope

E-commerce design · Framer build

Live 3D bottle · Bag drawer · CMS

Timeline

2 weeks

Sprint plan

Team

1 lead · 1 designer · 1 Framer dev

The same line-up an agency would get

Team

1 lead · 1 designer · 1 Framer dev

The same line-up an agency would get

Fig. I — Showcase reel, 1080p60

Sound off

01 — The brief

A calm brand that needs a store to match.

Ondo is a fictional skincare brand we invented as a self-initiated concept: plant oils and balms in refillable glass, topped up from paper sachets. Its range, three products bought once or on subscription, needs a store built around calm. We set ourselves the brief a beauty agency would hand us.

Five pages: Home, Shop, How it works, a product template and Checkout. Three products, a 3D bottle that turns through the routine, eighteen questions and a bag that follows you from page to page. On a real relay, the agency keeps brand, photography and the client relationship; RELAY designs and builds in Framer, under the agency's name.

Agency keeps

Brand identity · Photography · Product copy · Client relationship · Credit

RELAY takes

UX · UI · E-commerce system · Framer build · 3D bottle component · Bag drawer · Motion · CMS · QA

02 — The challenge

A shop that never raises its voice.

Spa-like calm, store-grade clarity

Skincare sites default to sale banners, pop-ups and countdowns. Our brief for Ondo asked for the opposite: cream and warm browns, headlines never bold, the ✱ for ornament, with the price and Add to cart on every card.

One bag, every page

Add to cart on a card, Add to bag on a product page, a count in the nav. One bag had to keep all three in step, carry one-time and subscription options, survive a page change and close on Escape or a tap outside.

Make the routine tangible

A product photo can't show a routine, so we built a live three.js component inside Framer: a pinned scene where a credited 3D bottle model tilts and turns as Cleanse, Apply and Seal cross-fade beside it.

03 — How we built it

The sprint, day by day.

Brief, audit, sitemap

On a relay, day one also means agency-domain accounts and their Slack. Here: catalogue audit (3 products, 19 photos, 18 questions) and a five-page sitemap, locked by end of day.

D2–3

E-commerce system

Product card, buy box and bag; DM Mono labels and the ✱ glyph in six colours; a cream, greige and brown palette; a motion language of line-by-line reveals and marquee bands on a Ticker.

D4–7

Pages and build in parallel

Home, Shop, How it works, the product template (×3) and Checkout designed and built in Framer side by side, at four breakpoints. On a relay, the agency's CD presents at the mid-sprint review.

D8–9

3D bottle and shared bag

Custom Framer code components: a three.js scene that tilts and turns a credited third-party bottle model through three steps, and one bag store shared by cards, buy box and nav badge.

D10

CMS, checkout, QA, launch

Products, FAQ and sample reviews as CMS collections; a checkout design reference that submits nothing; Tablet, Phone and reduced-motion passes. Published to framer.app as a live concept.

04 — The work

The concept site. Scroll it.

Open in a new tab

↗

ondo — self-initiated concept, built in Framer

Live site
Please wait while the site loads
thankful-embeds-768785.framer.app

Pages — full-page captures of the concept site

Every page shown end to end · click to open it

Swipe a tile to see the whole page · tap to open it

· Home

Open ↗

· Home

Open ↗

· Home

Open ↗

· Home

Open ↗

05 — In numbers

For the brand. For an agency.

Brand

products on one page template, 18 FAQ items — all CMS-editable

Brand

live three.js bottle — the credited 3D model, turning as you scroll

Agency

working days, brief to handover — the sprint an agency would book

Agency

extra hires an agency needs — and zero RELAY credit on the site

06 — White-label notes

How we’d stay invisible.

The part agency owners ask about first. Here is exactly how a relay hides the seams.

Agency-domain identities

On a relay, every RELAY designer works from an @agency email, Slack account and Figma seat. The Framer workspace sits on the agency’s plan; calendar invites, comments and version history all read as the agency.

Reviews run through the agency

We prepare the Thursday decks; the agency’s creative director presents them. If we join calls, we’re introduced as the agency’s web team — which, for the length of the relay, we are.

Their templates, their tone

Proposals, weekly reports, the CMS guide and the handover doc use the agency’s templates and voice. Nothing in the client’s inbox looks imported.

NDA before the brief

Mutual NDA signed before any files move. RELAY never contacts, pitches or references an agency’s clients. Ondo is our own concept for a fictional skincare brand, so it’s ours to show.

Clean exit, IP assigned

All IP is assigned to the agency on final payment; the site moves to the client’s own Framer workspace. Two-week wind-down for questions, then we remove ourselves from every seat.

07 — Deliverables & handover

What an agency would walk away with.

Design

Figma file in the agency's team · 5 page templates · Component library · HUD hairlines and the ✱ glyph · Motion specs

Build

Framer site, ready to move to the client's workspace · CMS: Products, FAQ, Reviews · 3D bottle, pinned-scene and bag code components · FAQ and footer-reveal overrides · Checkout design reference

Documentation

Product and FAQ CMS guide for the brand team · Loom walkthroughs · Accessibility and QA log · Launch checklist — all in the agency's templates

Rights

Full IP assigned to the agency · No RELAY credit anywhere on the site · Ondo is a fictional skincare brand, so this concept is ours to show

Next concept — 03

Maren — restaurant →

Web design · Framer build · Menu CMS — self-initiated concept