Concept Shopify store · UI/UX case study · 2026

Built to
be opened.

OHM is a premium e-commerce store and design system for a brand of repairable, modular laptops and phones. Configurator, compare, trade-in and a parts store. Graphite and Paper 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, Graphite and Paper
Context: Self-initiated concept. OHM is not a real brand

103design tokens
33 + 33components + icons
88prototype links
4.9 : 1lowest contrast, both themes

A 40-second film, animated in Figma · sound on

[ 01 ] The brief

Make keeping a laptop for ten years the obvious choice.

Tech stores sell on adjectives: “blazing fast”, “all-day battery”. Buyers can’t compare real numbers, and nobody explains repair, upgrades or trade-in.

OHM is an imagined brand of repairable laptops and phones. Its store had to prove the promise with data: benchmarks against the previous generation, a price for every option, and parts that are filtered to the machine you own.

GoalSell repairable laptops and phones so that long-term ownership becomes the obvious choice.
AudienceDevelopers, creators and students who keep devices for years and care about value per year. An assumption to test.
ConstraintsOnline Store 2.0, 3 options and 2,048 variants per product, Shopify checkout, financing and trade-in through apps, WCAG AA.

[ 02 ] Four decisions

What makes this store different.

Each decision answers an insight from the process board, and each one is visible in the screens.

Home page benchmarks section: battery 19 h versus 14 h, CPU plus 38 percent, SSD 7,000 MB/s, fan noise 32 dB versus 38 dB, each against Gen 2

01 · Lab

Benchmarks, not adjectives.

Every claim becomes a bar against the previous generation, with the test method linked. “All-day battery” turns into 19 h vs 14 h of local video playback.

Battery19 h vs 14 h
CPU multi-core+38 %
Fan noise32 vs 38 dB

Configurator for the OHM Book 14: processor, memory and storage options, each with its price difference, and a repair score of 10 out of 10

02 · Configurator

A price delta on every option.

Configurators lose people when the price jumps without explanation. Each option shows its + €, and the total and monthly price update as you choose.

Book 14 base€1,149
Core Ultra 7+ €150
32 GB · 1 TB+ €200 · + €50
Your Book 14€1,549

Parts and modules store filtered to the customer's registered OHM Book 14, with fit labels, tool needs and swap time on each part

03 · Parts

Parts filtered to your machine.

Registered devices filter the parts store to what fits. Every part shows the screws and minutes it takes: a 72 Wh battery is four T5 screws and about six minutes.

Bag drawer: configured OHM Book 14 for €1,549, USB-C module €19, trade-in credit minus €380 for a 2021 13 inch laptop, total €1,188

04 · Trade-in

The trade-in lives in the bag.

Trade-in is valued but usually hidden. Here a guaranteed quote becomes a line in the cart, so the saving is visible before checkout.

Subtotal€1,568
Trade-in credit− €380
Total€1,188

