01

Grapevine

A game-like learning platform for elementary school students. This was a finalist out of 25 teams from the University of Toronto, Computer Science.

overview

Developed agame-like learning platform for elementary school students where they can use moving avatars in a virtual setting. The integrated platform allows teachers to customize classroom features, seamlessly move in and out of group calls, and assign homework.

The following project was a part of the academic research study at the University of Toronto: CSC318 The Design of Interactive Computational Media: User-centred design of interactive systems; methodologies, principles, and metaphors; task analysis. Interactive hardware and software; concepts from computer graphics. Typography, layout, colour, sound, video, gesture, and usability enhancements. Classes of interactive graphical media; direct manipulation systems, extensible systems, rapid prototyping tools. 

View our team's final pitch deck and video demo.

Role
UX Designer | UX Researcher
duration
4 months (Dec 2020)
tools
Figma | Miro
team
Riya Razdan | Rogan Gutwillinger | Hriday Chheda | Zhao Wang | Winnie Xu | Bill Li

opportunity

Due to the limitations imposed by the current COVID-19 pandemic, many daycare and elementary school students will be learning from home this fall and potentially well into next year. This places an unexpected burden on the parents who must now juggle work along with full time attention towards their children's care.

Elementary school children are finding online learning lacking in social interaction, less personal and less human. Additionally, students and parents can feel bombarded with too many resources to use at once. The children are less engaged with the current virtual offerings than traditional in-person classes and tend to be too young to interact with their friends via social media. As a result, there is potential to develop a more socially engaging online platform tailored to elementary school education.

Solution

Grapevine is a web application that focuses on collaborative learning through visual avatars and classroom spaces. View the full demo here.​​​​​​​​​​​​​​

The primary feature of the app is the ability to engage in a video call as soon as your avatar is within a certain vicinity of another avatar when in a classroom. This allows teachers to seamlessly check in on different student group discussions without the hassle of having to navigate through breakout group lists that are common to other professional platforms.

01.

The home page shows an overview of the spaces that users can explore using their avatar. They can either use their keypad or navigation bar to move around depending on their comfort level. When two or more avatars are nearby when in a classroom, students and teachers have the ability to automatically join a group call to interact.

No items found.

02.

Many elementary school teachers take pride in creating unique classrooms that complement their teaching style.Here, they have the ability to create new learning spaces and can either choose a preset template or customize features. This includes suggested reading lists, recommended educational games, and assigning students to desks.

No items found.

03.

Integrated with the classroom page, students can virtually go up the whiteboard and add notes, draw, and talk with their friends during class activities. Teachers can also start a call either with the entire class or groups, such as extracurricular clubs, using the menu bar.

No items found.

04.

To keep track of groups and class schedules, both students and teachers are able to see which classes and clubs they're a part of. Teachers have the opportunity to create subgroups in each class that can be saved and easily accessed when starting a new call or assigning work. Students are also able to see a popup of their daily class schedule.

No items found.
Design Process

Formative Research

Prior to any ideation, we conducted both primary and secondary research to better understand the intricacies of online learning, both for young children and teachers. Due to the limitations of the course, we were not able to obtain a license to directly interview children and so we mainly conducted surveys and interviews with parents of children aged 2-12, as well as elementary school teachers.

Primary Research

I managed to survey 23 parents using primarily snowball recruiting techniques in the span of a week, while my teammates interviewed 5 parents and 3 teachers. The purpose of the survey was to better understand what relevant problems parents/caretakers face. This includes how much attention and supervision is needed to keep children engaged and what learning tools are accessible to parents/caretakers.

The following survey results provide insights into the current learning situation of multiple children as described by their parents:

A majority of the parents had children who were expected to attend some form of online learning during the week. The current learning system resulted in a similar understanding on the parent's part of what children were doing at school. However, a comparable school environment was overall not thought to be feasible at home. 

Notable responses to whether the schooling system can be recreated at home:

