Case study · Consumer hardware, e-commerce
Lumina
Brand identity and web storefront for a premium webcam that won Red Dot and iF design awards.
Lumina is a premium webcam sold through its own online store. The product already had its form. It needed a name that could carry it and a storefront as considered as the object.
We designed the wordmark, then carried it into a desktop store and a mobile web version, so the visitor meets the same calm, precise product from the logo to the reserve button.
Launch a new hardware brand online with a mark that works on light and dark, and pages that never compete with the product photography.
- 01Designed the wordmark, its grid and 2x clearspace
- 02Built the brand system in light and dark
- 03Designed the desktop storefront and reserve flow
- 04Designed buy-flow components and their states
- 05Adapted the store to mobile web as one scroll
- 06Added motion to the technology section
One brand, carried from the logo to the checkout.
Scope at a glanceCounts of delivered work, not performance results.
Brand identity
A name that holds on light and dark.
A wide, geometric wordmark with optical spacing set on a grid. It sits on charcoal and on white without changing weight.
Construction on the grid, then clearspace and minimum sizes.
Brand board: posters, Nightlight and the finish palette.
Storefront
Quiet pages around a precise object.
Light and dark sections alternate like the product's Day and Night modes. The page gives the photography room and keeps one blue action per screen.
Section tour, then one scroll from story to Reserve.
Mobile web as one continuous scroll.
Colour
From product finish to interface state.
Silver, Gold, Atomic Grey and Rose Gold come from the hardware. In the UI they appear only as finish chips; everything else stays neutral.
Neutral grounds for the mark; colour reserved for the finishes.
Tap a chip and only the metal body changes. Lens, clip and laptop stay untouched.
Buy flow
Small parts that make buying feel sure.
A quantity stepper with a live total, and a Buy button that turns into a spinner, then a check, then the Shop Pay sheet.
- Reveal
- 600ms, ease-out-expo
- Chip ring
- 250ms
- Press
- scale 0.97
- Easing
- cubic-bezier(0.16, 1, 0.3, 1)
Every state was designed: idle, pressed, loading, confirmed. The visitor always knows what the button is doing.
Impact
One visual language, from the wordmark to checkout.
Delivered as a complete identity and a desktop and mobile storefront, in light and dark.
A brand ready on day one
Wordmark, clearspace, palette and posters, usable on light and dark.
A store that lets the product lead
Neutral pages, one blue action, photography given room.
A buy flow with no dead states
Every press, load and confirm has its own visible state.
Desktop and mobile in step
The mobile store follows the desktop story as one scroll.
Designed by Huy Pham, founder of PHAXIS Lab, in 2023.
Product design, hardware and product photography are Lumina's own and were not part of this work.
Huy Pham
Huy Pham
Huy Pham
Lumina
Desktop web, mobile web
Shop Pay
Launching a product?
Get a brand and a store that feel like the product.
Next case
