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 towards 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
Post-launch results within the first six months.
65%
More website traffic
Within three months of launch
20%
Of total revenue online
A new online sales channel, from zero, within six months
35%
Higher checkout completion
Through the simplified cart flow
90%
Found a nearby dealer
Of tested users located one within two minutes
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 problem
Four gaps between Cyctec and its customers.
Before the redesign, the experience worked against both the customer and the brand: there was no way to buy online, no easy way to find a stockist, a catalogue that was hard to navigate, and a visual presentation that undersold a premium product. Each problem had a specific design response.
- 01
Problem
Limited online purchasing options
Customers had no way to buy Cyctec products online, limiting sales and convenience for retail users.
Solution
A full e-commerce platform
A full-featured online store: browse products, add to cart, and complete secure purchases directly on the site.
- 02
Problem
Difficulty locating local dealers
Customers struggled to find nearby stores that stocked Cyctec products, leading to missed sales and frustration.
Solution
A dealer locator tool
A custom dealer locator with search and filters, so users find nearby retail partners by brand, region, or service type.
- 03
Problem
Complex product catalogue navigation
With a wide range of high-end cycling products, users found it hard to explore and compare items efficiently.
Solution
Intuitive hierarchy and filters
Clear categories, product filters, and sorting, so users quickly find the products that fit their needs.
- 04
Problem
Inconsistent branding and presentation
The previous site lacked a cohesive design system, producing inconsistent visuals that undersold Cyctec's premium image.
Solution
A comprehensive design system
A modular system across typography, colour, components, and layout — visual consistency, scalability, and a premium, professional presentation throughout.
Phase three · The people
Who the storefront is for.
The storefront served two retail audiences and the dealers who stock Cyctec: an enthusiast who researches hard before buying, a casual shopper who needs guiding, and a dealer partner who depends on the site for ordering and visibility. Three different jobs — one system that had to work for all of them.
Neil Collins
Retail customer · 32
An avid cyclist who rides for fitness and leisure and follows the latest in high-performance bikes and gear. He values quality and reliability, and researches thoroughly online before committing to a purchase.
What he needs
An easy-to-navigate site, detailed product information, and a way to locate nearby dealers for hands-on testing or service.
Sarah van der Merwe
Retail customer · 28
A recreational cyclist who rides occasionally on weekends. Less tech-savvy, she prefers simple, clear shopping experiences and wants to quickly find products suited to her skill level and budget.
What she needs
Guidance through recommendations and filters, confidence in her choices, and trustworthy local dealers for support and advice.
Pieter Botha
Retail store owner · 45
Owner of a small cycling retail store who stocks products from several distributors, Cyctec among them. He relies on easy access to product catalogues and updates to keep his shelves current.
What he needs
Accurate product information, online ordering for stock replenishment, and visibility on the Cyctec site to drive in-store foot traffic.
Phase four · 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 five · 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
Phase six · 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
