Fuel Prices, Mapped

2024

A consumer app for finding the cheapest fuel nearby in Germany, rebuilt around a live map. Design system, product and front-end, shipped end-to-end and solo.

  • A consumer app for finding the cheapest fuel nearby in Germany, built as a side project in my own time.
  • Built the design system first, so a full redesign stays consistent and every new view is cheap to ship.
  • Coded the production front-end with AI, on the HERE Maps API.
  • A live map where the cheapest station in view turns green and stations cluster as you zoom.

Context

An existing German service for comparing fuel prices needed a redesign and a rebuild.

  • The cheapest fuel nearby

    Anyone uses it to find the cheapest place to fill up.

  • All of Germany

    Every station in range, on one map.

  • A side project

    Designed and built in my own time.

Problem

  • 10

    year-old design

    Outdated, and built on Google Maps.

  • Thousands of stations

    Across Germany, they would bury the map.

My role

Solo and end to end: designer and engineer in the same loop.

  1. Design system

    Built first, before any screen.

  2. Product design

    The map experience, from search to the one station you pick.

  3. Front-end

    Coded with AI on the HERE Maps API and shipped to production.

Process

System first

I built the system before the screens, so a full redesign stays consistent and every new view is cheap to ship.

Tokens, then components, then screens: the design system as the backbone.

One loop, no handoff

I coded the live map myself on the HERE Maps API, so design decisions met the real map straight away.

Solution

The map is the product

Challenge
People come for one answer: where to fill up nearby.
Solution
The whole experience is a live HERE map of every station in range. Search, fuel type and radius narrow it down to one personal decision.
All stations nearby, then fuel type, then radius: one pin left.

The answer finds you

Challenge
In a field of price pins, every number asks to be read.
Solution
The cheapest pin in view turns green, so you see where to go before you read a single number.
Blue pins for every price, green for the cheapest in view.

Density, made legible

Challenge
Thousands of stations across Germany would bury the map.
Solution
Stations collapse into counted clusters that break apart as you zoom: a problem solved in design and code at once.
A dense scatter becomes a few counted clusters.

Outcome

Shipped solo, from design to production code.

The interface and the production front-end, both mine.

One system under every view.

Rebuilt on a design system, so the redesign stays consistent and cheap to extend.

What I learned

  1. Start with the system

    On a side project with limited hours, the design system first made every new view cheap to ship.

  2. Design and code in one loop

    Building the front-end myself with AI meant nothing was lost in a handoff.

All work

Summary

Fuel Prices, Mapped

Problem
A consumer app for finding the cheapest fuel nearby in Germany ran on a ten-year-old design built on Google Maps. It needed a redesign and a rebuild, and thousands of stations would bury the map.
Role
Solo: the design system first, then the product, then the front-end, coded with AI against the HERE Maps API.
Solution
  • The whole experience is a live map. Search, fuel type and radius narrow every station in range down to one.
  • The cheapest pin in view turns green.
  • Stations collapse into counted clusters that break apart as you zoom.
Outcome
Designed and shipped the whole product solo, interface and production front-end code, on a design system that keeps a redesign consistent and cheap to extend.

Drafted with AI, checked by Kyrylo.