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.
01. Snapshot
02. Screenshots
03. Challenge / Solutions
- 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.
- 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
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.
05. Core Experience Design
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
- 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.
