Inspirit

Designing learning experiences and creator tools for immersive STEM education.

Group 4026.png
SCOPE

Inspirit

2021, 6 months

TEAM

3 designers

2 co-founders

3 developers

2 unity engineers

3 content leads

ROLE

Product Identity

User Research

UX/UI Design

SOFTWARE

Figma

Adobe XD

Webflow

THE CHALLENGE

How might we design experiences to make STEM education engaging for both teachers and students?

CONTEXT

Built by a team of Stanford University Education and VR researchers, Inspirit offers immersive tools to help promote STEM education as interactive, gamified experiences. Their product offers quizzes, study guides, 3D models, virtual labs. During my tenure, I worked on the MVP conducting user research, structuring the user flow, and redesigning the interface.

Frame 57.png

Creator Tool

Learner App

2 USER SEGEMENTS
pexels-max-fischer-5212697.jpg

Students (Explorers)

Young adults and students in school looking for co-learning experiences and engaging formats of independent study.

pexels-yan-krukov-8617819.jpg

Teachers (Creators)

Educators across the world seeking new ways to be expressive and productive with the content they teach.

USERFLOW 1 - STUDENTS

Live rooms for interactive, participatory classrooms and quizzes for independent learning.

EARLY RESEARCH

I began by looking into the digital solutions and resources that are available to students today to understand what the strengths of our product were and what features could be added.

💡 Most of the resources that exist are passive and non-interactive with predesigned media formats.

💡 Very few platforms focus on participatory content or co-learning experiences.

I also reached out to the in-house discord channel with 64 students (aged 11-17) who gave unique insights into the online communities they cared about and the things they're seeking within digital education. An understanding of the popular platforms helped me understand the target audience better and brainstorm early visual articulations for the product identity.​

download.jpeg
D40KVhLQ_400x400.png
minecraft-creeper-face.webp
discord-new-20218785.jpeg
unnamed.jpeg
What-Is-The-Reddit-Logo-Called.png
download (1).png
Screenshot 2022-02-27 at 5.59.50 PM.png
FEATURE IDEATION

Over the course of the next 2 months, the design team collaborated with product managers and the co-founders to discuss research insights and ideate on possible features for the immersive rooms. Some of the early ideas are presented below -

Over the course of the next 2 months, the design team collaborated with product managers and the co-founders to discuss research insights and ideate on possible features for the immersive rooms. Some of the early ideas are presented below -

Screenshot 2022-03-01 at 12.23.00 PM.png

Information architecture for MVP

With a rough wireframe of what the proposed features were we collaborated with the product and unity developers to understand how the platform was structured. Roping in developers during the initial brainstorming helped us understand the interdependencies between platforms and build out a feasible architecture and roadmap for the release.  

Information architecture for MVP

Screenshot 2022-03-01 at 6.18.46 PM.png

🧠  Explore bite-sized quizzes

VISUAL DESIGN

Due to the quick turnaround time and geographical constraints, clear communication and detailed documentation of the system were key for a smooth implementation. However, the existing version of the app at the time lacked a strong UI system causing inconsistency in the screens and frequent disruptions to the workflow. Having a vested interest in visual identity, and dreading variations during internal check-ins, I proposed an updated UI system while working within the timeline. 

BEFORE
Screenshot 2022-02-27 at 7.00.27 PM.png
AFTER

A young, energetic, and vibrant identity to encourage a sense of play and curiosity for all things STEM. The shapes, palette and imagery allow for versatile combinations and experiments.

Group 4026 (2).png

Inspirit

Group 4027.png

Aa

Group 4021 (1).png

Space Grotesk is Inspirit's primary font.

Group 4025.png
Vector (1)-01 12.55.png
Vector (1)-02 12.55.png
Group 4023 (2).png
Button (1).png
INTERFACE
SOCIAL MEDIA EXTENSIONS
Screenshot 2022-02-27 at 7.09.16 PM.png
Screenshot 2022-02-27 at 7.08.47 PM.png
Screenshot 2022-02-27 at 7.09.39 PM.png
Screenshot 2022-02-27 at 7.08.37 PM.png
Screenshot 2022-03-01 at 12.43.48 PM.png
LIVE ROOMS

Inspirit had developed an incredible library of virtual science labs. Designing for immersive experiences on mobile required close collaboration with unity developers to understand what the possible user interactions were so as to design controls for easy exploration.

2 sets of users

Participants

+ Follow the host view
+ React and request
+ Speak and raise hands

+ Invite and share

Hosts

+ Move around in the environment
+ Interact with models
+ Take questions
+ Admit/Remove participants

Screenshot 2022-02-27 at 7.23.22 PM.png

Early Iterations and explorations

Screenshot 2022-03-01 at 1.05.58 PM.png

Touch control for 3D exploration

Since the product's core assets are immersive environments and 3D models, the placement of buttons, text, and feedback indicators was optimized for maximum screen space and easy touch control. However, it was important to do so without sacrificing the ease of interaction.

