Interactive story experience
3 minute readThe Fairy Sisters of Evaland
An illustrated story world connecting a chapter reader, character discovery, artwork, an interactive map and a persistent music player.
Overview
The project at a glance
The problem Evaland has stories, places, characters and music. Visitors need several ways to explore them without losing their place in the world.
What I built A story website with a focused chapter reader, filtered character and artwork directories, an interactive map with chapter links, a persistent music player and language selection.
What needed care Rich artwork and different media need a consistent navigation structure and a pace that suits the gentle character of the project.
What it makes possible Visitors can enter through a story, a character, the map or music, with room for new material as Evaland grows.
The brief
Give an imaginative world several ways in
The Fairy Sisters of Evaland brings together a book, its characters, illustrated places and music. The website needed to make that material approachable as one connected world, while preserving the gentle tone of a story centred on compassion, wisdom, joy and love.
The homepage introduces the four sisters through a night-sky setting and gives visitors two immediate paths: read the story or explore Evaland. A consistent navigation links the book, characters, gallery, music and map, so visitors can follow their curiosity without losing the larger context.
- An illustrated introduction to Evaland
- Reading and exploration as parallel entry points
- A shared navigation across different media
- Four sisters introduced through their qualities
The book
Move from discovery into focused reading
The story page introduces Book One before presenting a browsable table of contents. Visitors can start at the beginning or choose an entry, giving both first-time readers and returning visitors a clear route into the material.
Opening an entry creates a focused reader with its position in the book, previous and next controls, a table-of-contents shortcut and language selection. This separates the act of reading from the broader discovery page while keeping chapter navigation close at hand.
- A book introduction and browsable contents
- A focused chapter reader
- Position, chapter navigation and language controls
- Start at the beginning or choose an entry
Characters and artwork
Make the people and places easy to discover
The character directory combines illustrated portraits with each being’s role, qualities and location. Category filters distinguish the fairy sisters, visitors from Earth, companions and the wider community, helping visitors explore the cast in manageable groups.
The gallery extends that visual vocabulary into landscapes and moments from the world. Thematic filters organise artwork around places, communities and characters, and images open into a full-screen viewer. Together, these pages offer a visual route into the story for visitors who prefer to explore before reading.
- Illustrated profiles with role and location context
- Character groups and thematic artwork filters
- Full-screen artwork viewing
- A visual route into the story before reading
The map
Connect geography with the story
The illustrated map turns Evaland’s geography into an interactive entry point. Named markers reveal location descriptions and associated characters, while contextual chapter links connect a place back to the book. The location list gives visitors another way to select a destination.
A full-page view gives the artwork more room and retains markers, location details and navigation controls. This keeps the map useful as both an atmospheric illustration and a practical guide through the world.
- Selectable locations with contextual details
- Places connected to characters and chapters
- A full-page exploration view
- A location list alongside the illustrated markers
Music and continuity
Let the world continue through sound
The music page presents tracks as part of Evaland’s atmosphere. Selecting a track exposes playback and seeking controls in its card and in a persistent player, with previous and next tracks, volume and dismissal controls.
Reading, looking and listening share the same visual language and navigation. Language selection and theme controls remain available across the experience. The result is a story website with several coherent ways to explore its material, rather than a single linear introduction.
- Track cards with playback and seeking
- A persistent player with track and volume controls
- Consistent navigation, language and theme controls
- Several connected ways to explore Evaland
The result
Visitors can enter through a story, a character, the map or music, with room for new material as Evaland grows.
Good work starts with the right conversation.
Let's talk about your projectGallery
The project in pictures
A different challenge. The same care.
View all work
Presence Box
A product concept website with Core/Pro comparison, an interactive 3D design studio and a configuration-led enquiry.
Discover the project