Titan Cycling | aitorarina

2026

Web (Desktop & Mobile)

Titan Cycling

An eCommerce platform designed to structure and navigate a highly fragmented product ecosystem, combining bicycles, equipment, and services within a unified and scalable architecture.

Stack

Type: eCommerce · Specialized retail
Role: UX/UI Designer · Information Architecture · Frontend
Scope: Information Architecture · Filters · PDP · Hierarchical Navigation · Responsive · Performance

01. Snapshot

Quick project overview, scope, role, and overall context

Intro

The project involved transforming a fragmented and unstructured product catalog into a coherent and navigable system.

This required defining a scalable information architecture, designing clear exploration and purchase flows, and supporting the technical implementation to ensure consistency between UX, UI, and development.

My Role

Defined the product taxonomy and hierarchical structure from an unstructured dataset.
Designed navigation and filtering systems adapted to different levels of complexity.
Rebuilt the product detail experience to balance technical depth and conversion.
Collaborated on custom WooCommerce implementation using ACF and template overrides.
Coordination between design and development through custom WooCommerce templates.

02. Context

Understand the project context, its constraints, and the goals to be achieved

Before the design phase, the project started from a structurally unorganized product system:

An unstructured product database managed in Excel.
No clear taxonomy between bicycles, equipment, and accessories.
Inconsistent relationships between navigation, categories, and filters.
High risk of cognitive overload, especially on mobile devices.

Rather than starting with interface design, the first step was to define a coherent product structure.

The catalog was reorganized into a unified taxonomy system, enabling consistent navigation, scalable filtering, and structured product presentation across the entire platform.

03. Challenge / Solutions

Key issues identified and the design decisions made to address them

Challenge

Large product catalog with multiple variables (size, year, color, price) increasing decision complexity.
Deep and unclear category hierarchies causing navigation friction.
Standard eCommerce filtering patterns not adapted to the catalog structure.
Coexistence of products and services (workshop, pricing) within the same ecosystem.
Unstructured data imported manually from Excel.
Need for high performance with minimal reliance on plugins.

Solution

Multi-level navigation system designed to progressively reduce complexity (category → subcategory → product).
Contextual filtering system adapting to each navigation level.
Clear visual differentiation between product families to improve recognition.
Dual navigation model combining exploratory browsing and quick access to key services.
Custom WooCommerce templates built with ACF to ensure structural consistency.
Optimized frontend architecture using hooks and reusable components.

04. Design Decisions

Key interface decisions that define the portfolio experience

*You can click on an image or stay on it so the carousel will stop moving

1 / 9

Guided Booking Flow

Home | Workshop Form

tep-by-step form reducing friction and improving conversion compared to traditional multi-field forms.

2 / 9

Sticky CTA & Split Layout

Single Product Page

Separates technical content and purchase actions while keeping the “Add to Cart” always visible during exploration.

3 / 9

Responsive Tabs & Accordion

Home | Pricing

Combines tabs and accordions to structure dense information while maintaining clarity across devices.

4 / 9

Cross-Selling Carousel

Related Products

Infinite carousel promoting related products without disrupting the main product experience.

5 / 9

Adaptive Filtering System

Offers & Brands

Filters dynamically adapt to available options, reducing visual noise and improving usability.

6 / 9

Hierarchical Menu Navigation

Products Category

Menu structure reflects the full catalog hierarchy and highlights the user’s current position.

7 / 9

Visual Category Exploration

Main Category Page

Prioritizes subcategories visually to simplify navigation within complex product structures.

8 / 9

Product Discovery Carousel

Home | Featured Products

Balances automatic progression and manual control to support product discovery.

9 / 9

Contextual Navigation System

Category Page | e-bikes

Combines breadcrumbs and contextual back navigation to improve orientation across deep hierarchies.

05. Core Experience Design

How the product is structured, navigated, and experienced from the user’s perspective

Information Arquitecture

The experience was designed to help users navigate a deep and technical catalog without losing orientation.

Navigation, filtering, and product detail pages work together as a system, progressively reducing complexity at each step.

Users can explore broadly, refine through filters, and access detailed product information without cognitive overload.

Navigation & Discovery

The navigation was designed to ensure users always understand where they are and what actions they can take at any given moment.

Visibility of key sections was prioritized, along with consistency across states, avoiding unexpected behavioral changes between screens.

Discovery patterns enable users to explore new features progressively, without requiring explicit instructions, supporting an intuitive experience.

Core Interaction

Consistent interaction patterns were defined to ensure predictability and smoothness throughout the product experience.

Components such as buttons, cards, dropdowns, and interactive states behave consistently, reinforcing learning through repetition.

The system supports a “learn by doing” approach, enabling users to understand how it works through direct interaction rather than explicit instructions.

Case Study Experience

The detail experience was designed to present complex information progressively, avoiding cognitive overload.

Content is structured by levels of relevance: first, the essentials for the purchase decision (price, key attributes, CTA), followed by expanded information (technical specifications, descriptions, reviews).

The layout, featuring independent scroll areas and a sticky CTA, keeps the focus on conversion without sacrificing informational depth—enhancing trust and reducing friction in the decision-making process.

06. Visual

Quick project overview, scope, role, and overall context

Visual Identity

A minimal visual system focused on clarity and contrast, allowing content and structure to drive the experience.

Minimal color system focused on contrast, readability, and functional clarity. Neutral backgrounds support content-heavy layouts, while high-contrast tones define hierarchy and improve legibility. A single accent color is used strategically to highlight primary actions and guide user interaction.

background.primary #ffffff

background.secondary #fbfbfb

contrast.primary #111111

action.primary #f53132

Components

Core product components designed to support navigation, readability, and interaction across long-form case studies

