Titan Cycling | aitorarina

2026

Web (Desktop & Mobile)

Titan Cycling

eCommerce platform for electric bicycles, equipment, and accessories, designed to manage a complex catalog with multiple hierarchies, advanced filtering, and a high volume of technical information.

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 required a solution capable of managing a complex catalog with multiple levels of navigation, advanced filtering, and product pages with highly technical content—without compromising clarity or performance.

My role involved defining the information architecture, designing the key exploration and purchase flows, and supporting the technical implementation to ensure alignment and consistency between UX, UI, and development..

My Role

Design of a scalable information architecture for a complex catalog.
Development of a contextual navigation system to improve user orientation.
Redesign of the product detail page prioritizing information hierarchy and conversion.
mplementation of adaptive filtering logic based on navigation level.
Coordination between design and development through custom WooCommerce templates.

Client

Specialized retail in electric cycling

Users

Urban, mountain, and road cyclists

Business Goal

Direct-to-consumer sales + workshop services

Key Challenge

Complex catalog with multiple hierarchies

Devices

Desktop-first · Mobile optimized

CMS

WordPress + WooCommerce (custom)

02. Screenshots

Key product screens that illustrate design and usability decisions

*You can click on an inmage or stay on ti so the carousel will stop moving

1 / 9

Sistema de Reserva Inteligente (Wizard)

Home | Taller form

Sistema guiado que recoge información del usuario, bicicleta y tipo de servicio. Diseñado para reducir fricción y mejorar la conversión frente a formularios tradicionales.

2 / 9

Scroll Independiente y CTA Sticky

Single Product Page

Diseño dividido en dos áreas:

65% contenido informativo (imágenes, ficha técnica, acordeones)

35% panel de compra con atributos scrollables y botón de añadir al carrito sticky

Optimizado para mantener el CTA siempre visible.

3 / 9

Tabs + accordion in responsive

Home | Tarifas

Buena experiencia y usabilidad para mostrar información, en este caso de las distintas tarifas. El primer elemento siempre está abierto para indicar al usuario que puede visualizar información pertinente.

4 / 9

Cross-Selling Dinámico

Related products

Carousel infinito de productos relacionados para fomentar venta cruzada sin comprometer la estructura visual del layout principal.

5 / 9

Sistema de Filtros Adaptativo

Ofertas & Marcas

Implementación de filtros dinámicos que se adaptan según el volumen de opciones disponibles, optimizando espacio y usabilidad.

6 / 9

Open Menu Map

Products Category

Resultado del menú abierto en el que, en este caso, nos encontramos en la categoría padre. Al estar en categoría hijo o producto, el menú nos marca dónde nos encontramos con un background color distinto.

7 / 9

Navegación Visual por Categorías

Main Category Product Page

Diseño orientado a facilitar la exploración mediante subcategorías visuales destacadas antes del listado de productos.

8 / 9

Home | Main Products carousel

9 / 9

Sistema de Navegación Contextual

Category Page | e-bikes

Implementación combinada de breadcrumbs clicables y botón contextual de retorno para mejorar orientación del usuario dentro de la jerarquía del catálogo.

03. Challenge / Solutions

Key issues identified and the design decisions made to address them

Challenge

Large volume of products with multiple variables (size, year, color, price).
Deep category hierarchies that were difficult to navigate and understand.
Unclear filtering systems in standard eCommerce setups.
Coexistence of online sales and service offerings (workshop and pricing).
Manual database import from Excel.
Requirement for high performance with minimal plugin usage.

Solution

Layered architecture (category → subcategory → product).
Contextual filtering system based on navigation level.
Visual differentiation between product families.
Dual navigation: exploratory browsing + quick access to key services.
Custom WooCommerce templates built with ACF.
Optimized development using hooks and reusable templates.

04. Context

Comprender el contexto del proyecto, sus limitaciones y los objetivos a alcanzar

Before the final design phase, the project started with:

An unstructured product database (Excel).
Unclear hierarchies between bicycles, equipment, and accessories.
Lack of visual consistency between the menu, categories, and filters.
Risk of visual overload on mobile.

The first step was to organize the information before designing interfaces, standardizing product data to ensure all items could be displayed using a unified taxonomy structure.

05. Core Experience Design

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

Information Arquitecture

The information architecture was designed to reduce cognitive load and help users quickly understand what they can do and where they need to go.

Clear hierarchies were defined between primary and secondary sections, prioritizing the most relevant actions for both the business and the user.

The structure allows the product to scale easily (new categories, features, or flows) without breaking the existing logic or creating friction in navigation.

Navigation & Discovery

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

SVisibility 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. Responsive Design

Adapting the experience across different devices without compromising clarity or usability

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

The same navigation and orientation logic was maintained consistently across all devices.

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 acceder a subcategorías relacionadas. El listado de productos se complementa con un botón superior de filtrado, manteniendo equilibrio entre descubrimiento…

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, optimizando el uso del espacio. Se integran criterios como ordenación, color, año y precio en un entorno estructurado que mantiene…

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 to Cart” fijo en bottom: 0, garantizando visibilidad constante del CTA. La información (descripción, ficha técnica, valoraciones) se organiza en…

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 carga visual y evitando scroll innecesario. La información se organiza por prioridad, permitiendo acceso progresivo sin saturar la interfaz.

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 jerárquica respecto a desktop, manteniendo reconocimiento y continuidad entre dispositivos.

5 / 5

07. Technical Implementation

CHow design decisions translated into a scalable and maintainable solution

Advanced Custom Fields (ACF) Integration
Hook-Based Architecture

Reusable Component System
Manual Product Import Workflow

Lean Plugin Strategy

The architecture allows the project to scale without requiring structural redesigns.

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.

08. 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