Shopify store concept · UI/UX case study · 2026

Skincare that keeps time.

HORA is a premium e-commerce store and design system for a skincare brand built around the skin’s 24-hour clock. Day and Night themes, desktop and mobile, mapped to Shopify Online Store 2.0.

Role: UI/UX design, design system, prototyping, Shopify architecture, film
Tools: Figma variables & modes, components, prototyping, FigJam, motion
Scope: 8 desktop + 10 mobile screens, Day and Night
Context: Self-initiated concept. HORA is not a real brand

102design tokens
28 + 26components + icons
80prototype links
4.9 : 1lowest contrast, both themes

A 39-second film, animated in Figma. Sound on.

01 · The brief

Sell every product by the hour it is used.

Skincare shoppers buy single products without a routine, use them at the wrong time and give up before results show. Most stores sell by category and ingredient list, which makes the problem worse.

HORA sells by time. Every formula carries a time code, 06:00 Vitamin C Serum or 22:00 Retinal Night Oil, and the whole store, from navigation to filters to the cart, is organised around morning and evening.

GoalA premium Shopify store where every product is sold by the hour it is used, not only by what it is.
AudienceUrban, 25 to 40, ingredient-curious, short on time, mostly on mobile. An assumption to test.
ConstraintsOnline Store 2.0, Shopify checkout, subscriptions through selling plans, WCAG AA, desktop and mobile.

02 · Four decisions

What makes this store different.

Each decision came from a desk-research insight on the process board, and each one shows up in the screens.

Collection page: All formulas, with time-window tiles for all day, morning and evening, and filters by skin concern and time of day

01 · 06:00 → 22:00

Time is the navigation.

Every product has a time code and one benefit line. Collections, filters, the AM/PM tabs and routines all sort by time of day, so shoppers see what to use and when, not just a list of actives.

02 · 19:00

Day and Night themes.

Beauty browsing peaks in the evening, so the store has a real dark theme, not an inverted one. Both modes share the same 29 colour tokens. Night switches on after 19:00 and the header toggle overrides it. Try the toggle at the top of this page: it uses the same tokens.

Skin quiz, question 3 of 7: how does your skin feel at 12:00? Four answer cards and a note explaining why the question is asked

03 · 7 questions

Quiz to routine to bag.

Seven questions produce a morning and an evening routine: 7 formulas for €259.25 with 15 % saved. One tap adds the whole routine to the bag as a subscription. Each question explains why it is asked.

04 · €48 → €40.80

Honest subscriptions.

Subscribe and save sits right beside the price, with “skip or cancel anytime” on the same line. The saving is shown in the cart and the account, so a subscription never feels like a trap.

03 · The process

From brief to theme architecture, on one board.

Before any screen, I mapped the project in FigJam: brief, insights, key decisions, sitemap, two user flows, the Shopify architecture and the token chain.

The insights are desk research and assumptions, clearly labelled. No user interviews were run for this concept, so the board ends with what I would test first.

HORA · Process board · FigJam

Open in FigJam ↗

FigJam process board with nine zones: brief, insights on sticky notes, key decisions, sitemap, two user flows, Shopify architecture, design system chain, screens and next steps

Routines beat single products: people want to know what to use, and when.
Ingredient lists feel clinical. One time and one benefit per product is easier to scan.
On mobile, key decisions must sit above the fold or people drop off.
Subscriptions feel risky. Show skip or cancel right next to the price.
Beauty browsing peaks in the evening. A dark theme fits that moment.
Proof builds trust: reviews filtered by skin type.

Insights from desk research. Assumptions to validate, not findings.

04 · The design system

One token chain drives every screen.

Four variable collections. Components bind only to Theme, Layout and Spacing, never to raw values, so one mode switch re-themes or re-scales a whole page. Every variable carries web code syntax, like var(--color-bg-page), which is exactly what this page’s CSS uses.

Primitives27 raw values
ThemeDay / Night · 29
LayoutDesktop / Mobile · 27
Spacingspace + radius · 19
Components → Screens28 + 26 icons → 20 screens

TokenDayNight

bg/page#F3F2EE#0D0E12

bg/surface#FBFAF8#16171D

text/primary#15161A#F3F2EE

text/muted#67635C#8E8B85

accent/am#E07B4F#F2B08C

accent/pm#4B4391#A9A3D6

bg/tint-am#FBE6D9#3B2116

bg/tint-pm#E4E2F1#2A2557

Contrast, computed in both modes

Text on background	Day	Night
text/primary on bg/page	16.1	17.2
text/secondary on bg/page	8.8	9.5
text/muted on bg/page	5.3	5.7
text/accent on bg/page	5.2	10.4
text/on-accent on action/accent	6.1	9.8
text/accent on bg/tint-am	4.9	8.0

