The Odyssey Journey

Client

Personal didactic project

Role

Product Designer, UX Writer and Front-End Developer

Timeline

2026

Tools

Next.js 16, React 19, TypeScript, Tailwind CSS, SVG Authoring

Project Overview

Myth, mapped into a product

The project started from a simple ambition: make a canonical text explorable like a digital journey, not just readable like a school summary.

The Odyssey Journey is a personal didactic project built to transform Homer's epic into a spatial, navigable experience. Instead of forcing users into a linear wall of text, I designed multiple entry points: an interactive Mediterranean map, a complete journey timeline, dedicated pages for each location, and a complementary system of characters, mythology, analysis, and articles.

From a product perspective, the work sits at the intersection of editorial design, interaction design, and front-end development. The result is a bilingual learning platform with localized routes, narrative audio, search-friendly static architecture, and a visual language shaped to feel cinematic without sacrificing clarity.

The Challenge

From epic poem to usable product

The design problem was not only visual. It was about translating a dense literary source into an experience that feels intuitive, memorable, and useful for learning.

Dense source material

The Odyssey contains chronology, geography, symbolism, and characters that are difficult to hold together when presented only as long-form educational text.

Storytelling through space

Mapping the voyage meant turning myth into geography without making the interface look generic, noisy, or detached from the emotional rhythm of the journey.

Bilingual discoverability

The platform needed to work in both English and Italian with localized routes, consistent terminology, and SEO-ready pages that remain coherent across languages.

The Solution

A spatial learning experience

I designed the product as a connected system: map, timeline, location pages, character profiles, audio, and editorial depth working as one continuous journey.

Why this structure works

Users can enter from curiosity, geography, chronology, or character and still stay oriented. The product does not force one learning path; it orchestrates several.

Handcrafted interactive map
A custom Mediterranean SVG with animated route reveal, markers, zoom, and cinematic fly-to navigation.
Editorial content system
14 location pages, 12 character profiles, and dedicated sections for mythology, articles, and analysis.
Immersive audio layer
Localized narration per stop plus soundtrack to make the journey feel guided rather than static.
Localized SEO architecture
Metadata, alternate languages, JSON-LD, sitemap, and clean route structure for discoverability.

Design Process

Designing the route

The build moved from editorial framing to map interaction, then to localization, audio, and search architecture.

1

Framing the product model

I started by deciding that the project should not behave like a static essay. The information architecture had to support different intentions: quickly exploring the map, reading the full journey, jumping to a specific place, or understanding the cast of characters.

That led to a modular structure with seven core content areas: home, map, journey, locations, characters, mythology, and analysis/articles. Each area serves a different learning mode, but all of them point back to the same route of Odysseus.

2

Building the map interaction

The core interface is a hand-crafted SVG map of the Mediterranean. I designed the route line to move believably across the sea, avoiding land masses and preserving the feeling of progression from Troy to Ithaca.

Around it, I added marker states, location panels, timeline synchronization, zoom controls, fly-to transitions, and mobile-safe focus management so the interaction feels intentional instead of gimmicky.

3

Content architecture and localization

I structured 14 major stops with short map copy, deeper narrative sections, and consistent metadata. In parallel, I built 12 character profiles and connected them to specific locations or themes within the journey.

The whole experience was then localized for English and Italian with route-specific slugs, dictionaries, and navigation labels, so the two versions feel native rather than translated at the last minute.

4

Immersion, SEO, and publishing

To deepen the educational experience, I integrated per-stop narration sources in both languages and a soundtrack layer that turns the map into a guided scene rather than a silent board.

On the publishing side, I used static pages, semantic markup, metadata, alternate languages, JSON-LD, sitemap, and robots rules to make the project discoverable, indexable, and ready to scale.

Outcomes & Results

Built deliverables

Because this is a personal didactic project, the most meaningful results are clarity, coverage, and the ability to turn a literary source into a reusable digital learning system.

14

Journey Stops

12

Character Profiles

2

Localized Languages

7

Content Areas

Spatial clarity:

The route turns chronology into geography. Users can understand sequence, distance, and escalation by following the line, not by decoding a textbook paragraph.

Editorial depth:

Each stop sits inside a wider content system with characters, mythology, articles, and analysis, making the experience useful for quick browsing as well as deeper study.

Immersive accessibility:

Audio narration, keyboard-friendly controls, progressive route reveal, and readable panels create a didactic layer that feels guided without becoming patronizing.

Search-ready foundation:

Localized routes, metadata, alternate languages, JSON-LD, and static pages make the project legible to both users and search engines, leaving room for future educational expansion.

Design Gallery

Project snapshots

The case study combines interaction design, editorial structure, and publishing foundations into one learning product.

Editorial home page

The landing screen sets the tone with cinematic typography, bilingual entry points, and direct access to the interactive journey.

Interactive journey map

The Mediterranean route is visualized as a navigable field of numbered stops, playback controls, and spatial progression.

Locations archive

Each stop is published as a clear browsable entry, combining literary context, chronology, and route-based scanning.

Character atlas

The cast is grouped into thematic clusters, turning the character section into a navigable narrative atlas rather than a flat list.

Mobile home experience

On mobile, the same visual tone and primary actions are preserved with a compact header and touch-friendly calls to action.

Explore the live project

Open the live experience and navigate the voyage directly through the localized Italian or English version.

Open the live project Back to all projects