Project Details / Full UI/UX Process

EduSphere

A spatial learning management system that organizes lessons, progress, and immersive modules into a focused dark editorial learning environment.

Live Preview

Role

UI/UX Design & Framer Development

Year

2026

Timeline

9 weeks

UI/UX Case Study

Project Summary

Challenge

Complex product workflows need sharper hierarchy and clearer decision paths.

Solution

An immersive LMS that organizes course maps, progress rings, spatial modules, and lesson previews into a focused dark workspace.

Category

Spatial Learning LMS

My Role

UI/UX Design & Framer Development

Tool Used

Figma · Framer · Spatial UX

Design Process

Moodboard

Persona

Wire-frames

Hi-Fi

Prototype

Moodboard

Color

Blue

Keywords

Spatial · Learning paths · Modules · Progress

Content

Deep black learning spaces, orbital module maps, blue-violet depth glows, card-based lessons, and abstract 3D grid cues.

Dark technical control surface and interface details

Aa

Clash Grotesk + Urbanist

#2196F3

#00BCD4

#00796B

Persona

NAME

Yousef Al-Mansour

age

27

Occupation

Learning Experience Designer

Location

Doha, Qatar

Education

Instructional Technology

Goals

Understand learning progress, enter immersive modules quickly, review feedback, and maintain orientation across a non-linear curriculum.

Goals

Understand learning progress, enter immersive modules quickly, review feedback, and maintain orientation across a non-linear curriculum.

Pain Points

Learning platforms can feel flat, cluttered, repetitive, and disconnected from immersive or spatial content experiences.

Pain Points

Learning platforms can feel flat, cluttered, repetitive, and disconnected from immersive or spatial content experiences.

Wire-frames

Hi-fi

EduSphere high-fidelity immersive learning dashboard prototype

The Design

EduSphere high-fidelity immersive learning dashboard prototype

Spatial Knowledge Atlas

This interface serves as the entry point, visualizing the entire curriculum not as a boring checklist, but as a dynamic, interconnected galaxy of knowledge. Lessons, modules, and entire courses are represented as glowing nodes (planets/stars) in a 3D spatial void.

EduSphere high-fidelity immersive learning dashboard prototype

Spatial Knowledge Atlas

This interface serves as the entry point, visualizing the entire curriculum not as a boring checklist, but as a dynamic, interconnected galaxy of knowledge. Lessons, modules, and entire courses are represented as glowing nodes (planets/stars) in a 3D spatial void.

Immersive Focus Study Canvas

This interface is the "clean room" for learning, designed for deep concentration on a single topic. It perfectly embodies the Dark Editorial ethos by placing elegant, high-contrast typography (reminiscent of a scholarly journal) in a pristine, focused void, juxtaposed with interactive spatial content.

Immersive Focus Study Canvas

This interface is the "clean room" for learning, designed for deep concentration on a single topic. It perfectly embodies the Dark Editorial ethos by placing elegant, high-contrast typography (reminiscent of a scholarly journal) in a pristine, focused void, juxtaposed with interactive spatial content.

Editorial Progress & Analytics Portal

This dashboard doesn't just show charts; it narrates the learner's unique story of growth. By adopting the Dark Editorial approach, progress is celebrated with bold typography, minimalist data visualization, and prestigious imagery, transforming mundane tracking into a rewarding chronicle of achievement.

Editorial Progress & Analytics Portal

This dashboard doesn't just show charts; it narrates the learner's unique story of growth. By adopting the Dark Editorial approach, progress is celebrated with bold typography, minimalist data visualization, and prestigious imagery, transforming mundane tracking into a rewarding chronicle of achievement.

Prototype

UI/UX Case Study

Micro-interactions include module focus states, progress ring transitions, course-map zoom cues, and lesson preview reveals.

Link to prototype

More Projects

See more projects

NeoBank App

UI/UX Case Study
2026

HealthFlow Dashboard

UI/UX Case Study
2026

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