11 pairs checked, all pass WCAG AA. Lowest: 4.9 : 1.

Type scale, bound to Layout mode

Keeps time

Display/XL · 120 → 60

One drop at 06:00

Display/L · 84 → 46

Tight and dry by noon

Heading/S · 20 → 18

Formulas made for the hour you use them.

Body/L · 18 → 17

06:00 · Morning

Mono/Time · 11 → 10

Instrument Serif, Hanken Grotesk and Martian Mono. Switch a frame to Mobile and all 16 styles re-scale.

Button variants: dark, outline, accent, soft and text, in three sizes — Button

Time Tags: 06:00 morning, 22:00 evening, AM plus PM — Time Tag

Segmented AM/PM control in both states — Segmented AM / PM

Product card in grid and row variants: photo, time tag, benefit line, price and rating — Product Card

Quiz option cards, default and selected — Quiz Option

Routine step row with number, product, step type and instructions — Routine Step

Ingredient card with strength and description — Ingredient Card

Review card: rating, verified buyer, title, text and skin type — Review Card

05 · The screens

Eight desktop pages. Scroll them for real.

Full-length pages at 1440 px, shown at their real height. Pick a page and scroll inside the window. Home follows the theme toggle at the top of this page.

Ten mobile screens, designed for the thumb.

390 px, with the key decision above the fold on every page. Each phone scrolls on its own. Scroll sideways for more.

Mobile collection, shop all — M02 Shop all

Mobile filters bottom sheet — M03 Filters

Mobile routine result — M06 Your routine

Mobile account and subscriptions — M10 Account

06 · Shopify handoff

Every screen maps to Online Store 2.0.

JSON templates made of reusable sections and blocks, so a merchant can rearrange the store in the theme editor without code. Component names match snippet names, and product data lives in metafields and metaobjects.

Screen	Template	Sections	Data
Home	`templates/index.json`	hero-now · skin-schedule · featured-collection (AM/PM tabs) · quiz-cta · ingredient-list · reviews · refill-banner	collections, metaobject ingredient, reviews app
Collection	`templates/collection.json`	main-collection-banner (time-window tiles) · main-collection-product-grid	Search & Discovery filters on metafields
Product	`templates/product.json`	main-product (time tag, variant picker, selling plans, buy buttons) · routine-steps · complementary-products · reviews	product metafields, selling_plan_groups
Skin quiz	`templates/page.quiz.json`	skin-quiz (custom section, 7 steps, results saved to the customer)	`customer.custom.skin_profile`
Your routine	`templates/page.routine.json`	routine-result (AM / PM) · add-routine via `/cart/add.js` with selling_plan	quiz answers → product handles
Cart	`sections/cart-drawer.liquid`	cart-drawer · free-shipping-progress · upsell	cart, recommendations (complementary)
Search	`sections/predictive-search.liquid`	products, articles, pages, suggestions	`/search/suggest.json`
Account	customer accounts	subscriptions portal styled with the same tokens	Shopify Subscriptions app

Metafields & metaobjects

product.custom.time_of_day: AM, PM or Both: Time Tag colour, AM/PM tabs, filter
product.custom.time_code: “06:00”: Time Tag label and name prefix
product.custom.key_ingredients: list of ingredient metaobjects: cards, accordion, glossary
product.custom.routine_step: order inside routine lists
customer.custom.skin_profile: JSON: quiz answers, routine, account greeting

Theme settings

Colour schemes Day / Night: generated from the Theme collection, same CSS variable names
Auto night mode: switches at 19:00 local time, the header toggle overrides and is remembered
Free shipping threshold: drives the cart progress bar (€60)
Typography: three self-hosted .woff2 font assets

Honest limits

Checkout is hosted by Shopify. Only branding is customised, so no checkout screen is designed here.
Subscriptions need the Shopify Subscriptions app (or similar). The purchase options map to selling plans.
Reviews come from a reviews app. The ratings in this concept are sample data.
HORA is a concept brand. Claims and prices are illustrative, not medical advice.

07 · Try it

Shop through the real prototype.

80 interactions: 39 on desktop, 41 on mobile. Two flows on each: shop to bag, and the skin quiz to your routine. It runs inside Figma, right here on the page.

See the Figma file ↗

Loads Figma’s player (about 5 MB).

08 · What I learned

Modes are a superpower.Binding everything to Theme and Layout meant the Night theme and all ten mobile screens came from mode switches, not redrawing.
Design for the platform.Mapping screens to Shopify templates early stopped me designing things a theme cannot do, like a custom checkout.
One idea, everywhere.“Time” is the brand, the navigation, the data model and the theme switch. A single strong idea makes a store feel premium.

Thanks for reading.

Next: OHM, the tech store All projects