Skip to content
Hanastudio
Menu
All work

Lumira Skin · E-commerce

A skincare store that reads like a real brand

Full ingredient lists, a routine builder, a cart drawer and a checkout that takes payment through a real gateway flow.

Open the live demoOpen the dashboard
Year
2026
Type
E-commerce
Built with
Next.js, TypeScript, Tailwind CSS, Payments service
Demo content
A demonstration build. The brand is a sample; what is real and what is sample is listed below.
hanastudio.my/demo/skincare
Lumira Skin: website home page
The brief

What the client needed

A small skincare brand competes on trust. Shoppers read ingredient lists, check strengths and worry about sensitive skin, but a chat-and-transfer order flow makes a real brand look like a side project.

The job was a store with the depth of a serious skincare label, a checkout that takes payment properly, and an admin that keeps stock and orders honest.

What we built

The public site

  • Formulas in the open

    Every product shows its actives with strengths, the full ingredient list, how to use it and how long results honestly take.

  • A routine builder

    A short quiz that recommends a sensible morning and evening routine, with the reasons, and adds it all to the cart.

  • Cart drawer and promo codes

    Edit lines, watch the free-shipping bar fill, and apply a code that really validates.

  • Checkout through a gateway flow

    The order is only marked paid after the payment service confirms the amount, the same way a live gateway would.

  • A learn section

    An ingredient glossary and short articles with cited science.

  • Order tracking

    Customers look up an order by number and phone.

The back office

Store admin

Orders, stock and customers in one place, built for someone packing parcels between messages.

  • Orders, fulfilment and payment status
  • Inventory with low-stock alerts
  • Sales, customers and promo codes
Open the dashboard

Sign in with any password. Data stays in your browser and can be reset.

hanastudio.my/demo/skincare/admin
Lumira Skin: Store admin
About the content

What is real, and what is sample

Real

  • Ingredient science, concentrations and how each active is used
  • Cosmetic claim rules for Malaysia
  • Photography, openly licensed and credited

Sample

  • The Lumira brand and its products
  • Reviews, marked as samples
  • Every order and customer in the dashboard

Sources and photo credits are listed on the demo’s credits page.

Studied first

Good sites we learned from

We study how established sites solve the same problem, then design our own. Nothing is copied: no logos, no words, no images.

  • Ingredient-transparent skincare brandsShowing strengths and full formulas up front
  • Direct-to-consumer beauty storesCart drawer, bundles and a calm checkout
Built with

Under the hood

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Payments service
  • No third-party scripts
  • Accessibility checked with axe
Next project

Aria Aircond

Aircond servicing with live slot booking

Read the case study

Want something like this for your business?

Start a project