Better routes. More meaningful miles.
Summary
Stride is a concept running-route product. Instead of recording what happened, it helps runners decide what to run: how far, how hilly, loop or point-to-point, and what kind of session it suits. Maps, typography and route geometry are the design material. All data shown is labelled demonstration data.
Product context
Most running apps are built around recording and sharing activities. The decisions a runner makes before a session, such as distance, elevation, surface, convenience and whether the route loops back, are handled by general-purpose map tools that were designed for navigation, not training.
Stride explores a product for recreational runners, people training for 5K to marathon distances, and runners in unfamiliar cities. It is not a clone of an existing service and does not present itself as an operational fitness product.
The challenge
Make route selection a single coherent experience: pick a target distance and session type, see candidate routes with elevation and shape at a glance, then understand one route in detail before leaving the house.
The interface has to stay honest. Surface data is only shown where verified data would exist, and nothing implies that safety, traffic risk or training advice has been validated.
- Vondelpark loop 10.2 km · 38 m ↑ · Loop
- Amstel riverside 10.8 km · 21 m ↑ · Point-to-point
- Default 10.2 km · 38 m ↑
- Selected 10.2 km · 38 m ↑ 96% fit
Product direction
A dark, precise interface where the route is the hero. One lime signal colour marks the selected route and primary actions; a cool blue marks alternatives. Grotesk type with tabular numerals keeps distances, gradients and times aligned.
Route geometry is treated as a graphic element. Loops are drawn as closed shapes with a start marker; point-to-point routes show direction. The elevation chart sits directly beneath the map and shares its horizontal scale so a climb can be read in both.
Training context is a light layer, not a coach. Session categories (easy, long, tempo, hills) change the ranking of candidate routes; they never make medical or safety claims.
Selected design details
Distance selection
A direct manipulation control that snaps to common training distances.
- Vondelpark loop 10.2 km · 38 m ↑ · Loop · Easy 96% fit
- Amstel riverside 10.8 km · 21 m ↑ · Point-to-point · Long 88% fit
- Westerpark hills 9.6 km · 112 m ↑ · Loop · Hills 74% fit
Route discovery
Candidate routes ranked by fit to the chosen distance and session type.
Elevation chart
Shares the map’s horizontal scale; gradient bands highlight climbs.
Saved collections
Routes grouped by place and purpose, with GPX export planned.
Systems and technical exploration
A future prototype would use React and TypeScript with MapLibre for rendering, a verified routing-data provider for candidate generation, geospatial interaction for route editing, GPX export and explicit route state management.
The portfolio case study stops at a realistic UI demonstration with clearly labelled demonstration data. None of the integrations above exist yet.
Next-stage opportunities
- Build a technical prototype that generates loop routes for a target distance from real map data.
- Design the training-context layer with a small group of runners and a coach for feedback.
- Add saved collections with offline access and GPX export.
Concept project. Independently initiated. Not a client commission. All names, data and content are fictional.