storekit · Task #2 · UX/UI Review

Store Designer - Research & Inspiration

How we approached the redesign: a live audit of the current Store Designer, benchmarked against the editors operators already trust, distilled into one governing idea, then traced back into every design decision.

1. Audit the live product 2. Benchmark the giants 3. Distil the governing idea 4. Trace into the redesign
METHOD
How we did the research

We logged into the real Store Designer and captured its actual screens, catalogued the friction, then sourced a named, real-world reference for every problem from product docs, changelogs and design-system guidelines. Nothing here is opinion without a citation.

Steal - pattern we adopt Beat - where we do better Ours - the live product we are fixing
01 · THE THESIS
The one governing idea

What every best-in-class editor converges on

Abandon "one raw field per element". Instead: a small set of named brand tokens/roles that cascade, assigned to whole regions, edited by pointing at a live, click-to-edit preview, with presets as the starting point and progressive disclosure hiding the advanced controls. Every reference below is a variation on this.

02 · THE STARTING POINT
The live Store Designer, as it is today

Our own captures of the current product. These are the screens the client asked us to improve, and the baseline every reference is measured against.

First screen
Shell - first screen12 equal-weight nav items, passive preview, no start point.
Landing
Shell - landingNo progress, no search, mixed top-bar actions.
Colours presets
Colours - topPresets exist but buried above a wall of fields.
Colours accordions
Colours - accordionsMany collapsed sections; hard to scan.
Nested modifiers
Colours - nestedAccordions nested inside accordions.
Item modal
Menu items - modalThe dish modal operators are configuring.
Modifiers style
Menu items - modifiersLook-alike layout tiles, ambiguous choice.
Buttons panel
Buttons panel (gold standard)storekit's own real-preview tiles - the internal bar.
03 · BENCHMARK - SHELL
Screen 1 - the editor shell

Grouped/scoped navigation, live-preview coupling, guided setup with progress, and a command palette.

Grouped, scoped, progressive navigation
Live-preview coupling / click-to-edit
Guided setup / presets / progress
04 · BENCHMARK - COLOURS
Screen 2 - colours

A small palette of roles that cascade, semantic tokens with light/dark, and point-at-the-storefront contrast fixing.

shadcn / Radix tokens
shadcn/ui + Radix Colors Steal
Every surface has a bonded -foreground pair so text is legible by construction; dark mode overrides same tokens.
www.radix-ui.com/colors
APCA contrast
APCA + CSS contrast-color() Steal
Auto-legible text; one-click "fix text" to a passing colour. Backs our contrast warning.
apcacontrast.com/
05 · BENCHMARK - MENU ITEMS
Screen 3 - menu items / item modal

Edit the real dish popup with a live preview that updates as you style it; show each layout choice as a clear structural tile; and group the controls by purpose with the advanced ones tucked away.

Buttons panel
storekit Buttons panel Ours
Already renders real style tiles + inline preview. The internal proof we scale to Colours & Menu items.
the live product (internal gold standard)
06 · COMPETITORS
Hospitality peers - steal & beat

Where the direct competitors are strong (adopt) and where they leave gaps (our opportunity).

07 · GALLERIES & STANDARDS
Pattern galleries & commercial standards

Where we mined live patterns, and the authorities we cite to justify each decision. Gallery sources are login-gated - referenced by URL, not scraped.

[ reference: Mobbin - login-gated ]
Mobbin
Real shipped patterns: dashboards, settings/preferences, colour pickers, inline-edit.
mobbin.com
[ reference: Refero ]
Refero
135k+ real SaaS screens: settings / appearance / theme / onboarding / colour.
refero.design
08 · TRACEABILITY
How the research fed the redesign

Every requirement in our design brief maps a live pain to a proven reference. This is the through-line of the presentation.

Live pain (audit)What we doProven by
12 flat nav items, no startGrouped nav + preset + import-brand + setup checklist with progressShopify Setup Guide, Stripe buckets, Canva Brand Kit, Duda logo-to-palette
Preview never shows what you editTwo-way click-to-edit; preview binds to the open feature's surfaceShopify select-to-reveal, Squarespace, Webflow Navigator, Elementor
Can't find a control you can seeAlways-visible search + Cmd-K palette over every settingLinear / Notion / Vercel command palette
30 raw colour fieldsNamed brand roles up top (Essentials) + a searchable Fine-tune area grouping every colour by where it appearsSquarespace themes, Material 3, Radix, shadcn, Webflow variables
Illegible text pairingsInline contrast warning + one-click "fix text", brand colour untouchedAPCA, CSS contrast-color(), shadcn foreground pairs
Grey wireframe option tilesEvery option rendered as its real, populated resultShopify block previews, Squarespace gallery, storekit Buttons panel
Ambiguous look-alike layout tilesEach layout is a clearly named tile that shows its shape at a glanceFramer variants, Klaviyo/Mailchimp layout choice
Mixed destructive + primary top barRegrouped top bar, two-axis save status, reconciled discard/revertShopify editor top bar, Elementor revisions, NN/g status
Sources compiled from live product docs, changelogs and design-system guidelines (Shopify, Squarespace, Square, Wix, Webflow, Framer, Figma, Canva, shadcn, Radix), hospitality peers (Toast, Flipdish, me&u/Mr Yum, GloriaFood, Slerp) and UI galleries (Mobbin, Refero, Dribbble). URLs verified 2026-07-11. Companion to Audit/AUDIT.md and Audit/RESEARCH-REFERENCES.md.