Cyctec
An online retail experience built around structured product discovery.
- Role
- UX/UI Design
- Type
- E-commerce storefront
- Focus
- Discovery · Conversion · System
- Year
- 2024
About
An e-commerce project where the design focus was making a varied product range easy to navigate, compare, and buy — without retail visual noise.
Cyctec needed a storefront that could carry a catalogue at scale — categories, individual products, comparison, cart, and checkout — without each surface feeling like a one-off design.
The work covered the customer-facing experience end to end, focused on the moments where good structure reduces friction in the buying decision. Retail design tempts you toward decoration; the discipline this project demanded was the opposite — restraint, photography-led hierarchy, and a tight component vocabulary that lets the products do the work.
Let the products do the colour work; keep the layout quiet.
Outcomes
PLACEHOLDER — owner to supply real outcome metrics.
—
Headline metric one
PLACEHOLDER — owner to supply.
—
Headline metric two
PLACEHOLDER — owner to supply.
—
Headline metric three
PLACEHOLDER — owner to supply.
—
Secondary metric
—
Secondary metric
—
Secondary metric
—
Secondary metric
PLACEHOLDER — secondary metrics, owner to supply.
Phase one · The brief
A catalogue that scales.
The site needed to:
- Make product discovery effortless across categories and within them.
- Carry a consistent product card pattern that scales from a small range to a deep catalogue.
- Communicate enough detail per product to support an informed decision, without overwhelming the page.
- Treat photography as a first-class design surface, not decoration on top of layout.
Phase two · The people
Who the storefront is for.
PLACEHOLDER — a short framing sentence introducing the three shopper types the storefront was designed to serve.
Persona one
Role / shopper type
PLACEHOLDER — who this shopper is, their context, and what brings them to the store.
What they need
PLACEHOLDER — the primary need or job this shopper brings to the experience.
Persona two
Role / shopper type
PLACEHOLDER — who this shopper is, their context, and what brings them to the store.
What they need
PLACEHOLDER — the primary need or job this shopper brings to the experience.
Persona three
Role / shopper type
PLACEHOLDER — who this shopper is, their context, and what brings them to the store.
What they need
PLACEHOLDER — the primary need or job this shopper brings to the experience.
Phase three · Approach
Catalogue first, homepage last.
The work started with the catalogue structure rather than the homepage. A storefront stands or falls on how its product and listing pages work, so the foundational decisions were:
- How a product card behaves — what it carries, how it scales across grid densities, how it reads on mobile.
- How a product detail page is composed — image hierarchy, primary description, secondary detail, related products.
- How listing and category pages compose those cards into browse-able patterns.
From there, the homepage and supporting pages composed from the same vocabulary. By the time we reached marketing pages, the system was doing the work.
Phase four · Design system
A system that supports photography.
A system built to support photography. Product imagery is the brand register; the design system gets out of the way and lets the colour work happen in the photographs. A tight component vocabulary composes every page in the storefront.
- Typography — a clean ramp that supports product imagery rather than competing with it
- Colour — near-neutral palette so photography does the colour work; a single restrained accent for CTAs and sale states
- Layout — consistent product-grid behaviour across categories with predictable card spacing and aspect ratios
- Components — product card (multiple density variants), product detail block, listing grid, cart row, checkout step
Figma asset — Design system showcase — typography ramp, colour palette, spacing scale, and core component patterns including product cards and listing grid
Phase five · Selected screens
Selected screens.
The key surfaces at a glance.
Cyctec homepage
Homepage — hero and featured products. Photography sets the colour register; the layout stays restrained.
A catalogue of even modest size means you can't design every page individually — the storefront only stays coherent through patterns that compose. That habit carries directly into product design.
— Reflections
More case studies
