Dreamscape Learn Guidebook

Role

Creative Direction, UI/UX Design

Platform

Web App

Year

2024

Team

Solo designer, 1 developer, 1 PM

Tools

Figma, Spline

See it live

Explore the 3D map

Overview

Students visiting Dreamscape Learn get their own set of interactive tools for exploring the worlds they’ll visit in VR, with summaries of the environments and the creatures they’ll meet.

I pioneered using Spline at MEDL, which let my team take on much of what would normally be development work. We built the web-safe, interactive 3D sanctuary map in Spline, so the developers only needed to add the front-end UI.

01Courses

A guidebook for every student

Each student has their own guidebook listing the courses available to them, alongside a 3D map of the sanctuary they’ll explore in VR.

02Missions

Course content, organized by act

Courses break down into missions and missions into acts, with the video and mission memo for every act in one place, plus field resources like an intro video and welcome letter.

03Field Guide

Habitats and the species in them

The Field Guide profiles each habitat in the sanctuary, including its biome and description, and the species that live there.

04Sanctuary Map

A 3D map built in Spline

Selecting a region on the map opens its details, stats, and species. The map itself was built in Spline, and the development team only needed to add the front-end UI on top.

05Outcome

Shipped

The Guidebook launched for Dreamscape Learn students, with the 3D sanctuary map built in Spline.

Explore the map

The 3D sanctuary map is live in Spline. Hover over a region to highlight it, and click to zoom in.

Explore the 3D map