Process
Three pages concentrated the greatest design effort: the home, the subscription page and the trainer compatibility page, the most complex in the project due to the number of devices and the need to guide the user towards a quick and frictionless answer.
- Video hero
- Subscription page
- Trainer compatibility
- Search filter
- Recommended plan
Two visitor profiles with different needs arrive at bkool.com. The first is the cyclist who discovers BKOOL for the first time, they don't know exactly what it is, they need to understand the value proposition quickly and decide whether it's worth subscribing. The second is the cyclist who already knows BKOOL and arrives with a specific task: checking whether their training trainer is compatible with the app before subscribing or upgrading their equipment. For the first, the challenge is clarity and conversion. For the second, the challenge is efficiency and orientation, hundreds of devices, immediate answer.
Three flows defined the design priorities. The first: the home, which elements appear in the first half before scrolling, how the video hero communicates the dynamism of the platform and where conversion buttons are placed to be visible without being aggressive. The second: the subscription page, how to present three plans without repeating content, highlight the benefits of each and visually guide the user towards the annual plan without them feeling forced. The third: the compatibility page, how to orient a user among hundreds of devices quickly and efficiently, and what to do when their device is not compatible.
On the compatibility page, the first exploration was a static table with all devices organised by category. It was discarded because with hundreds of entries the table was impossible to navigate without search, the user had to read row by row. The solution was a filter that worked simultaneously as a select and as an input: the user could type their device name and the selector showed real-time matches, with devices grouped by brand. On the subscription page, a comparative table of the three plans was explored. It was discarded because it generated too much simultaneous information and diluted the focus on the recommended plan. Three independent cards with the benefits of each plan proved clearer and easier to scan.
The compatibility page required the most information architecture work. Devices were organised in three levels: device type (trainers, cadence sensors, speed sensors), brand and model. Each entry showed compatibility with the app, device description and a direct link to how to connect it. For incompatible devices, a specific state was designed with alternatives, never a dead end.
