kick back space
Creating an interactive learning environment emulation "real-life" experiences.
Project Type
Website Application
Team
Earnest Kim
Zora Sifontes
Ellie Tsuji
Role
UX Designer
Tools
Otter.ai, Notion, Figma, Google Meets, Loom
Duration
3 months
*Note: confidential information has been removed to respect the client's privacy, please reach out for full version of this case study
The Challenge
Instructors struggle to manage multiple responsibilities during live sessions, including presenting content, monitoring participant engagement, and controlling session tools.
This leads to:
- Delayed responses to participants
- Disrupted teaching flow
- Lower overall engagement during sessions
The Solution
A centralized interface that helps instructors manage seassions easily while enabling real-time participant interaction
Key Insights
Through research conducted prior, I identified distinct needs for both instructors and participants
Instructors:
1. Centralized dashboard for managing multiple actions
2. Seamless interaction with participants
Participants:
1. Accessible platform
2. Active participations and engagement without disruption the session
Key Insight: Both groups need a simple, intuitive system that reduces cognitive load while enabling seamless real-time interaction.
This insight directly informed my decision to centralize controls and simplify interaction workflows.
Translating Insights into Design
To translate these insights into design decisions, I:
• Mapped key user scenarios
• Developed “How Might We” questions
• Identified opportunities to simplify workflows
This helped me define key interaction patterns, including centralized controls and simplified workflows, which guided the final design decisions.
Design considerations
1. Prioritize low cognitive load
Interfaces needed to remain functional without overwhelming instructors managing multiple tasks.
2. Support real-time interaction.
The system had to support seamless communication between instructors and participants.
3. Create a structured environment.
The experience aimed to emulate a classroom setting while improving upon existing tools like Zoom and Google Meet.
Interface Inspirations
I explored how game interfaces manage large amounts of information without overwhelming users.
This informed my approach to designing a clean, layered interface that prioritizes key actions while maintaining visibility of important information.
Designing Key Interactions
Based on these insights, I designed key interaction patterns that improve engagement while reducing instructor workload.
1. Hand raising
2. Group Discussions
3. Sitting in respective seats
Hand raising (Instructor)
Problem: Instructors struggled to track and monitor participants in real time
Decision: Designed a centralized hand-raising system that allows instructors to easily view, prioritize, and respond to participants from a single interface.
Impact: Reduced the need to scan the entire screen and improved interaction efficiency during live sessions.
Before: Scattered interactions points
After: Centralized control panel
Wireframes showing how instructors can manage participant interactions through a centralized control panel.
Hand raising (Participant)
Problem: Participants lack clear, intuitive way to signal engagement without interrupting the session
Decision: Designed a simple hand-raising interaction that allows participants to easily indicate engagement
Impact: Easier for participants to engage in real-time while maintaining the flow of the session
Before: Signal engagment
After: Confirmation of engagement
Wireframes showing how participants can easily signal engagement without disrupting the session.
Usability Testing & Insights
I conducted usability testing via Google Meets with users to evaluate how effectively they could navigate and interact with the platform.
Key Insights
What Worked
Users found the interactive element easy and engaging to use
"It was relatively easy to perform the tasks"
Opportunities
Users expected a more centralized system where key actions are grouped together
"I assumed all the functions would be done in one location"
Pain Points
Some users were confused by the placement of interaction tools
"Why aren't all the icons put together in a tool bar?"
These insights directly informed the following design improvements.
Design Improvements
Based on user feedback, I introduced a centralized toolbar that groups key interaction tools into one accessible location.
Updated wireframes showing a centralized toolbar for easier access to key functions.
.png)
