UI/UX

Lavana: A D2C Beauty Storefront Design Study

om ·

Lavana is not a real store – it’s a concept brand we created to see what a high-conversion D2C beauty or wellness storefront might look like from scratch. This design study covers the brand identity, the UI design, and even some HTML/React prototypes. In short, we built it to prove a design approach, not to launch an actual shop.

The Challenge We Tackled

We noticed that by 2026, most D2C beauty sites look almost identical. They use the same Shopify templates, big hero images, and trust badges at checkout. That makes it hard to stand out – and often just turns into a price war. We wondered: What if we designed a beauty store focused on conversion from day one? We set three goals: a distinctive brand that still converts, a checkout optimized for mobile that actually works, and an editorial layer to keep people coming back between purchases.

Brand Identity (Keeping It Simple)

For Lavana, we embraced a very simple, restrained look. We used an off-white background and one accent color (a deep terracotta), with a classic serif font (Fraunces) for headlines and a clean sans-serif (Inter) for everything else. All product photos share a style: studio shots on a neutral background, plus a second lifestyle photo showing the product in use.

We let typography carry the visual interest – we skipped the stocky illustrations or busy graphics. The idea is that a clear, confident type system on a calm page feels more premium than a cluttered page with a logo and confetti everywhere. It does mean we had to be disciplined with the design, but it paid off.

A laptop displaying a candle promotion webpage with a minimalist design, featuring images of candles and text highlighting eco-friendliness, beautiful fragrances, and suitability for any occasion.

Product Page (PDP) Approach

On both mobile and desktop, the top of the page has about 5 to 7 product images. The first image is the product alone, and the second image is a lifestyle shot. The product name stands out in our serif headline font, and the price is shown cleanly (we dropped the word “from” so it looks straightforward). Below that, there’s a variant selector (if needed), a stock indicator, and one big “Add to Cart” button. We also remind shoppers of our free shipping threshold and return policy right there – that’s the single biggest nudge to buy. We left out any social-proof carousels or pop-ups at the top of the page. Above the fold, the buyer just needs to decide, not be bombarded with messages.

Further down the page, we break things into easy sections. There’s an accordion for product details like ingredients, size, usage tips, and any warnings. Then we show customer reviews with lots of photos so people can see the products on real skin. After reviews, we suggest up to three “frequently bought together” items. Everything is just a tap away: for shoppers who care about formula, the full ingredient list is one tap from the product images. This way they can trust the product without hunting through the page.

Checkout Experience (Mobile-First)

We built the checkout on a single page using an accordion format. First the customer enters contact info, then shipping address (with autocomplete), then shipping options, and finally payment. We put Apple Pay and Shop Pay buttons up front, above the form fields, to speed things up. On mobile, the order summary stays visible in a collapsible sticky bar at the bottom. On desktop, we fixed the order summary in a sidebar.

A big decision: we do not force anyone to create an account. After payment, we ask if they want to save their info for next time. (This is based on Baymard Institute research showing that forced account creation drives people away.) Letting customers check out as guests, with the option to save their details later, keeps the funnel moving.

What We Built

  • Brand identity system: Colors, typography, photography style, and even voice guidelines to make Lavana feel unique.
  • Figma component library: Around 40 components covering everything – the catalog pages, product pages (PDP), cart, checkout, account pages, and some editorial templates.
  • Interactive prototypes: We coded the homepage, category pages, PDP, cart, and checkout flows in HTML/CSS for both mobile and desktop.
  • React component samples: For parts that need interactivity (like the variant selector, the image gallery, or a slide-out cart drawer).
A laptop displaying a 'Shop by Category' section for candles and diffusers, featuring icons for scented candles, reed diffusers, room sprays, soy candles, jar candles, pillar candles, wax melts, and gift sets.

Key Takeaways

You don’t need fancy illustrations to look premium. Simple design, great typography, and consistent photos do most of the work.

mobile-first checkout with guest checkout by default and prominent native payment options (Apple Pay, Shop Pay) is a game-changing move for conversions.

Brand style and usability can go hand in hand. By using restraint (one color, simple layout, clear type), we hit both a distinctive look and a smooth buying experience.

Want a similar concept build for your brand?

If this approach intrigues you, EtherLabz can do a similar concept project for your brand. Think of it as a paid design exploration: you get a prototype storefront built around your brand’s identity and goals, before you commit to a full eCommerce development. Book a discovery call to chat about your needs and scope.

Design study by Sanya and the EtherLabz team. Lavana is a concept brand created for this exploration; it is not a live, commercial store.