Ulfa Octaviani

All projects

Personal

London Cherry Blossom Map

A map of where and when cherry blossoms are blooming across London, built quickly with AI and checked against what people were posting in real time.

Role
Design, development and testing
Timeline
Mar 2026
Languages
HTML, CSS, JavaScript
Methods and tools
Leaflet.js, AI-assisted coding, Open data
Kew GardensSwiss CottageBattersea Park
In bloomBudding soonNot yet

Process

  1. Frame the problem

    Identified the gap between what people needed, which was real-time bloom status, and what existed, which was static pins.

  2. Prototype with one prompt

    Asked an AI coding tool to "create a map that shows cherry blossom location in London and timing (whether they have bloomed or not)" with the easiest implementation.

  3. Test against the real world

    Cross-checked the map against Kew Gardens' Instagram, the

  4. Iterate on accuracy

    Added Battersea Park and Swiss Cottage, which were blooming but missing, and refined the bloom status labels.

  5. Scope the next version

    Mapped out the data APIs, user interactions and database a real forecast would need for next season.

The problem

Cherry blossom season is one of London's most searched-for seasonal events, but existing resources were static, inaccurate or hard to find. The best public option was a crowd-edited Google Map with static pins, with no way to tell whether a park had peaked or not yet bloomed. Climate change shifts bloom timing every year, so forecasts based on historical averages are unreliable. The only accurate source was social media, in real time.

Japan's annual sakura forecast, which combines temperature data with species-specific bloom models, served as a reference for what bloom prediction could look like.

The London Cherry Blossom Map on 10 March 2026. A map of London with pins in three colours: pink for in bloom, amber for budding soon and blue for not yet. Filter buttons on the right show all spots or each status.
The map on 10 March 2026. Each spot is marked in bloom, budding soon or not yet, and can be filtered by status.

Iterations

Iteration 1 came from a single prompt. It showed location pins and rough timing labels and looked reasonable, which raised the real question: how accurate was it?

A chat message reading: create a map that shows cherry blossom location in London and timing (whether they have bloomed or not). with the easiest implementation.
The single prompt behind the first version.

Iteration 2 followed manual testing against Instagram. Battersea Park was blooming, and Swiss Cottage, which wasn't on any existing map, was blooming too. I added both with accurate statuses, which raised a new question: how could the map update in real time?

What I learned

Social media was the most accurate real-time source. It beat every static dataset for current bloom status, so a real product needs community submissions or social listening.

Unlisted locations are a significant gap. Swiss Cottage was missing from every map, so user-submitted locations would be essential.

AI coding is fast for prototyping, not for accuracy. A usable map took minutes, but manual validation was still essential.

The interesting problem is forecasting. Showing current status is useful, but predicting next week's peak bloom from temperature data would be new for London.

Next steps

Define the core user task first, whether that's reporting a bloom, saving a park or getting notified at peak. Then explore data sources such as weather APIs, iNaturalist observations or community submissions. Recording bloom dates this season would start a London-specific dataset, which next year's forecasting model would depend on.