1 / 7

Compact product card combining key information and primary action

Product Card System

Reusable card component designed to display key product information in a compact and scannable format, balancing image, price, attributes, and primary action.

2 / 7

Flexible filtering system adapting to product attributes and categories

Adaptive Filter Panel

Dynamic filtering system that adapts to available attributes and category depth, allowing users to refine results efficiently without overwhelming the interface.

3 / 7

Visual blocks simplifying navigation across product categories

Category Exploration Blocks

Visual category components designed to group products into recognizable segments, enabling faster navigation and intuitive exploration.

4 / 7

Navigation system providing clear orientation within complex hierarchies

Hierarchical Navigation

Navigation system combining menu structure and breadcrumbs to reflect the full catalog hierarchy and maintain user orientation across navigation levels.

5 / 7

Sticky CTA maintaining purchase visibility during exploration

Sticky Purchase CTA

Persistent call-to-action component ensuring continuous visibility of the purchase action while users explore detailed product content.

6 / 7

Structured product information displayed through expandable modules

Product Information Modules

Modular content blocks organizing technical specifications, descriptions, and additional information using progressive disclosure patterns.

7 / 7

Carousel enabling product discovery within the browsing flow

Product Carousel

Horizontal scrolling component used to surface featured or related products, supporting discovery without disrupting the main layout.

Interface Screens

How the platform is navigated and experienced in real use

A guided multi-step flow designed to collect user, bike, and service information progressively, reducing friction and improving completion rates compared to traditional forms.

The layout balances technical product information and purchase actions through a split structure, allowing users to explore specifications while maintaining constant access to the purchase CTA.

Content is structured using a combination of tabs and accordions, enabling users to navigate pricing details progressively without overwhelming the interface.

A continuous carousel presents related products within the browsing flow, encouraging additional purchases without interrupting the main user journey.

Filters dynamically adjust based on available options, allowing users to refine results efficiently while maintaining clarity across different catalog states.

The menu reflects the full product hierarchy and visually indicates the user’s current location, improving orientation within complex category structures.

Subcategories are visually prioritized to guide exploration, helping users navigate complex product structures before engaging with detailed listings.

A homepage carousel highlights key products, combining automatic movement and manual interaction to support both discovery and control.

07. Responsive Design

Adapting the experience across different devices without compromising clarity or usability

Complex catalog logic was preserved on mobile without simplification, only adapting interaction patterns.

Natural scrolling.
Collapsible filters.
Accessible sticky CTAs.
Clear visual hierarchy, even on small screens.

Responsive

Categoría Padre + Swipe + Botón Filtrar

Hierarchical Category Navigation with Swipe Interaction La página de categoría prioriza la exploración jerárquica mediante navegación horizontal tipo swipe para…

1 / 5

Filtros Mobile Abiertos

Off-Canvas Filtering System for Mobile. El sistema de filtros se adapta a mobile mediante un panel desplegable con cierre explícito,…

2 / 5

Single Product Mobile

Mobile Product Detail with Sticky CTA & Progressive Disclosure. La página de producto prioriza la conversión mediante un botón “Add…

3 / 5

Footer Mobile en Accordion

Responsive Footer with Collapsible Information Blocks El footer se rediseñó para entorno mobile mediante bloques colapsables tipo accordion, reduciendo la…

4 / 5

Responsive Navigation Menu

El menú mobile organiza las categorías principales, ofertas, cuenta y carrito en una estructura clara y accesible. Se prioriza consistencia…

5 / 5

08. Technical Implementation

How design decisions translated into a scalable and maintainable system

1 / 6

Modular Homepage Architecture

La homepage se construyó mediante componentes reutilizables cargados con get_template_part(), separando estructura, lógica y presentación.

Este enfoque permite modificar, escalar o reutilizar bloques sin afectar el resto del sistema, facilitando mantenimiento y evolución futura del proyecto.

2 / 6

Single product page

WooCommerce Template Overrides

Override de plantillas WooCommerce para redefinir layout, jerarquía informativa y comportamiento del CTA, manteniendo compatibilidad con actualizaciones futuras.

3 / 6

functions.php

Asset Management via wp_enqueue_scripts

Gestión estructurada de assets mediante wp_enqueue_scripts, asegurando carga condicional de JavaScript y control de versiones dinámico para evitar problemas de caché.

Separación clara entre estilos globales y scripts específicos por contexto (shop, categorías), optimizando rendimiento y mantenibilidad.

4 / 6

Menos plugins y más js

Custom Frontend Interaction Logic

Desarrollo de lógica JavaScript personalizada para gestionar modales, filtros dinámicos y comportamientos sticky, mejorando interacción y experiencia en mobile.

Separación de responsabilidades entre presentación y comportamiento.

5 / 6

Template padre para products page

Custom Taxonomy Template

Implementación de plantilla específica para taxonomías personalizadas, permitiendo control total sobre jerarquía, filtros y estructura visual del catálogo.

Optimización del loop y consulta personalizada para mejorar rendimiento y coherencia de navegación.

6 / 6

Estructura de templates organizada

Custom Theme Architecture

Desarrollo basado en tema personalizado estructurado de forma modular.

Separación clara entre templates, lógica PHP y assets (JS/CSS), facilitando mantenimiento y escalabilidad del proyecto.

09. Outcome / Learnings

Key issues identified and the design decisions implemented to resolve them

Outcome

Clear purchasing experience despite the complexity of the catalog.
Intuitive navigation for both technical and non-technical users.
Solid foundation to scale products and content.
Fast, maintainable, and consistent website.

Learnings

Architecture is key before designing the UI.
Fewer, well-hierarchized elements outperform a higher number of visible options.
Thinking about scalability from the beginning prevents future redesigns