Proceso
Tres páginas concentraron el mayor esfuerzo de diseño: el home, la página de suscripción y la página de compatibilidad de rodillos, la más compleja del proyecto por la cantidad de dispositivos y la necesidad de orientar al usuario hacia una respuesta rápida y sin fricción.
- Hero con vídeo
- Página de suscripción
- Compatibilidad de rodillos
- Filtro con búsqueda
- Plan recomendado
Dos perfiles de visitante con necesidades distintas llegan a bkool.com. El primero es el ciclista que descubre BKOOL por primera vez, no sabe exactamente qué es, necesita entender la propuesta de valor rápido y decidir si vale la pena suscribirse. El segundo es el ciclista que ya conoce BKOOL y llega con una tarea concreta: comprobar si su rodillo de entrenamiento es compatible con la app antes de suscribirse o actualizar su equipo. Para el primero, el reto es claridad y conversión. Para el segundo, el reto es eficiencia y orientación, cientos de dispositivos, respuesta inmediata.
Tres flujos definieron las prioridades de diseño. El primero: el home, qué elementos aparecen en el primer half antes del scroll, cómo el hero con vídeo comunica el dinamismo de la plataforma y dónde se colocan los botones de conversión para que sean visibles sin ser agresivos. El segundo: la página de suscripción, cómo presentar tres planes sin repetir contenido, destacar los beneficios de cada uno y dirigir visualmente al usuario hacia el plan anual sin que sienta que se le está forzando. El tercero: la página de compatibilidad, cómo orientar a un usuario entre cientos de dispositivos de forma rápida y eficiente, y qué hacer cuando su dispositivo no es compatible.
En la página de compatibilidad, la primera exploración fue una tabla estática con todos los dispositivos organizados por categoría. Se descartó porque con cientos de entradas la tabla era imposible de navegar sin búsqueda, el usuario tenía que leer fila por fila. La solución fue un filtro que funcionaba simultáneamente como select y como input: el usuario podía escribir el nombre de su dispositivo y el selector mostraba coincidencias en tiempo real, con los dispositivos agrupados por marca. En la página de suscripción, se exploró mostrar una tabla comparativa de los tres planes. Se descartó porque generaba demasiada información simultánea y diluía el foco en el plan recomendado. Tres cards independientes con los beneficios de cada plan resultaron más claras y más fáciles de escanear.
La página de compatibilidad fue la que más trabajo de arquitectura de información requirió. Los dispositivos se organizaron en tres niveles: tipo de dispositivo (rodillos, sensores de cadencia, sensores de velocidad), marca y modelo. Cada entrada mostraba compatibilidad con la app, descripción del dispositivo y enlace directo a cómo conectarlo. Para los dispositivos no compatibles, se diseñó un estado específico con alternativas, nunca un callejón sin salida.
