Worldwander

IMMERSIVE INSTALLATION / STUDENT PROJECT / 2024

Transporting users to unique environments through immersive worldbuilding.

Worldwander

IMMERSIVE INSTALLATION / STUDENT PROJECT / 2024

Transporting users to unique environments through immersive worldbuilding.

Worldwander

IMMERSIVE INSTALLATION / STUDENT PROJECT / 2024

Transporting users to unique environments through immersive worldbuilding.

Project Summary

//

Project Summary

//

Project Summary

//

THE PROBLEM {

I wanted to learn how to design an immersive experience that keeps people engaged.

WHY IT MATTERS {

Engagement in experiential design is crucial, and it depends on how well visuals, sound, and interaction work together to hold attention.

THE SOLUTION {

Worldwander blends animated environments with original soundscapes, allowing users to move through a sequence of distinct worlds.

Skills Used

Motion Graphics Sound Design Interaction Design

Team

Solo

Timeline

Jan - Apr 2024

Tools

Adobe Illustrator After Effects p5.js / VS Code

THE PROBLEM {

I wanted to learn how to design an immersive experience that keeps people engaged.

WHY IT MATTERS {

Engagement in experiential design is crucial, and it depends on how well visuals, sound, and interaction work together to hold attention.

THE SOLUTION {

Worldwander blends animated environments with original soundscapes, allowing users to move through a sequence of distinct worlds.

Skills Used

Motion Graphics Sound Design Interaction Design

Team

Solo

Timeline

Jan - Apr 2024

Tools

Adobe Illustrator After Effects p5.js / VS Code

THE PROBLEM {

I wanted to learn how to design an immersive experience that keeps people engaged.

WHY IT MATTERS {

Engagement in experiential design is crucial, and it depends on how well visuals, sound, and interaction work together to hold attention.

THE SOLUTION {

Worldwander blends animated environments with original soundscapes, allowing users to move through a sequence of distinct worlds.

Skills Used

Motion Graphics Sound Design Interaction Design

Team

Solo

Timeline

Jan - Apr 2024

Tools

Adobe Illustrator After Effects p5.js / VS Code

Final Deliverables

//

Final Deliverables

//

Final Deliverables

//

Immersive Installation – "From World to World”

Worldwander is an installation where users travel between three animated worlds; hills, ocean, and space. Each world is supported by original sound design, giving users a complete audiovisual experience. The interaction stays intentionally simple: a single click on the mouse triggers a transition animation and transports you to the next world.

Studio Demo Video & Photos

Immersive Installation – "From World to World”

Worldwander is an installation where users travel between three animated worlds; hills, ocean, and space. Each world is supported by original sound design, giving users a complete audiovisual experience. The interaction stays intentionally simple: a single click on the mouse triggers a transition animation and transports you to the next world.

Studio Demo Video & Photos

Immersive Installation – "From World to World”

Worldwander is an installation where users travel between three animated worlds; hills, ocean, and space. Each world is supported by original sound design, giving users a complete audiovisual experience. The interaction stays intentionally simple: a single click on the mouse triggers a transition animation and transports you to the next world.

Studio Demo Video & Photos

outcomes

outcomes

outcomes

1

82% Found Experience Immersive

Audience feedback expressed strong emotional engagement with the worlds, emphasizing the effectiveness of the experience.

1

82% Found Experience Immersive

Audience feedback expressed strong emotional engagement with the worlds, emphasizing the effectiveness of the experience.

1

82% Found Experience Immersive

Audience feedback expressed strong emotional engagement with the worlds, emphasizing the effectiveness of the experience.

2

2m 10s Average Session Time

Visitors spent more time interacting than expected, indicating high engagement and strong replay value.

2

2m 10s Average Session Time

Visitors spent more time interacting than expected, indicating high engagement and strong replay value.

2

2m 10s Average Session Time

Visitors spent more time interacting than expected, indicating high engagement and strong replay value.

3

High Interest in Expansion

Many users suggested more controls, VR/360 implementation, or a world-selection menu, showing potential for future development.

3

High Interest in Expansion

Many users suggested more controls, VR/360 implementation, or a world-selection menu, showing potential for future development.

3

High Interest in Expansion

Many users suggested more controls, VR/360 implementation, or a world-selection menu, showing potential for future development.

the process

the process

the process

phase 1

Conceptualizing Worlds

//

phase 1

Conceptualizing Worlds

//

phase 1

Conceptualizing Worlds

//

Choosing Distinct Themes

I started by exploring a range of potential environments and refining them into a set of three that felt visually and thematically different. I used AI-generated references to experiment with different animation styles and moods until I landed on a direction that felt cohesive.

Thematic AI-Generated Environments for Inspiration

Thematic AI-Generated Environments for Inspiration

Thematic AI-Generated Environments for Inspiration

phase 2

Building Worlds

//

phase 2

Building Worlds

//

phase 2

Building Worlds

//

Illustrating Characters and Objects

I designed all characters, scenery, and environmental elements in Adobe Illustrator. Each world had its own visual language, influenced by colour, texture, and movement.

Landscapes & Soundscapes

I compiled the assets into themed animation projects in After Effects, adding movement keyframes, manipulating the camera, applying textures, and layering various effects. In total, I created three fully detailed, thematic 2D animated environments.


I then used Ableton Live to produce a 3-5 minute themed music piece to complement each environment, enhancing the overall atmosphere. The goal was for each world's music and visuals to evoke as similar feelings as possible.

After Effects Workspace

After Effects Workspace

After Effects Workspace

Ableton Live Workspace

Ableton Live Workspace

Ableton Live Workspace

phase 3

Bringing the Environments to Life

//

phase 3

Bringing the Environments to Life

//

phase 3

Bringing the Environments to Life

//

Underwater

Visuals: Swim from the ocean surface down into the deep sea, with different creatures appearing as the depth changes.


Music: Dreamy arpeggiating keys and soft synths with a muffled EQ to mimic the feel of being underwater.

0:00/1:34

Outer Space

Visuals: Explore the surface of a foreign planet while its moon and nearby planets and galaxies fly by.


Music: Echoing keys, deep bass, intense synths, and lots of effects to create an otherworldly atmosphere.

0:00/1:34

Rolling Hills

Visuals: Venture through a mountainous landscape that reveals wildlife and scenic views along the way.


Music: A calming mix of piano, shakers, and flute-like melodies inspired by nature.

0:00/1:34

Between Worlds

A short transition video used while travelling from one world environment to the next.

phase 4

Adding Physical Interactivity

//

phase 4

Adding Physical Interactivity

//

phase 4

Adding Physical Interactivity

//

Coding a Seamless Audiovisual Experience

I wanted users to be able to seamlessly switch between animated worlds with a single click, so I coded the transition to a mouse press. As each animation takes the viewer through a different world, the corresponding soundtrack plays alongside it.

Visual Studio Code Setup

Visual Studio Code Setup

Visual Studio Code Setup

phase 5

INSTALLATION

//

phase 5

INSTALLATION

//

phase 5

INSTALLATION

//

Final Studio Showcase

Worldwander was installed in a dark room with a single screen and a podium-mounted mouse. Users entered to find themselves inside a looping animated environment with matching music. A click on the mouse triggered a short transition and transported them into the next world.


Seeing people interact with the installation made its purpose clearer. Many users imagined it being implemented in VR or as ambient visuals on a TV. The most common request was more control, like picking a world from a menu or navigating both directions instead of only cycling forward.

Testing confirmed that the mood worked, the interaction was fun, and people wanted even more room to explore.

Studio Demo Video

Studio Demo Video

Studio Demo Video

what i learned

what i learned

what i learned

1

Balancing Simplicity and Control

The single-click interaction worked well, but users clearly wanted more freedom. Comments about choosing worlds from a menu or moving backward and forward showed me the importance of pairing simple controls with optional depth.

1

Balancing Simplicity and Control

The single-click interaction worked well, but users clearly wanted more freedom. Comments about choosing worlds from a menu or moving backward and forward showed me the importance of pairing simple controls with optional depth.

1

Balancing Simplicity and Control

The single-click interaction worked well, but users clearly wanted more freedom. Comments about choosing worlds from a menu or moving backward and forward showed me the importance of pairing simple controls with optional depth.

2

Sound Makes the World Feel Real

The music carried a lot of the atmosphere. Watching people respond reinforced how much sound design shapes presence, and showed me where subtle effects or reactive audio could push the immersion further.

2

Sound Makes the World Feel Real

The music carried a lot of the atmosphere. Watching people respond reinforced how much sound design shapes presence, and showed me where subtle effects or reactive audio could push the immersion further.

2

Sound Makes the World Feel Real

The music carried a lot of the atmosphere. Watching people respond reinforced how much sound design shapes presence, and showed me where subtle effects or reactive audio could push the immersion further.

3

Knowing When to Stop

Working in After Effects taught me how easy it is to get stuck tweaking details. Learning to stop at a clear and functional stage helped keep the project on track.

3

Knowing When to Stop

Working in After Effects taught me how easy it is to get stuck tweaking details. Learning to stop at a clear and functional stage helped keep the project on track.

3

Knowing When to Stop

Working in After Effects taught me how easy it is to get stuck tweaking details. Learning to stop at a clear and functional stage helped keep the project on track.

Interested in seeing more?

There's more to explore...

Interested in seeing more?

There's more to explore...

Interested in seeing more?

There's more to explore...

Create a free website with Framer, the website builder loved by startups, designers and agencies.