“No, they miss their school especially the buzz in the cafeteria, playing in the hockey field, enjoying their chemistry lab.”
“No, as my daughter needs a one-on-one Educational Assistant. Due to covid, that's not possible.”

This showed an opportunity to solve the problem of decreased social interaction associated with learning at home, whether that be through connecting with friends or gaining one-on-one attention with an educator. This is a good lesson in realizing that simply meeting the educational resources may not be sufficient; the provided solution must not compromise other important aspects of the learning environment and take into account the struggle with socialization.

Secondary Research

Through researching studies on children's education, a notable article I found and reviewed was on the benefits of gamified learning on student engagement and social interaction. We also found that responsive teaching is essential for online learning, current online platforms don’t allow for much customization, and social interactions increase student engagement.

Creative Brief

After conducting both primary and secondary research, we developed the following creative brief.

Simple and Streamlined: Above all, the program needs to be as simple as possible so it is accessible to all users, regardless of technical experience and computer hardware.

Gamified and Engaging: The program should be as enticing and exciting to use as possible, making sure students pay attention in class and are motivated to come back.

Safety: Only vetted users can engage with the students on our platform. Admins/Teachers will also have very fine-grained control over who is in the class.

To further identify key priorities and potential issues, we defined our primary users and how success would be measured. To do this, we developed an experience map and two key personas:

Bright spots: 

Students are at and perform their best when they are motivated to learn, feel that they are in an interactive environment, and view learning/activity session as both educational and fun. Teachers are at their best when they are able to keep track of the progress of students, customize learning environments, and foster social engagement in an easy and organized manner. Our platform provides the classroom feeling and interactive component currently lacking in today’s primary school online educational services. 

Issues: 

Students may feel lost at times in the day if they do not know which room they need to be in. We can provide a scheduler/synced calendar that tells the student where they need to be at every point in the day and also have a map of the virtual school that is easy to access. It should also provide an easily clickable and integrated 'join' button in the notification to allow for frictionless transitioning into every planned activity of the day.

Cognitive Walkthrough

For the cognitive walkthrough, we went through multiple iterations of how to structure our key scenarios to avoid leading questions. We then tested these low fidelity prototype scenarios with other students in the course as well as industry professionals:

Heuristic Evaluation

After an internal cognitive walkthrough, we gained the following insights. The main feedback we received was the complexity and usage of the assignments page, as well as the labelling of different features. Our customize button was not intuitive to most users, and there were some design inconsistencies when labelling spaces. 

I also personally learned that for future interview scenarios, it would be beneficial to pose goal-oriented questions such as "How would you set up a class to fit 8 students?" rather than a series of instructions that would ultimately lead to that goal.

Iteration

Having received valuable feedback on our initial prototype, we made the following key updates.

Usability Testing 

Various iterations of our low fidelity and high fidelity prototypes prompted us to conduct a final usability testing walkthrough with five teachers and parents. Three of our teammates conducted these final interviews while I compared the happy path time and click rate with the results.

The overall scores were positive, which shows good satisfaction. We excelled with usefulness with a score of 9 and the ease of use was rated the lowest at 7.2 before final changes.

No items found.

Final Updates

Given the final usability testing results, it became clear that there were two key issues that needed to be reiterated:

Most teachers were not aware that they could use the keyboard despite the WASD notification. After including a keyboard graphic, this navigation option became clear unanimously.

Three participants thought that they could also start a call using the groups page. This was an intuitive pathway and so we added that option so that the groups page could also redirect them to the call popup with the appropriate group already selected.

No items found.
OUTCOME

We pitched Grapevine to a panel of 8 judges working in senior UX research, design, and management positions at IBM and Facebook. After four months of defining a relevant problem space and conducting user research, our team was selected in the top 5 of the class out of 30 presenting teams.

Future goals include gaining the license to interview younger children and integrating accessible features and software that would accommodate students with their different needs. I am also interested in researching more on how student engagement can be measured, and even after the project was complete, ideas continued to flow within our team. Overall, it was both a challenging and rewarding undertaking with a great team.

Other projects: