Stefan Stojanović ENSR ✕ Esc
← Back to projects

UI · 05 / 05

Nature’s Way - Gamified Spiritual E-Learning Platform

A fantasy-themed learning world - paths, heroes and gamified progress.

Role
UI & visual design
Category
Product · e-learning
Scope
Full UI layer
Completed under
ALAS D.O.O.
Status
Released

UX & development handled by the rest of the ALAS D.O.O. team.

Nature’s Way is a gamified spiritual e-learning platform focused on meditation, reiki, and energy healing, created during my time in ALAS D.O.O. My contribution covered the full UI layer, including brand identity, hero visuals, iconography, path selection, curriculum layouts, certificates, and gamification elements. The visual world was inspired by Hogwarts Legacy, while core assets were generated with AI and refined in Photoshop, Illustrator, and Figma.

Nature’s Way - hero image composite landscape

Hero Image Composite

The hero image composite was created in Photoshop using AI-generated assets. Multiple source images were composited into a single immersive landscape - a figure following a winding path through enchanted valleys and towering ancient trees, with a temple rising in the distance as a symbol of enlightenment. The composition establishes the platform's core narrative at first glance: a personal journey through a fantastical, nature-connected world toward spiritual awakening.

Nature’s Way - path selection system with hero archetypes

Path Selection System

Each user begins their experience by choosing a path - a predefined spiritual archetype that shapes their entire curriculum. Every path is embodied by a unique hero character: a visual representation of that archetype’s energy, story, and purpose. The selection isn’t just functional - it’s narrative. The user isn’t picking a course category, they’re stepping into a role, guided by the selector.

Each hero was crafted through photo compositing and digital manipulation, blending portraiture with elemental visual effects to reflect the nature of each path - earth, light, cosmic energy, shadow, and spirit. The path selection screen dynamically adapts the offered course sequence based on the chosen archetype, guiding the user toward mastery of the skills tied to that journey. Five archetypes were designed: Warrior, Healer, Medium, Creator, and Enlightenment (variant).

Nature’s Way - radial progress tracker and course selector

Progress Tracker & Course Selector

An interactive radial selector tracks the user’s journey through each path, showing progress from 0% to 100% as courses are completed. The central element rotates based on the selected option, acting as the main visual control and reflecting the active path. When a path is chosen, a course carousel appears below, featuring lessons with the instructor’s portrait on each card for direct access. A browse button underneath allows users to explore all available courses at once.

Custom Icons & Logo

A full set of custom platform icons was designed using circular badge frames with ornate gold detailing, consistent with the platform’s fantasy aesthetic. The brand logo features a hummingbird - a symbol of lightness and forward movement - rendered in a detailed line-art style that bridges the mystical and the natural.

Nature’s Way - custom icons, logo and certificate design

Course Certificates - Three Levels

Three tiers of course completion certificates were designed as aged parchment scrolls - visually communicating the weight and value of each achievement. Each level carries a distinct designation, with the student’s name, course title, completion date, instructor name, and signature field. The scroll format connects the certificate design to the platform’s wider visual world of knowledge, heritage, and transformation.

Course Curriculum Layouts

Twenty-four individual course curriculum sets were designed, each following a structured layout: course title, description, weekly breakdown of content, learning objectives per week, and an additional intensive block. The dark, gold-accented design language connects all curriculum documents to the Nature’s Way brand system, making each one feel like an artifact from within the learning world.

Nature’s Way - course curriculum page layouts