01 — Introduction
From research to architecture to interface.
The UX-UI process was not a separate phase — it was the direct output of nine months of research. Every structural, visual, and interaction decision in this section traces to a finding from 25 user interviews, 50 surveys, and a competitive teardown of eleven luxury and luxury-adjacent brands. This page documents how those findings became architecture, architecture became interface, and interface became a luxury digital experience that does not look, feel, or behave like the cycling category it competes in.
02 — Research Takeaways Applied to UI
What luxury does right (and where cycling brands fail).
The benchmarking phase is documented in detail in the Research chapter. What follows is the distilled output: the eight UI-actionable takeaways that shaped every decision on this page. The point of this section is not to summarise research — it is to make the through-line from external evidence to internal decision visible.
Benchmark
Hover a node
Each brand opens a one-paragraph takeaway and the decision it forced in VELOQUE's UI.
Eight takeaways. Eight decisions.
Selling is the product, not the goal.
Apple's web experience is engineered as a product moment, not a transaction funnel. Customisation steps slow the user down by design — and that friction is what makes the purchase memorable.
A configured product page that walks the user through purpose → fabric story → fit → kit completion before the primary CTA. The checkout itself stays Shopify-native because that trust pattern is recognised; everything before checkout is editorial.
Online catalogue is brand presence, not volume retail.
LV's Shopify site uses monumental whitespace, near-zero corner radii, and soft white-to-grey gradients. It struggles when SKU volume gets too high — navigation breaks down past a certain count.
VELOQUE applies the monumentality but solves the volume problem at the source: a deliberately small range, enforced by the Drops vs. Essentials split.
Storytelling per product, short range, high price.
Rolex, Riva, Pinarello-class brands pour disproportionate storytelling into a small range. Each product earns its own narrative.
The product page is a CMS template that demands a per-product story: purpose statement, fabric origin, real-body fit, technology breakdown — not a spec sheet.
Spectacular aesthetic, broken navigation.
Tag-cloud dropdowns and unclear category labels create friction. Heavy seasonal discounting and large production volumes erode the luxury read despite the visual identity. The recent product-sitemap section on the homepage is widely loved.
Keep the editorial aesthetic, ship the homepage product-sitemap section (§09.7), and refuse category-cloud dropdowns. Navigation is SEO- and mental-model-led, not stylistic.
Cognitive overload and unclear use-case.
Storytelling imagery overwhelms product clarity. Users can't tell what each garment is for or how to combine pieces. Pricing leans aspirational without technical justification — the brand polarises as a result.
Lead every product with the question "what is this for?" Treat kit completion as curatorial recommendation, not upsell. Never ask the user to do the combinatorial work themselves.
Strong tech, weak digital experience.
Both run on WordPress + WooCommerce. Users describe their sites as "good value, dated experience." The technology premium is undermined by the interface.
The technology section (§09.8) treats fabric and construction as a first-class story with the same editorial weight as the lookbook — closing the gap these brands leave open.
Range curation as a luxury signal.
Below a certain product count and above a certain price floor, a brand reads as luxury almost regardless of the digital interface.
Cap the visible range at 27 product models across drops and essentials. The "luxury threshold" was a deliberate output of the SEO and category research with Jorge Jiménez Rolo (§03).
Generic packaging, undifferentiated unboxing.
Even MAAP's packaging — well-designed but mass-produced — fails the luxury test on the doorstep.
Extend the experience to physical touchpoints: packaging is itself part of the product story (documented in Branding and Industrial Design).
The takeaway from a year of research is not "luxury is hard." It's that no cycling brand has fully translated luxury logic to a digital experience. That gap is the design opportunity.
03 — Information Architecture
SEO, search intent, and the luxury threshold.
Information architecture for a luxury brand cannot be solved by category logic alone. It has to reconcile how users search, how the range is structured, how colour and use intersect, and the volume threshold above which a brand stops reading as luxury. All four were studied in parallel.
3.1 — Search-intent research with Jorge Jiménez Rolo (Flat 101)
VELOQUE's traffic strategy is brand-led, not keyword-led — most high-intent users will arrive already knowing the brand. SEO is not the acquisition engine. But search-intent data is the most reliable signal of how cyclists think about product categories — what they call them, how they group them, what they expect to compare.
I worked with Jorge Jiménez Rolo, SEO Manager at Flat 101, on a structured intent study covering:
-
01
The vocabulary cyclists actually use — which differs measurably from industry copy. Search volumes for "bib shorts" vs. "cuissard" vs. "culotte" vary by an order of magnitude across markets.
-
02
Online trends in range composition and seasonality — when each garment type peaks, how to time drops to intent windows.
-
03
Colour-family search clustering across men's and women's segments. Black, navy, and camel dominate intent in the luxury cluster; vivid colours peak in narrow seasonal windows.
-
04
Competitor URL architecture and its mapping to search-intent volume — which slugs convert intent into clicks, which dilute it.
The output was not a keyword list. It was a category-and-colour map that informed how the range itself would be structured — and how the navigation would mirror the user's mental model rather than impose the brand's internal taxonomy.
SEO research is the cheapest, most honest user research you can do. Before we ran wireframe tests, we already knew what cyclists called things — and where the existing category labels were getting in their way.
3.2 — Range structuring by use and colorimetry
Building on the search-intent map, the product range was structured along two axes the user actually thinks in: use-case (road / gravel / café / racing) and colour family (drop-specific palettes vs. essentials neutrals). This collapses what would otherwise be a long, confusing taxonomy of garment types into a navigable, gendered, use-led structure.
3.3 — The luxury threshold
The category research surfaced a concrete constraint: above ~30 visible product models, the brand stops reading as luxury in the cyclist's perception (consistent with the MAAP and PNS findings in §02). VELOQUE's catalogue is capped at 27 active models, with seasonal drops rotating in and out rather than accumulating.
04 — Low-Fidelity Wireframe Testing
Three variants. Ten users. One winner.
Before a single high-fidelity component was drawn, three sitemap-and-flow variants were prototyped as interactive Figma wireframes and tested with 10 moderated users drawn from the Progressive and Engaged personas. Users completed identical tasks across all three: "Find a jersey for a hot-weather gravel ride," "Buy a piece from the current limited drop," "Check what's included in the seasonal subscription."
Variant A — Category-led
Single catalogue, filtered by category. The conventional Shopify pattern.
Preferred by 8/10 users
Variant B — Use-case-led
Navigation by riding context (road, gravel, café). Conceptually clean, but users overshot.
Preferred by 0 / 10
Variant C — Drops + Essentials
Top-level split between time-sensitive drops and the permanent essentials range.
Preferred by 9 / 10
Why C won.
-
01
/dropsroutes to all current limited products in a single page, filterable by category and colour but never split into sub-URLs. Drops are scarce, time-sensitive, desire-driven; subdividing them destroys the moment. -
02
/essentialsis segmented by garment type (Jersey, Bibs, Gilet, Skinsuits, Jackets, Baselayers, Accessories) with dedicated URLs for each — because essentials are compared category-by-category and SEO crawlability matters here. -
03
Filters live on the page, not as a separate step. Gender, breadcrumb, and "All [type]" links allow power users to move fast without disrupting the editorial pace for first-time visitors.
The decisive insight wasn't that users prefer drops over essentials. It was that they want the brand to acknowledge what kind of shopping moment they are in before showing them products.
05 — Final Sitemap
The architecture, after testing.
Click any branch to expand. Hover a node to see why it exists. The structure mirrors the user's mental model — shopping moment, then category, then garment — and isolates the authenticated app from the marketing site at the root.
VELOQUE.COM
-
/ home Editorial entry — current drop, brand voice, range overview
- active drop highlightFirst viewport — scarcity is signalled, not screamed
- storytelling videoBrand promise, visual evidence
- visual product mapHomepage sitemap moment — collapses the catalogue
- "Café Culture" conceptLifestyle anchor — non-product editorial
- essentials entry pointPermanent range — quiet, not headline
- community / club signalLBCC membership — belonging as durable value
-
/ drops Limited, time-sensitive — single page, filterable
- current drop · filterable by category & colourNever split into sub-URLs — preserves the moment
- archive · past dropsShown only if stock remains
-
/ essentials Permanent range — garment-typed URLs for SEO
- /jersey
- /bibs
- /gilet
- /skinsuits
- /jackets
- /baselayers
- /triathlonTrisuits & tri-specific kit — adjacent endurance audience
- /accessories
- /all-essentialsPower-user convenience — one place, every essential
-
/ off-bike Lifestyle range — café culture extended off the bike
- /apparelTees, polos, sweatshirts — jersey DNA, off the bike
- /outerwearOvershirts, knits, lifestyle jackets
- /accessoriesCaps, leather goods, café-culture pieces
- /all-off-bikeOne-screen view of the full lifestyle range
-
/ product / [slug] CMS template — identical structure per SKU
- hero + Drop / Essentials label
- purpose statement"What is this for?" — the PNS counter-pattern
- technology & specs · progressive disclosure
- real-body fit guide
- material story
- complete the kit · cross-sellCuratorial recommendation, not upsell
- community / social proof
-
/ experiences Anti-discounting strategy — loyalty rewarded with access
- /exclusive-travelsCurated cycling travel — flagship experience
- /veloque-eventsBrand activations, openings, demo days
- /ridesGroup rides — local & destination
-
/ the-cafe-culture Lifestyle / community editorial
-
/ club LBCC membership — exclusivity layer
- /membership
- /events
-
/ support Help, returns, contact
-
/ account Non-indexable — built on Lovable + Vercel (React)
- /profile
- /lbcc-status
- /closet · blockchain-tracked ownershipPhase 3 — provenance, resale, LBCC progression
- /subscription
06 — Fast Prototype
Validating storytelling before pixel polish.
Once the sitemap was validated, the homepage flow was rebuilt in Framer as a fast-prototype — interactive, scrollable, and shareable as a public URL — before committing to the design system. The objective was fast validation of brand storytelling and scroll rhythm with internal stakeholders and a small group of cyclists, not pixel polish.
The scroll length is intentionally long. A luxury experience should build a mental model section-by-section — not compress it into a single viewport — and the prototype confirmed that users would scroll the full page if each section delivered a distinct, relevant payload.
07 — Design System
Modern luxury, not monumental sterility.
The design system reconciles two requirements that usually pull against each other: modernity (which leans soft, friendly, web-native) and luxury (which leans monumental, dense, traditional). The system commits to five explicit principles.
