Inspirit
Designing learning experiences and creator tools for immersive STEM education.
SCOPE
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.
Creator Tool
Learner App
2 USER SEGEMENTS
Students (Explorers)
Young adults and students in school looking for co-learning experiences and engaging formats of independent study.
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.
.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 -
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
🧠 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
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.
.png)
Inspirit
Aa
.png)
Space Grotesk is Inspirit's primary font.
-01%2012_55.png)
-02%2012_55.png)
.png)
.png)
INTERFACE
SOCIAL MEDIA EXTENSIONS
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
Early Iterations and explorations
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.
UX for live rooms (Early explorations)
Component states
Visual affordances for appropriate feedback
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.
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
Onboarding
Room features
Additional host controls
Controls for 3D models
Expanded participant list
Fact hotspots on 3D model
Creating a room
Live room tab
Create room
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.
Fact hotspot
Card - MCQ
Card - long answer
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.
By nesting answer previews under MCQ selections, we saved a significant proportion of the screen and simplified the card layout.
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
How are subjects, lessons, and topics nested? How do you visually communicate hierarchy to the user?
How do you add a model? Can you change the environment? What are the tools?
How do the components behave when selected? Where does the user need feedback?
Added
Resting
Selected
Selecting a layer opens the layers panel
Confirmation tags for success (and error)
Login screen
Environment with added models
Published games
.png)
Adding models to environments
Modal design
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