CASE / 04CLIENT PREVIEW / CONCEPT

ERISERSKINCARE STOREFRONT

A compact skincare range is framed as one precise ritual, with editorial confidence on the surface and approval boundaries underneath.

A noindex client-preview storefront that turns a compact Swiss skincare range into a clear catalogue and product system.

STATUS: CLIENT PREVIEW / CONCEPT
SECTOR: BEAUTY / E-COMMERCE
ROLE: DIGITAL DIRECTION + PROTOTYPE
DELIVERED: DIGITAL DIRECTION / UX/UI / NEXT.JS STOREFRONT

CLIENT PREVIEW / NOT A LIVE STORESELECTED SCREENS ↓

ERISER / CLIENT PREVIEW00 / DESKTOP

CLIENT PREVIEW / CONCEPTCLIENT PREVIEW / STOREFRONT HOMEPAGE

PROJECT NOTECLIENT PREVIEW / CONCEPT / COMMERCE NOT LAUNCHED / MEDIA RIGHTS REQUIRE CLIENT APPROVAL.

01 / CONTEXT & DECISIONSAUDIENCE / JOB / CONSTRAINT / RESPONSE

THE PROJECT IN CONTEXT

What the site had to solve.

ERISER arrived as a compact product universe with supplied packaging and an early commercial direction. The preview needed to show how the range could become a coherent digital store without pretending that commerce was already launched.

How can a small skincare range feel precise, premium and clinically clear while keeping home-care, professional and approval states separate?

AUDIENCE: People exploring the proposed home-care range plus a separate professional presentation. Validated audience research was not supplied.
PRIMARY JOB: Understand the range, distinguish daily-care and professional contexts, learn the proposed sequence and inspect each product without mistaking the preview for a live shop.
CORE CONSTRAINT: The project began with supplied packaging and an early commercial direction. Payments, prices, inventory, final claims, instructions and some media rights were not approved for public commerce.
BIMZI ROLE: DIGITAL DIRECTION + PROTOTYPE
PUBLICATION STATE: CLIENT PREVIEW / CONCEPT

DECISION PATHPRESSURE → DECISION → CHANGE

Design is the decisions between screens.

These are qualitative interface changes, not invented performance metrics.

01
PRESSURE
A small assortment can look thin or like a crowded shelf.
DECISION
Build a typed collection with daily-care and professional hierarchy.
CHANGE
The range reads as a deliberate system rather than a list of products.
02
PRESSURE
Product presentation alone does not explain use.
DECISION
Add an editorial method chapter and approval-aware product information.
CHANGE
Visitors can understand the proposed sequence while unapproved directions stay bounded.
03
PRESSURE
Prototype commerce can be mistaken for a live store.
DECISION
Use visible preview status, a presentation bag and fail-closed commerce.
CHANGE
The prototype demonstrates architecture without making a false operational promise.

02 / SYSTEM & EVIDENCEMEASURED CODE + OBSERVED OUTPUT + KNOWN GAPS

SWISS EDITORIAL RITUAL

A system, not a moodboard.

TYPE: Cormorant Garamond 400 normal/italic carries display; Inter Variable carries utility, product facts and controls.
COMPOSITION: Strict two-column product stages, fine hairlines, generous space and clean packshots keep status information outside the theatre layer.
SIGNATURE: The cobalt bottle and renewal line create one concentrated brand event inside an otherwise quiet clinical system.

RITUAL WHITE#F6F5F2
Editorial canvas and clinical product space
MEASURED / ERISER/globals.css
FORMULA BLACK#111214
Primary type, rules and product facts
MEASURED / ERISER/globals.css
COBALT CONCENTRATE#1D31BC
One concentrated ritual and packaging signal
MEASURED / ERISER/globals.css
PAPER DEEP#ECE9E3
Supporting editorial surface
MEASURED / ERISER/globals.css
MUTED#646467
Supporting product facts and status copy
MEASURED / ERISER/globals.css

This is BIMZI's evidence-led case analysis, not an official client brand guide. Source-code facts are marked MEASURED; independent audit, licensing and field-performance gaps remain explicit.

TYPE / 01

Typography

