New route planner design

So I created a very basic Figma wireframe for the Route planner web application.

I took inspiration from the layout and designs of Komoot, Strava and Ride with GPS.

New route planner design

Here are my next steps:

  1. Build out the side nav and it’s components
  2. Build out the top nav and it’s components.
  3. Hook up to the Google elevation API (or some other API) to get the elevation profile for the route.
  4. Display the elevation profile on the bottom tab and make it interactive.
  5. Figure out how to get and store data on the road surfaces. (I’m pretty sure Mapbox can return this but I need to store it, which will probably require changing my Route objects schema)
  6. Figure out how to create functionality to search for addresses and places using the Mapbox API.