Bring Universe of Field Trips into Your Virtual Classroom with MARS Augmented Reality Creator

CSE 440 Staff
8 min readMar 12, 2021

By Mariam Mayanja, designer and UX researcher, Scott, designer, Ryan, designer, and Angkana Rattanasouk, designer

Figure 1: The MARS AR Creator logo

Our Pitch

The Problem

The pandemic has been hard on education, especially those who are in underfunded and underserved school districts that offer limited resources. Our team’s user research indicated that one small tool could help public elementary school teachers in underserved and underfunded districts fix more than a few of their problems. Many teachers wanted a way to create self-paced field trips for students — they wanted to give them a new environment to explore that would captivate students. By providing a way for teachers to not only design these environments for themselves, but also work off of a premade, crowdsourced list of environments, they can create more immersive environments for their students that will help them support students in small or chaotic learning environments, help them support student with disabilities, and help reduce the amount of their own resources that they have to invest in creating virtual learning solutions.

Our Solution

This is where MARS Augmented Reality Creator comes in to ease burdens thrust on teachers from the rapid transition to e-learning. Here, educators can create field trips tailored to their students’ needs by making a MARS AR creator profile and building off of pre-made templates for field trips to then send to their students. We provide teachers with flexibility so they can do everything between building their own environments from scratch to using a premade environment without any modifications. Between features to monitor individual student progress in exploring the AR environment, our enhanced editing capabilities, and ways to customize the environment for individual students, teachers are better able to help their students while reducing the amount of time, resources, and energy they need to invest in e-learning solutions.

Preliminary Process

Preliminary Paper Prototype

In our preliminary paper prototype we designed the appearance and functionality of the app. For the design of the app we wanted a design that could be used by anyone as it will be used by people with different skills. We also wanted to simplify complex problems like creating a 3D environment. The last thing we wanted to accomplish was creating a way to easily send files to students.

Figure 2: Our initial paper prototype

Testing Process

At this point our paper prototype was finished so we moved on to heuristic evaluation during class. This resulted in changes to the design that were made and enhanced the design and allowed us to continue on the usability testing with users conducted over zoom due to covid safety measures. The user test consisted of a series of slides of the completed prototype, our users were directed to think out loud while interacting with the slide and based on their intended inputs be brought to different slides. This allowed us to identify confusing features that caused negative incidents which we would revise.

Figure 3: Our low fidelity prototype on powerpoint


During our user tests, we found that all of our users struggled with differentiating the scroll bar navigation feature for the interaction manager with our 3D environment viewer. With the knowledge acquired from our user tests, we implemented revisions which lead to a more simplistic and intuitive look design such as using arrow keys for our navigation feature. We were able to address the confusing position of our scroll bars, color schemes, and unclear labels on our buttons that violated heuristic evaluations consistency and standards and proceeded on to our high fidelity design.

High Fidelity Design

Digital Mockup

Here is a link to our final digital mockup demo on Figma:

Task 1

Picking a premade virtual field trip and sending them out (See figure 1–11)

Task 2

Editing the environment for students with disabilities and monitoring students’ progress. (See figure 5, 6, 8, 11)

Figure 1 — Teachers first lands on landing page

Landing Page: Simple landing page with limited clutter in order to quickly inform the teacher of the purpose of the augmented reality creator and get them started.

Figure 2 — Teachers create account, sign up, or login

Sign up page: Teachers can create accounts to save their projects, mark favorites, and create projects without losing progress. Supports the task of creating projects and building existing curriculum in a way that reduces the need to perform redundant tasks.

Figure 3 — On their dashboard, teachers can click to browse their created projects, create projects from a blank template or browse pre-made environments.

Dashboard: Aids task of making AR field trips quickly and easily. Teachers can also visit the blog to aid in the task of finding help or crowdsourcing resources or ideas with other teachers in order to reduce workload.

Figure 4 — Teachers select corresponding subjects they want to take their students on.

Browsing UI: Field trips are filtered by subject. Aids in the task of reducing workload and improving the rate they find projects.

Figure 5 — If a teacher selects Science, they will land on the premade field trip environment related to science subjects such as solar system, water system, soil and erosion etc. Also they can filter field trips that are suited for students with disabilities or their class constraints.

Select page: Allows teachers to filter in order to prioritize students who may be struggling more to keep up with class material, including filtering by disability friendly experiences. Aids in the task of supporting students with disabilities.

Figure 6A — Once teachers has selected on a particular field trip, here, if they selected Explore the Solar System premade environment

Figure 6B — Or a teacher selects a blank template. Customized text and objects can be added.

Teachers can select on gesture in the interaction manager to add accessibility functionality such as read out loud and display text to be bigger or bolder.

Editing Page and editing blank page: Teachers can customize according to their educational goals, aids in the task of creating relevant and interactive field trips. Aids in helping them connect the field trip to the curriculum, reducing workload.

Figure 7 — Teachers preview before sending

Preview Page: Allows teachers to preview and experience what their students will see.

Figure 8 — Teachers looking at an checkbox interface to send students the field trip

Send to student(s): Aids in the task of helping teachers send environment to all students in their classroom including students with disabilities.

Figure 9 — Teachers see a safety check pop up

Verification page: Helps reduce risk of failure (i.e. accidental sending).

Figure 10 — Redirects teachers back to dashboard

Return to dashboard: After the teacher clicks on the send button in figure 9, they will automatically be redirecting back to dashboard. Allows teachers to monitor progress of students, manage access, or edit.

Figure 11 — Finally, field trips have been activated and sent to students. Teachers can monitor students’ progress afterwards until completion of the field trip.

Monitor Progress: Allows teachers to monitor student’s progress and customize the augmented reality environment in order to aid students with learning disabilities with more tailored experiences in an easier way that helps prevent them from falling behind.

Implementation of Changes

We incorporated our usability testing feedback into our design in order to improve ease of access for teachers. To clarify the purpose and status of text fields, we altered color schemes from our preliminary prototype from gray to white so as not to unintentionally suggest they are in a disabled state. We altered our color palette to include orange as an accent so as to allow users to better identify elements with which they can interact. Feedback suggested that our design would benefit from an account page mockup in which the user is signed in, so we updated our design and such a mockup is now included. For readability purposes, we revised the column count from 4 to 3 on the “Premade Environment” browser so titles of environments could be read in full instead of being truncated as a result of space constraints. In multiple locations, scroll bars were added to indicate the potential for multiple items to be displayed — this was a result of feedback indicating that such a potential was not easily understood. Finally, we removed our footer across the entire app after feedback suggested it detracted from the overall design.

Overview Summary

The transition from a physical classroom to an online classroom makes it difficult for teachers to determine whether students are present and understand the classroom material due to lack of engagement. The teaching process and techniques that teachers used to implement in a physical class are limited. Students with learning disabilities are at a disadvantage since teachers don’t have the proper amount of resources. Our vision is to help teachers make online learning interactive and fun in underserved and underfunded districts during these trying times by taking students on online immersive field trips. By creating MARS Augmented Reality Creator, we hope to empower teachers with the ability to utilize premade templates for field trips, editing capabilities, and monitor students’ progress on our platform.



CSE 440 Staff

University of Washington Computer Science, Intro to Human Computer Interaction