Deskmos

E-commerce

The desk-setup studio: pick your universe, compose in real-scale 3D, receive it all in one order.

View the sitenova-desk-amber.vercel.app
Role
Product, 3D & full-stack
Category
E-commerce
Core stack
Next.js · Three.js / R3F · TypeScript
01The context

Putting a desk together today means ten sites, ten deliveries, and finding out on arrival that nothing matches. Product photos are all shot in different worlds, dimensions are in small print, and nobody tells you whether the 27-inch monitor fits the 120 cm top. Doubt abandons the cart. Or worse: it buys, then returns.

02Problem, solution, outcome
The problem

No way to picture and assemble your setup before buying, or to be sure the parts fit together. And everything is bought piecemeal.

The solution

Three complete universes (Lumen, Volt, Mochi), each with its packs. A real-scale 3D Studio where every part swaps live, and a single order at the end, shipped from Europe.

What it changes

You compose your setup at real scale before buying, the tool checks the pieces fit together, and it all ships as one order instead of five baskets on five sites.

03The product, screen by screen
Live site captures
Open the site
nova-desk-amber.vercel.app
Home : A three-word promise (choose, compose, receive) and the three universes shown as three complete worlds, not three colour filters.
01 / 08 · Home

A three-word promise (choose, compose, receive) and the three universes shown as three complete worlds, not three colour filters.

Screenshots of the production site, taken as is. Prices and lead times shown are the site's at capture time.

04The calls I made
01

Universes, not a catalogue

Minimal, Gaming or Kawaii: each universe is a palette, a typeface and a set of parts that belong together. The visitor picks a mood before picking a product. That's what removes the doubt.

02

Faithful 3D over pretty 3D

A 140 cm desk measures 140 cm, a 27" monitor measures 61 cm. Shapes are simplified, dimensions are real: the Studio is there to show footprint and proportions, not to replace a photo.

03

The system as navigation

Seven orbits around a sun: desk, surface, screen, keyboard, storage, details, light. You move orbit by orbit, the total updates, and nothing is forced: you can keep your own desk.

04

Say where the parts come from

No invented reviews, no countdown timers. One page states what ships from Europe, what comes from a partner, and how that partner is paid. Trust is built by writing it down.

05The design board
// palette
#F7B54A
#7C86B0
#0A0A0C
#F5F5F7
// type scale
AaDisplay · 600
AaHeading · 550
AaBody · 400
// visual calls
  • 01An ink background (#0F111A) and one warm colour, the “nova” (#F7B54A): it's the sun of the system and only shows where you act.
  • 02Three universes, three complete palettes: Lumen cream and teal, Volt black and magenta, Mochi pink and lavender. Same page structure, different world.
  • 03Unbounded for headlines, Instrument Sans for body, DM Mono for anything measured: prices, dimensions, lead times. You read a number before you read a word.
  • 04The orbit is the brand's motif: in the logo, around the scenes, and as the Studio's navigation. One metaphor, taken all the way.
06Why this stack
Three.js / R3F
React Three Fiber drives the 3D scene with the same React components as the rest of the UI. Studio and cart share a single state.
Next.js
Universe and pack pages must be indexable and fast; the 3D loads on top, never instead.
TypeScript
Dimensions, compatibilities, prices: data that contradicts itself fast if nothing holds it. Every part is typed, every orbit too.
Vercel
One URL per branch, one deploy per commit. The Studio gets tested on a real phone ten minutes after the change.
Next.jsThree.js / R3FTypeScriptVercel

Something similar in mind?

Describe your situation. I'll tell you what's realistic,
in what order, and what I'd do differently.

contact@amauryandrade.com