Immersive Media Player System
Designing an Android app to help teachers bring art class to life with VR, making it accessible for everyone!
Duration
January 2023 - January 2024
Roles & Responsibilities
User Research: Product Audit, User Interviews, Journey Mapping
UX Design: Sketching, Interaction Design, Prototyping
Development: Android App
Client
Act One - Arts Education Nonprofit
Meteor Studio
Tools Used
Figma
Android Studio
Unity
Zeplin
Background
Act One is a nonprofit organizations that provides access to the arts in Arizona for more than 800,000 children and families in Arizona through field trips to the arts for students from Title I schools and through Cultural Passes available in 57 Arizona libraries.
They came to us in hopes of understanding how they could improve their arts educational experience – providing learning experiences through virtual reality and managing large art classes. Our goal was to help them create an engaging and efficient way to deliver arts education, making it accessible and enjoyable for both students and teachers.
Problem Statement
In order to understand the problem space, I analyzed a typical day in an Act One classroom, where students are attempting to engage with VR gear during an arts lesson. It was evident that several issues were making it clear that the current system wasn't meeting the needs of the classroom. This analysis helped me articulate different situations:
• Situation 1: A student who joins the class ten minutes late is at a loss, struggling to integrate into the ongoing lesson.
• Situation 2: Another student cannot see the characters in the video, highlighting a problem with the VR content delivery.
• Situation 3: Two students are on different chapters of the same lesson, despite using the same VR system.
• Situation 4: The teacher, overwhelmed by various technical glitches and student complaints, finds it challenging to manage the class effectively.
The current Act One VR system falls short in delivering a seamless educational experience. Teachers face significant difficulties in getting the VR gear to work properly, especially when handling multiple devices. The video features are inadequate, preventing teachers from jumping to specific parts of the video or ensuring that all students are viewing the same content simultaneously.
Upon examining their daily routine, I found myself with numerous questions, one of which was…
How might we design a more functional and reliable VR system for larger art classes, ensuring teachers can efficiently conduct their classes without interruptions?
Solution
Streamlined VR Platform for Large Art Classes: We developed a streamlined VR platform specifically designed for large art classes, focusing on simplicity and reliability. This new system ensures that educators can concentrate on teaching, providing students with an engaging and uninterrupted learning experience.
Device Management
• Allows teachers to manage all VR devices easily
• Provides detailed information about each device's status and connectivity
• Ensures all equipment is ready for use with minimal effort
Calibration
• Simplifies the process of setting up new devices
• Enables quick calibration of new VR headsets
Player
• Video player with easy navigation
• Controls for jumping to specific parts of the video
• Ensures all students view the same content simultaneously
Value Proposition
When I thought of this VR platform, it was crucial to understand and communicate the specific benefits it would bring to educators and students. By clearly defining the value proposition, I can show how this solution addresses the challenges faced by teachers and enhances the overall learning experience.
For educators seeking to enliven arts education with virtual reality, who are currently hampered by systems that fail to sync or control large numbers of VR headsets,
IMPS is a device management software providing a robust solution. It is designed for teachers who need synchronized control over VR experiences for classes as large as 50 to 100 students.
This product offers a synchronized, immersive VR experience, giving educators the ability to manage and control headsets efficiently, ensuring that every student is on the same page.
Unlike current offerings that can't handle scale or give detailed headset control, IMPS provides a reliable, user-friendly interface. It streamlines the management of VR devices and content, allowing educators to focus on teaching, not technology.
That provides a gain in classroom management and student engagement so substantial that it makes the transition to our system more than worth it. With IMPS, instructors can finally realize the full potential of VR in arts education.
To gain more insight into building a strong value proposition, I came across an excellent Harvard lecture by Prof. Michael Skok. It provided valuable perspectives that helped refine my approach. You can check it out here.
Approach
The new system has significantly improved the classroom experience, with teachers reporting improved student engagement and fewer technical issues.
Define
To create an impactful solution for Act One, I needed to understand the broader landscape of Arizona's education system. So, I delved into comprehensive research to paint a clear picture of the current situation, aiming to tailor my approach to meet the specific needs of teachers and students involved in arts education.
Distribution of Teaching Positions in Arizona (2022-23 School Year)
Significant Teacher Shortage:
In the 2022-23 school year, Arizona faced over 9,600 teaching positions open, with nearly one-third remaining unfilled a month into the school year.
Non-Standard Teachers:
42% of the filled positions were staffed by teachers who did not meet the standard teaching requirements.
Factors Contributing to Edu. Challenges in AZ
Quality and Well-being of Teachers:
The shortage affects not just the numbers but also the quality of education and teacher well-being.
Teacher Burnout and Turnover:
High turnover rates due to burnout, with large class sizes and lack of planning time cited as major factors.
Impact on Students
Quality and Well-being of Teachers:
The shortage affects not just the numbers but also the quality of education and teacher well-being.
Teacher Burnout and Turnover:
High turnover rates due to burnout, with large class sizes and lack of planning time cited as major factors.
Research
Field Study
Observing teachers in classroom and understanding how they interact
User Interviews
Gathering information about teachers' experiences, needs, and opinions
After analyzing the impact on students, I asked my team and requested senior leadership to help organize a field study to get a firsthand look at the problems teachers face. We spent time observing teachers as they conducted art classes using the current VR system. This allowed us to see the challenges and frustrations teachers encounter in real-time, providing valuable context for our research.
To gather more insights, we interviewed five teachers, asking them about their opinions, experiences with the current product, and their ideas for improvement. I carefully noted their feedback, which helped me empathize with their daily struggles. These interviews were crucial in understanding not only what wasn't working but also what changes the teachers would find most beneficial.
Based on the insights and observations from our research methods, I created an outline for hierarchical task analysis. This analysis provided a structured way to break down the tasks teachers perform and identify the most critical pain points. Using this information, I made a journey map that highlighted the key pain points teachers experience, which served as a foundation for developing solutions tailored to their needs.
To better capture the specific tasks and motivations of the teachers, I decided to use job stories instead of traditional user stories. Job stories focus on the situation, motivation, and expected outcome, which helps in understanding what teachers need to achieve in their classes. This approach provided a clearer direction for creating effective and practical design solutions.
The Solution
The Platform
Proposed solution needs to act as an essential tool for teachers managing large art classes. To facilitate this, it's crucial that the system is highly functional, reliable and runs on a portable device. Hence, we targeted Tablet devices for this solution.
Finalizing the feature set
• Device Management: Easily manage all VR devices in the classroom.
• Device Information: View status and connectivity details for each device.
• Device Calibration: Streamline the setup and calibration of new VR headsets.
• Video Player: Navigate through videos with easy controls.
• Jump to Specific Video Parts: Enable teachers to jump to particular sections of the video.
• Synchronized Viewing: Ensure all students view the same content simultaneously.
• Reduced Setup Time: Minimize technical issues and setup time during lessons.
Design
Information Architecture
The app will consist of three main tabs - All Devices, Calibration, and Player. They represent the primary functionalities of the experience.To make sure the app is easy to use, I started by designing the application flow. I mapped out how each tab would interact with the others and how their functionalities would be nested within the app. This step was crucial in understanding how users would navigate through the app and access different features.
Sketches
To explore some top-level design decisions, I began by sketching a few basic wireframes. After considering various options, such as a bottom navigation bar, I decided to use a side 3-tabbed navigation and work in landscape mode. I opted for the side navigation to save screen space and enhance user efficiency. Below are the variants I considered for the tab navigation UI.
Lo-Fidelity Screens
These sketches helped me visualize different types of layouts layout and user interactions, giving a clear picture of how the app would function.
With some more clarity, I moved on to designing the low-fidelity mockups in Figma.
Player Screen Decision
As the Player screen is the most important part of the application, I decided to start with it first. I looked at two different layouts: one that lets content scroll and another that offers navigation in a more compact and efficient manner.
At first, the scrolling layout (feed layout) seemed like an easy choice because of its centralized content view. But as I explored it further, I realized it required more navigation and could distract users from the main content.
The compact navigation layout (supporting pane layout), on the other hand, had several advantages. It keeps the main video content front and center, allowing teachers to stay focused on the lesson. The secondary pane gives easy access to additional videos and chapter timestamps without needing to leave the main screen. Plus, it makes the best use of horizontal screen space, so all essential elements are visible without too much scrolling. In the end, I went with the supporting pane layout. It lets teachers multitask more effectively by interacting with video controls and related content at the same time. To know more about canonical layout and its types, check this.
All Devices Screen Decision
Since the All Devices screen serves as the home screen for the application, it needed to be both functional and easy to navigate. I started by considering various layout options that would display the essential information.
I explored a list layout for its simplicity and straightforward presentation. However, I realized that as the number of devices increased, the list would become cumbersome and difficult to manage. To address this, I turned to a grid layout. The grid layout allowed for a more compact and organized display, ensuring that teachers could quickly scan and locate specific devices.
One key UX principle that influenced my decision was Hick's Law, which states that the time it takes to make a decision increases with the number and complexity of choices. By organizing the devices into a grid, I reduced the cognitive load, making it easier to find and manage devices efficiently. Additionally, Fitts's Law, which predicts the time required to rapidly move to a target area, supported the grid layout. The grid layout grouped related information together, minimizing the distance the user had to move their eyes, thereby speeding up interaction and reducing effort.
Calibrate Screen Decision
Visual Design
The app uses various weights of Roboto as the font and a color palette focused on one primary color.
High-Fidelity Design
The app uses white on the surface, with two main shades #FFF and #FEF7FF being used for app and container background.
All Devices Screen - Final Design
Calibrate Tab
Left: Player Screen (Default view), Right: Video Selected
Left: Locked State, Right: Sync to all devices
Interactive Prototype
Development
Android Studio Setup: Developing Dynamic UI Layouts
Implementing Lottie Animations: a subtle animation for an idle state
Once the final design was ready, we moved to the development phase to transform our designs into a fully functional app. I got involved in Android Development, where I implemented the UI, integrated data, and ensured the app was dynamic and responsive.
I spent a reasonable amount of time in Android Studio during this phase. This setup helped me to try out different UI elements, hence adjusting the interface of the platform. It was a great practical experience, and it increased my understanding of the technical side of developing an app immensely. I also added Lottie animations, which helped in enhancing the user experience.
These facilitate some form of interactivity within an application and give users great visual experiences. For those interested in the technical details, you can check out theGitHub repositoryto learn more about the code. Although it doesn't contain all the updated work due to confidentiality, it includes some of my contributions and initial development efforts.
Day in the life After
With the new VR platform, the classroom experience has been significantly improved:
Here's how a typical day looks after implementing our solution:
•
Latecomers can easily join the ongoing lesson.
•
All students can see the characters and content in the video.
•
Everyone is on the same page, without any discrepancies in the lesson chapters.
•
The teacher manages the class effortlessly.
After completing development, we demonstrated the new software to our client. The demo went smoothly, and they were impressed with the improvements, particularly appreciating the streamlined interface and system reliability. The feedback was positive:
We like the app's look and functonalities now!
In the Press
Arizona PBS
News
Arizona State University
A local organization by the name of "Act One" makes arts accessible for thousands of children and families in Arizona each year through field trips for K-thru-12 students from Title-1 schools
AZ Family
Morning Show Arizona
Students participated in a virtual reality field trip to Chicago and Tucson to experience the arts without having to leave the classroom.
CitySunTimes
News
Families looking to explore Arizona are in luck, said Anne Osborne, Act One Culture Pass manager.
Finished.
Go Back To All Projects