Skip to content
SIEBRANDS

Bikemap Route Planner

Unifying multiple separate web applications into a single web app.

Bikemap Route Planner

Introduction

Bikemap’s web-based route planning tools — the “AB-Planner” and “Route Editor” — offered similar functionalities, leading to user confusion. Both relied on external services, hindering innovation. The initiative to create a unified route planner began in Q3 2021 and evolved through my roles as both Product Designer and Product Manager.

Project Goals

Business and Innovation

Break free from an expensive service provider, facilitating faster innovation. Streamline the user experience by offering a single, intuitive tool for route creation and editing.

UX Enhancement

Reduce user confusion and align web and mobile tools visually. Focus on commuters, address the legacy AB Planner’s outdated appearance, and ensure cross-platform consistency.

Research and Discovery

  • External providers hindered quick innovation
  • Users of one tool missed features from the other
  • AB Planner’s outdated appearance affected trust
  • Inflexible geocoder frustrated users
  • Map style discrepancies between web and mobile

Target Audience

A small but engaged user base used the web planners frequently. AB Planner users enjoyed long tours — some planning routes through entire countries. Route Editor users preferred cycling through forests and trails, drawing routes manually.

Example Persona document
Example Persona created at Bikemap to understand our user base.

Initial Designs

Initial wireframe combining AB Planner and Route Editor features
Initial wireframe combining all features into one tool.
Wireframe with expanded sidebar sections
Expanded sidebar with stats, routing options, and waypoints.

Testing and Validation

  • Tested every design iteration with internal and external users
  • Used “Maze” to test prototypes and track user paths
  • Ran a beta phase with old and new tools in parallel
  • Users appreciated points of interest (deferred due to scope)
  • Stats section engagement depended on default visibility

Implementation

Divided the initiative into several epics: Web App Setup, Legacy AB Planner Reconstruction, Import Tool Transition, AB Planner Replacement, Routing Profiles, Route Detail Page Migration, and Legacy Editor Shutdown.

The overarching vision was to empower faster innovation without reliance on external providers.

Results

  • Successful launch of unified Web App
  • Consistent usage metrics through the transition
  • Eliminated nearly all third-party dependencies
  • Enhanced user analytics and feature tracking
  • Positive user response