[ 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.

OHM · 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

Specs only mean something next to the previous model or a rival.
Configurators lose people when the price jumps without explanation.
Repairability sells when it is concrete: screws, minutes, part price.
Trade-in is valued but hidden. The credit must show in the cart total.
Owners come back for parts. The account should know their machine.
Dark UIs read as “pro” here, but a light mode is needed in daylight.

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

[ 04 ] The design system

One token chain, two themes, two sizes.

Four variable collections. Components bind only to Theme, Layout and Spacing, so one mode switch re-themes or re-scales a page. Every variable carries web code syntax, like var(--color-bg-page), which is what this page’s CSS uses. Switch Graphite and Paper at the top: it is the same set of tokens.

Primitives25 raw values
ThemeGraphite / Paper · 29
LayoutDesktop / Mobile · 29
Spacingspace + radius · 20
Components → Screens33 + 33 icons → 19 screens

GraphitePaper

TokenGraphitePaper

bg/page#0B0C0E#F4F5F6

bg/surface#131518#FFFFFF

text/primary#F4F5F6#0B0C0E

text/accent#F5D20B#7A6400

text/data#7FE3F2#0B6E7D

action/primary#F5D20B#F5D20B

Contrast, computed in both modes

Text on background	Graphite	Paper
text/primary on bg/page	17.9	17.9
text/muted on bg/page	6.6	7.2
text/accent on bg/page	13.1	5.3
text/data on bg/page	13.2	5.4
text/success on bg/page	11.2	4.9
text/on-accent on action/primary	13.1	13.1

11 pairs checked, all pass WCAG AA. Yellow text needs its own darker step on Paper: #7A6400.

Type scale, bound to Layout mode

Opened.

Display/XL · 128 → 56

Pick your machine.

Display/M · 56 → 34

Battery · 72 Wh

Heading/S · 18 → 17

Four T5 screws, one connector.

Body/M · 15

19 h

Data/XL · 64 → 40

Funnel Display, Funnel Sans and Azeret Mono. Small radii, 6 px controls and 12 px cards, for a machined feel.

Button variants: signal yellow, white, outline, ghost and text, in three sizes — Button

Config option in default, selected and sold-out states, with price delta plus €200 — Config Option · price delta

Product card in grid and compact variants, with spec pills, compare checkbox and repair score badge — Product Card

Trade-in credit card: 2021 13 inch laptop, good condition, minus €380 — Trade-in Card

Part card: USB-C module, fits Book 14 and Book 16 Pro, no tools, 10 seconds, €19 — Part Card

Bench bar: battery video playback 19 h, Gen 3 against Gen 2 — Bench Bar

Repair score meter, 10 out of 10 — Repair Score

Device card: OHM Book 14 Gen 3 with serial number, warranty bar, order parts and book a repair buttons — Device Card

Trade-in steps: device, condition, quote, in three progress states — Steps

Icon set of 33 line icons on a 24 pixel grid

[ 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 switch at the top of this page.

Ten mobile screens, one thumb.

390 px. The configurator, compare table and trade-in all work one-handed. Each phone scrolls on its own. Scroll sideways for more.

Mobile account, your devices — M10 Account

[ 06 ] Shopify handoff

Every screen maps to Online Store 2.0.

JSON templates of reusable sections and blocks, product data in metafields and metaobjects, and a configurator built on native variants plus line-item properties, because Shopify caps a product at 3 options and 2,048 variants.

Screen	Template	Sections	Data
Home	`templates/index.json`	hero-exploded (callout blocks) · featured-collection + compare-tray · benchmark-bars · module-grid · trade-in-cta · reviews	collections, product metafields, reviews app
Laptops	`templates/collection.json`	main-collection-banner (stats) · facets + product-grid · help-me-choose · compare-tray	Search & Discovery filters on metafields
Configurator	`templates/product.json`	main-product (repair score, variant groups with price deltas, keyboard and port-module properties, trade-in + care toggles) · tech-specs · repair-guide	variants (CPU × RAM × SSD), line-item properties
Compare	`templates/page.compare.json`	compare-table (products from `?ids=`, rows from spec metafields, “best” per row)	`product.metafields.specs`
Trade-in	`templates/page.trade-in.json`	trade-in-flow (3 steps) · quote card	trade-in app or app proxy, cart attributes
Parts	`templates/collection.parts.json`	device-filter (registered devices) · category chips · part grid · upgrade-path	metaobject `device`, `parts.fits`
Bag	`sections/cart-drawer.liquid`	cart lines with config summary · trade-in credit · OHM Care upsell · totals + financing	cart, line_item.properties, cart.attributes
Account	customer accounts + extension	my-devices (warranty, battery health) · repairs · trade-ins	`customer.custom.devices`

Metafields & metaobjects

product.custom.repair_score: 0 to 10: score meter, badges, compare row, sort
product.custom.specs: JSON (cpu, gpu, ram_max, display, battery_wh…): spec pills, compare
product.custom.benchmarks: JSON (metric, value, previous): bench bar widths
metaobject part: name · fits · screws · minutes: compatibility and swap time
metaobject device: serial · product · warranty: my devices, parts filter

Theme settings

Colour schemes Graphite / Paper: generated from the Theme collection, same CSS variable names
Default appearance: graphite, paper or system; the header switch overrides and is remembered
Financing term: monthly price on configurator and cart (24 months, 0 % APR)
Compare limit: max devices in the compare tray (3)

Honest limits

3 options / 2,048 variants per product: CPU × RAM × SSD use variants, keyboard and port modules are line-item properties priced through an app or bundles.
Checkout is hosted by Shopify. Only branding is customised, so no checkout screen is designed here.
Financing (0 % APR) and trade-in quotes need third-party apps. Amounts shown are sample data.
OHM is a concept brand. Benchmarks, prices and repair scores are illustrative.

[ 07 ] Try it

Configure a laptop in the real prototype.

88 interactions: 51 on desktop, 37 on mobile. Configure to bag and trade-in on desktop; configure to bag and browse and compare on mobile. It runs inside Figma, right here on the page.

See the Figma file ↗

Loads Figma’s player · about 5 MB

[ 08 ] What I learned

Numbers are a design material.Bench bars, price deltas and swap times did more for trust than any headline. The data model came first, the layout second.
Platform limits shape the UI.Shopify’s 3-option cap decided which choices are variants and which are properties, and that changed how the configurator groups them.
A dark default still needs a light twin.Signal yellow passes on Graphite but not on Paper, so the accent got its own darker token instead of one shared colour.

Thanks for reading.

Previous: HORA, the skincare store All projects

Built tobe opened.