DISPLAYMEASURED
Cormorant Garamond 400 normal/italic via next/font/google
SOURCE / ERISER/fonts.ts
UTILITYMEASURED
Inter Variable for body, metadata, forms and controls
SOURCE / ERISER/fonts.ts
DISPLAY SCALEMEASURED
H1 3.5 to 7.75rem / H2 3 to 6.3rem / −0.045em tracking
SOURCE / ERISER/globals.css

LAYOUT / 02

Grid & spacing

SPACINGMEASURED
Page pad 1.25 to 4rem / section pad 4.5 to 9rem
SOURCE / ERISER/globals.css
COMPOSITIONMEASURED
0.95/1.05 hero split and two-column collection/product stages
SOURCE / ERISER/globals.css
BREAKPOINTSMEASURED
1120px / 900px / 640px plus a short-screen branch
SOURCE / ERISER/globals.css

UI / 03

Components

TRUST BOUNDARYMEASURED
Commerce-status banner and explicit preview state
SOURCE / ERISER/components
DISCOVERYMEASURED
Collection filters, cards and approval-aware product routes
SOURCE / ERISER/components
PRODUCTMEASURED
Keyboard tab-pattern gallery and local presentation bag
SOURCE / ERISER/components

REFLOW / 04

Responsive

≤1120PXMEASURED
Desktop navigation becomes a mobile menu
SOURCE / ERISER/globals.css
≤900PXMEASURED
Major editorial and commerce grids collapse
SOURCE / ERISER/globals.css
≤640PXMEASURED
Filters and product detail become single-column; only en-AE is published
SOURCE / ERISER/globals.css

BUILD / 05

Implementation

STACKMEASURED
Next.js 16.3 / React 19.2 / TypeScript 6
SOURCE / ERISER/package.json
COMMERCEMEASURED
Local bag plus a fail-closed Shopify adapter with exact host validation
SOURCE / ERISER/commerce
RELEASE STATEMEASURED
Preview is noindex and checkout-disabled
SOURCE / ERISER/config

GATES / 06

Quality status

ACCESSIBILITY / CONDITIONALMEASURED
Skip link, focus-visible, pressed filters, keyboard gallery and reduced motion exist
SOURCE / ERISER/source
PERFORMANCE / CONDITIONALMEASURED
Next Image sizing and static routes are measured
SOURCE / ERISER/source
FIELD COMMERCE PERFORMANCENOT VERIFIED
Core Web Vitals and checkout latency
SOURCE / BIMZI case audit
RELEASE GAPSUNKNOWN
Final claims, price, inventory, rights, RU/AR and live checkout
SOURCE / BIMZI case audit

03 / EXPERIENCE ROUTEONE USEFUL STEP AT A TIME

The path through the product.

The visual system supports this route; it does not replace it.

01See preview and commerce status
02Explore the collection or method
03Separate daily-care and professional contexts
04Inspect the gallery and approved facts
05Use the presentation bag without payment

ERISER catalogue page with collection filters and a two-column skincare product grid. — ERISER / CLIENT PREVIEW01 / DESKTOP

ERISER method page presenting the two-step home-care concept in an editorial layout. — ERISER / CLIENT PREVIEW02 / DESKTOP

ERISER mobile PDRN Cream page with product gallery, thumbnails and approval-aware product information. — ERISER / CLIENT PREVIEW03 / MOBILE

CLIENT PREVIEW / NOT A LIVE STOREPublic commerce, payments and final approved content are not presented as live.

05 / RESPONSIBILITYCONTRIBUTION / OUTCOME / UNKNOWNS

What BIMZI made, and what is not claimed.

The result is an English client preview with dedicated product routes and a commerce-ready architecture, not a live shop. Payments, final claims, pricing, inventory and public launch remain pending approval.

Contribution

Digital direction
Catalogue and content model
Responsive UX/UI
Next.js storefront prototype
Approval-aware commerce and SEO foundations

Known unknowns

Commerce, payments and public launch are not live.
Final claims, directions, pricing, inventory and availability require approval.
Media rights require client confirmation.
No business-impact data or validated user research was supplied.

CASE VALUE / 04BIMZI / PORTFOLIO EVIDENCE

06 / WHY THIS CASE MATTERS

The case demonstrates that premium art direction and trust can reinforce each other when the interface is explicit about what is proposed, approved and not yet live.