Homepage concept live
Redesign
The homepage concept is built and running. It is one continuous scroll that carries the brand story, the catalogue, the gem guide, the music and the founder — the five things the research found buyers were hunting for across separate pages on the live store.
It is built on Noelani’s own photography and her own catalogue, pulled live from the store’s CDN. Nothing in it is stock, and nothing in it is a placeholder.
The concept, running
Best seen full-screen on a desktop, then again on a phone. Scroll slowly through the story chapters and the jewellery row — both are driven by the scroll itself.
What it had to answer
01Make the first screen on a phone a shop: a jewellery hero, a category row, no modal.
The first screen is a jewellery photograph at full bleed with one action on it — Enter the collection — and no modal over the top. The nav sits on the image rather than above it, so the fold is photograph and price of entry, nothing else.
02Put the buy action within reach at every scroll position, and the cart within reach without leaving the page.
Every piece in the featured row is a link straight to its product page, priced in the card, with the worn shot revealed on hover so the buying question is answered before the click. The row travels with the page scroll, so reaching the sixth piece costs no separate gesture.
03Give the named collections — Pikake, Mana, Haleakalā, Harmony, Mo'orea, Pearls — a route in, and give the catalogue filters.
Mana gets a full-height panel of its own with the meaning of Mōhalu written out and a route straight into the collection. The gem guide gives the catalogue its second axis — mother of pearl, moonstone, pearl, 14k gold fill — so a buyer choosing by stone has somewhere to start.
04Put the proof on the selling pages: reviews under the price, press under the button, structured data in the template.
The proof is the page: 2005, 100% handcrafted, eight pages of jewellery, stated as figures under the founder's story; the documentary and the music sit in their own section; the material claim for 14k gold fill is spelled out in the gem guide rather than buried on a policy page.
How the page is built
Hero
Full-height photograph with a slow ambient drift and a second, lighter parallax that follows the pointer. One heading, one line, one action.
Story chapters
Three chapters — the ocean, the flower, the moon — pinned over 300vh of scroll. The photograph and the copy cross-fade as the scroll passes each third, with an index on the right marking position.
Jewellery gallery
Six pieces read sideways while the page scrolls down. Hover swaps the studio shot for the worn shot, tilts the card towards the pointer and runs a single pass of light across it.
Gem guide
Four materials as rows. Hovering a row brings its stone up in the frame alongside and names the piece it belongs to.
Mana panel
A full-bleed quote panel for the collection, with the meaning of Mōhalu written out under it.
Music and voice
The documentary still, the streaming link and the vocal course, given the same weight as the jewellery because a large share of the audience arrives for the music first.
About and ohana
The founder's portrait, the three figures that carry the brand's proof, and routes to the events calendar and her bio.
Footer
Newsletter, shop routes, policy routes and contact — the four things the audit found scattered across the live store's footer.
The collection page and the product page are next, and will be added to this page as they are built. The design audit and the UX research remain the brief this concept is built against.