Skip to content
All work

ConceptSkincare shopMalé, Maldives2026

VERUM

An online skincare shop with a 30-second quiz that builds your routine.

Visit live site (opens in a new tab)

A concept site, live and working.

The problem

Skincare shoppers can't tell which products suit their skin or whether they're genuine, so they hesitate to buy online.

What we added

A 30-second skin quiz that builds a priced morning and evening routine, explains every pick and adds the lot to the cart with the bundle discount already applied.

01Brief

VERUM is a Malé retailer of Korean and Western skincare, with the line "Formula first." It sells online, so the site has to do a good shop assistant's job: help people who don't know where to start, show that every product is genuine and what is really in it, and make buying a full routine easy.

02Approach

  • Layout

    A clean, lab-like catalogue on paper white with thin rules. Every product card carries a code, its size and routine step, and product pages give the formula breakdown as much room as the photo.

  • Typography

    Geist for headlines and reading, with Geist Mono for product codes, prices, labels and formula data, so the numbers read like a spec sheet.

  • Colour

    Paper, bone and ink, with sage tints and one deep green for every action. Calm enough that the information leads.

  • Interaction

    A three-tap quiz that ranks a routine and shows its reasons, a routine builder with a live savings bar and layering warnings, side-by-side compare, and quick view and add to cart from any product card.

03Result

A full shop of 50 products from 21 brands, built for online sales. Shoppers can take the quiz, build and adjust an AM and PM routine with bundle savings, compare products, look up any ingredient, and check out on one page with delivery across Malé or pickup.

  • 01Home, Shop, product, brand, ingredient, Philosophy and Delivery pages
  • 0230-second skin quiz: three questions, a ranked AM and PM routine with reasons and swaps
  • 03Routine builder with layering warnings, a shareable link and bundle savings of up to 15%
  • 04Formula breakdowns that show published ingredient strengths, and say Not published where a brand gives none
  • 05Compare up to three products side by side, including price per 10 ml
  • 06Ingredient explorer for 20 ingredients, with a pair checker
  • 07Cart and one-page checkout with delivery zones, pickup, and card or BML transfer

Note: VERUM is a fictional shop. The skincare brands shown are real and belong to their owners; none of them is a client or partner of Nuit Works. Checkout is a prototype: no order is placed and no payment is taken.

(04)Design system

The pieces it’s made from.

Type

Geist SemiBold 600: the letters A to Z, a to z and 0 to 9
GeistDisplay, SemiBold 600. Headlines and product names.
Geist Mono Regular 400: the letters A to Z, a to z and 0 to 9
Geist MonoData, Regular 400. Product codes, prices, labels and formula data.

Colour

  • #FAFAF8

    Paper

    Background

  • #141414

    Ink

    Text

  • #1D2A1F

    Deep green

    Buttons and actions

  • #566754

    Sage

    Savings and accents

  • #F1F1EC

    Bone

    Surfaces

Components

The VERUM navigation bar
Navigation
A button from the VERUM site
Button
A product card from the VERUM site
Product card

(05)Pages

Key pages

Drag

The VERUM Home page
01Home
The VERUM Shop page
02Shop
The VERUM Skin quiz page
03Skin quiz
The VERUM Routine builder page
04Routine builder

Next project

Nocturne

ConceptCoffee barView case study