2026
Web (Desktop & Mobile)
Titan Cycling

E-commerce platform for electric bicycles, gear, and accessories, designed to handle a large product catalog with complex filtering, category hierarchies, and clear navigation paths for high-intent users.

Tools
  • Type: eCommerce · woocommerce
  • Role: ux/ui Designer · Frontend · Data Integration
  • Scope: IA · UX flows · UI design · Filters · PDP · Responsive · Performance

01. Snapshot

Resumen rápido del proyecto, alcance, rol y contexto general
Client
Retail especializado en ciclismo eléctrico
Users
Ciclistas urbanos, montaña y carretera
Business Goal
Venta directa + servicios de taller
Key Challenge
Catálogo complejo con múltiples jerarquías
Devices
Desktop-first · Mobile optimized
CMS
WordPress + WooCommerce (custom)

02. Screenshots

Pantallas clave del producto que ilustran decisiones de diseño y usabilidad
Pantallas clave del producto que ilustran decisiones de diseño y usabilidad

03. Challenge / Solutions

Problemas clave detectados y decisiones de diseño tomadas para resolverlos
Challenge
  • Gran volumen de productos con múltiples variables (talla, año, color, precio).
  • Jerarquías de categorías profundas difíciles de entender.
  • Filtros poco claros en eCommerce estándar.
  • Convivencia de venta online + servicios (taller y tarifas).
  • Importación manual de base de datos desde Excel.
  • Necesidad de alto rendimiento con mínimo uso de plugins.
Solution
  • Arquitectura clara por niveles (categoría → subcategoría → producto).
  • Sistema de filtros contextual según el nivel de navegación.
  • Diferenciación visual entre familias de productos.
  • Navegación dual: exploración + acceso rápido a servicios clave.
  • Plantillas WooCommerce personalizadas con ACF.
  • Desarrollo optimizado usando hooks y templates reutilizables.

04. Context

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

Antes del diseño final, el proyecto partía de:

  • Base de datos de productos no estructurada (Excel).
  • Jerarquías poco claras entre bicicletas, equipamiento y accesorios.
  • Falta de relación visual entre menú, categorías y filtros.
  • Riesgo de saturación visual en mobile.

El primer paso fue ordenar la información antes de diseñar interfaces, homogeneizar la información de los productos para mostrarlos todos usando un mismo archivo de taxonomía.

ampliar

05. Core Experience Design

Cómo se estructura, navega y experimenta el producto desde el punto de vista del usuario.

La arquitectura de la información se diseñó para reducir la carga cognitiva y facilitar que el usuario entienda rápidamente qué puede hacer y dónde debe ir.

Se definieron jerarquías claras entre secciones principales y secundarias, priorizando las acciones más relevantes para el negocio y el usuario.

La estructura permite escalar el producto fácilmente (nuevas categorías, features o flujos) sin romper la lógica existente ni generar fricción en la navegación.

La navegación fue diseñada para que el usuario siempre tenga claro dónde se encuentra y qué acciones puede realizar en cada momento.

Se priorizó la visibilidad de las secciones clave y la consistencia entre estados, evitando cambios inesperados de comportamiento entre pantallas.

Los patrones de descubrimiento ayudan al usuario a encontrar nuevas funcionalidades de forma progresiva, sin necesidad de explicaciones explícitas.

Se definieron patrones de interacción consistentes para garantizar previsibilidad y fluidez en el uso del producto.

Componentes como botones, cards, dropdowns y estados interactivos responden siempre de la misma manera, reforzando el aprendizaje por repetición.

El sistema favorece el “learn by doing”, permitiendo que el usuario entienda cómo funciona el producto a través de la interacción, no de la explicación.

La experiencia de detalle se diseñó para mostrar información compleja de forma progresiva, evitando saturar al usuario.

El contenido se organiza por niveles de importancia, permitiendo profundizar solo cuando es necesario.

Este enfoque mejora la comprensión del valor, reduce errores y aumenta la confianza del usuario en la toma de decisiones.

06. Responsive Design

Adaptación de la experiencia a distintos dispositivos sin perder claridad ni usabilidad
  • Scroll natural.
  • Filtros colapsables.
  • CTAs sticky accesibles.
  • Jerarquía visual clara incluso en pantallas pequeñas.

Se mantuvo la misma lógica de navegación y orientación en todos los dispositivos.