Ruyet Olsen
All work

An interactive, educational map of historical locations in Eindhoven for Stichting 18 September. I was the main developer and built it from scratch in HTML, CSS and JavaScript.

Role
Main developer
Context
Team project, Stichting 18 September
Focus
Front-end development, Interaction design, Usability
The interactive map of Eindhoven on a laptop, with location markers spread across the city.

The project

Stichting 18 September wanted an interactive, educational map of historical locations in Eindhoven.

We designed it as a team. I was the main developer and built the map itself without frameworks, so every interaction is custom code.

Building the map

The map had to work fluidly across devices, so exploring it feels natural on any screen.

  1. 01

    Drag to explore

    Draggable navigation, so you can move around the city like a real map.

  2. 02

    Zoom that fits the screen

    Smooth zooming based on the screen size, with a custom scaling system that prevents distortion and overflow.

  3. 03

    Stories on the map

    Interactive markers open historical information and link to directions in Google Maps.

A marker opened on the map: a pop-up with a historical story, a black-and-white portrait photo and a legend of location types below.
Selecting a marker opens the story behind that location on top of the map.

Designing together

The design followed a full process: low-fidelity sketches, individual mid-fidelity prototypes in Figma, then merging the best ideas into high-fidelity versions that we compared through A/B testing. The feedback mainly made the map clearer and easier to navigate.

Challenges and lessons

The hardest part was technical: merging different codebases from the team, and debugging conflicts between the zoom behavior and the pop-up styling.

Solving those taught me to balance usability with performance, and pushed both my problem-solving and my front-end skills.