BodyMap: Online Classroom
Co-Op
Medical
VR
Timeline: June 2022 – August 2022
BodyMap is an interactive learning platform that supports medical education through 3D anatomical visualization and remote instruction. This redesign project focused on improving the online classroom UX to support student-teacher interaction, structured guidance, and learning motivation in virtual settings.
My Role As a UX Design Intern
As a UX design intern, I was assigned to assess and improve the previous online classroom flow, which lacked structure and clarity. The goal was to design a more dynamic virtual learning space—one that fosters teacher-student interaction, provides timely support, and enhances student motivation throughout the learning journey.
🔍 Probe & Discover
Before Design and Opportunity
Design BodyMap Online Classroom Product Demo Video
This demo video showcasing a user as a host, interacting with a 3D model, and engaging with participant avatars in a BodyMap VR environment.
🚨 UX Issue Around Old Product UI
Show avatars
The “Show Avatars” toggle reflects users’ editing permissions (Show = Yes, Hide = No), but its behavior doesn’t follow standard switch UI patterns—causing confusion and making it unclear how to hide avatars with edit access.
Time
Unclear Time Setting? Users are unsure whether this UI represents the current time or the duration of the class.
Mic & Modify Authority
The Confused icon and Host lack the buttons for muting/unmuting all users. Additionally, the current face icon represents the authority to modify the 3D model, but its current design does not effectively communicate this concept to the user."
📊 Analysis
Research
User interview
Conducted a user interview with a student specializing in medical content to gain insights into their class flow and quiz format.
Analogous Research
Conducted an in-depth research of various VR applications, encompassing online meeting apps, multiplayer and collaborative platforms, as well as entertaining applications.
Human Anatomy
Online Tutorial
I also watched various online tutorial videos to gain an understanding of how professors teach human anatomy.
✨ Research Summary
These exploration enabled me to gain valuable insights into the trending functions and features that foster interactive and engaging user experiences within virtual spaces.
🧠 Planning
Priority Future Function
To improve the current online class user flow, social and interactive are the biggest features we should emphasize!
Lecture class -100 students: scenario test ➜ 🌟Our Focus Scenarios
Lab class -small groups: mainly for cloze test
Function
|
It Will Help
|
Our Next Step
Must to have ⭐⭐⭐️
Presentation function for teacher: importing pdf, image & video into the online classroom
➜
help the teacher explain the content systemically
➜
Add a New function(import the material from the user end web to VR?)
Sync reaction for students: raise hands to unmute(pop UI could be improved) or default interaction: send emoji, etc…
➜
improves the online learning interaction, makes the class flow more coherent
➜
could update the current pop notification UI first(make it much more obvious, and dynamic)
Recording function for the async online class (teacher’s perspective or third person perspective, 2D video)
➜
enable students to take notes after class)
➜
Add this function to the current UI, engaging more users without VR device
Nice to have ⭐⭐
Customize avatar figure
➜
distinguish the user, Increase the desire to engage in the class
➜
Gamification Design, Ex. make teacher avatar special
Text chatting for everyone: convert users’ audio to text, (voice input)
➜
more interaction happened between users, could have a simple QA section here
➜
New function
Attendance Notification
➜
enable the teacher to know the status of students' absence
➜
Pop notification UI design (support teaching issues)
Leaderboard: special label or tag for the user who is the most using, MVP for the exam.
➜
distinguish the outstanding users, reward design (link to the exam system, )
➜
could update in current avatar’s name label
Optional ⭐
Customize the classroom space
➜
make the VR environment more natural and realistic(chair)
➜
VR space improvement
Small breakout rooms for groups discussion
➜
more spaces to divide students into small groups to have small & private discussion
➜
New function
Scenario simulation exam
➜
simulate the lab classroom, can be considered as the pre-lab practice
➜
New function
🎨 UI/UX design
Final Spec Scope
🔧 Final Spec Scope – Key UI/UX Iterations for the Interaction Panel:
🧑⚕️ Avatar Display Toggle Logic
🛠 Permission Indicator Enhancement
🎛 Interaction Panel Layout Redesign
🪄 Switch Component Behavior Fix
🔄 Simplified Feedback States
This proposal centered on improving the interaction panel's usability and clarity. We refined UI elements, adjusted interaction logic, and clarified user permissions. These designs were delivered as a final UX spec for potential development in future iterations.
📱Project Spec
The final outcome focused on clearly documenting interaction flows and design logic to support smooth engineering implementation.
👩🏫 Designing for Learning
Reflection & Takeaways
"To support learning, design must teach too."
This project took place during the pandemic, a time when I myself was a remote student—an experience that made me especially empathetic to the challenges of learning complex topics like anatomy online. By combining user interviews with medical students and research into commonly used 2D teaching methods, I was able to design with both understanding and relevance, crafting interactions that support real learning needs.
peggy3025487@gmail.com
©2025 by PEGGY LEE