Screenshot 2022-02-27 at 7.23.26 PM.png
Screenshot 2022-02-27 at 7.24.01 PM.png

UX for live rooms (Early explorations)

Screenshot 2022-03-01 at 1.06.29 PM.png

Component states

Visual affordances for appropriate feedback

Screenshot 2022-02-27 at 7.29.11 PM.png

Conscious Onboarding

Since live rooms come with some apprehension and users can't rely on familiarity, in retrospect prompted onboarding would've let students explore the product with confidence and increase their chances of sticking over time.

Screenshot 2022-02-27 at 7.31.43 PM.png

The environment is partially loaded, in which case hitting cancel causes unnecessary load time.

Rules prior to loading the environment to allow the user control and a moment of affirmation.

Live room features

Screenshot 2022-01-02 at 8.10.12 PM.png

Onboarding

Screenshot 2022-01-02 at 8.15.00 PM.png

Room features

Screenshot 2022-01-02 at 8.09.57 PM.png

Additional host controls

Screenshot 2022-01-02 at 8.09.46 PM.png

Controls for 3D models

Screenshot 2022-01-02 at 8.10.03 PM.png

Expanded participant list

Screenshot 2022-01-02 at 8.09.52 PM.png

Fact hotspots on 3D model

Creating a room

Screenshot 2022-01-11 at 12.52.16 PM.png
Screenshot 2022-01-11 at 12.50.42 PM.png

Live room tab

Create room

Screenshot 2022-01-12 at 12.37.08 PM.png
Screenshot 2022-01-12 at 12.37.22 PM.png

Choose environment

Confirm and proceed

Quizzes

The second tab features bite-sized quizzes that can be replayed for better scores till the user runs out of life. The 3D model is tagged with location-specific fact hotspots that provide hints to the questions. The format is MCQ and the cards are designed for easy readability despite word count. 

 

📚 Along with the content team, I interviewed and spoke to educators across the globe to understand how lessons were structured, what question formats were essential, and how content could be simplified.

Screenshot 2022-01-11 at 12.44.57 PM.png

Fact hotspot

Screenshot 2022-01-02 at 8.02.54 PM.png

Card - MCQ

Screenshot 2022-01-02 at 8.03.06 PM.png

Card - long answer

Screenshot 2022-01-11 at 12.56.06 PM.png

Score card

Designing long and short quiz formats

While working with the content team, a core challenge was designing for the incredibly complex and detailed questions. In addition to redesigning the existing MCQ, I also proposed additional quiz formats that could be leveraged for a better user experience.

Screenshot 2022-02-19 at 12.11.07 PM.png

By nesting answer previews under MCQ selections, we saved a significant proportion of the screen and simplified the card layout.

Screenshot 2022-02-19 at 12.08.03 PM.png

Image-based MCQ

Model-based MCQ

Hotspot

Variations of quiz formats

Sequencing

USERFLOW 2 - EDUCATORS

Creator tool for using 3D assets, environments,  and question templates to create immersive rooms and quizzes.

Quizzes and live rooms on the learner app are built by teachers on the creator tool. A quick access toolbar, 3D model controls, layer visibility, and variations of selection feedback were critical design considerations to give the user intuitive control.

Create and publish multiple environments

🧬

 

Select and import assets from the library 

🫀

Break, rotate, tag, and edit 3D models 

Screenshot 2022-01-11 at 1.16.21 PM.png

How are subjects, lessons, and topics nested? How do you visually communicate hierarchy to the user?

Structure and Hierarchy

How do you add a model? Can you change the environment? What are the tools?

Tool and Space

How do the components behave when selected? Where does the user need feedback?

Screenshot 2022-03-01 at 5.18.55 PM.png

Added

Resting

Selected

Selecting a layer opens the layers panel

Confirmation tags for success (and error)

Added
Login.png

Login screen

Model Adding.png

Environment with added models

Games.png

Published games

New Model Uploaded (1).png

Adding models to environments

Save and Exit.png

Modal design

Lessons.png

Workspace with created assets

LEARNINGS AND TAKEAWAYS

Inspirit has since evolved to include immersive VR classrooms and study guides. During the last few weeks the team I worked on expanding the platform with features such as discussion rooms, added 3D tools for live sessions, assignment uploads, so on and so forth. Along the way, my biggest takeaways are as follows -

Game Environments

I got to work with multiple teams on this project including unity game developers. Their inputs and suggestions were incredibly valuable while designing UX controls for 3D environments.

Design for autonomy

When it came to the creator tool, it was important to provide a clear hierarchy in toolsets, import functions, ease of model controls, etc. so as to ensure intuitive adoption of the tool.

UX for live rooms

While designing for a live community, we had to factor in rules of interaction and perceived control between hosts and participants and design for the desired behviour.

Scroll to Top