Connecting Students Stuck in Quarantine

Christian Lay-Geng
7 min readOct 5, 2020

Giving K-12 Students a social and education support via tutoring

Students and Online Education

The sudden change to online teaching from COVID-19 left many staff and students unprepared, as entire curriculums, learning environments, and learning cultures had to be changed despite financial disparity or not enough access to virtual materials. Many college students lost their internships and assistant positions that were meant to help resume-build. Students struggled without being with their friends or having a shared learning environment:

It hasn’t been difficult having to go to class online, but the complete change from what I’m used to has been the most difficult.

I’ve struggled with being able to keep up with all the work load, because of all the distractions that are now here.

It’s flexible remote learning on Coursera but I miss the social aspect.

Our group decided to replicate the social aspect of school through a tutoring app. We wanted to create a close relationship instead of the group off-hour sessions many students were encountering. Other tutoring services like Chegg, K12, and GoPeer may provide a lot of the necessary tools and tutors already, but most were not made with promoting socializing in mind. Our group considered group tutoring to connect students with similiar problems, but ultimately felt that we could create an affordable and close relationship with student tutors helping other students.

We believed our app could stand out as affordable and socialize via group tutoring and QA

Although online learning under quarantine conditions will not be permanent, our group want to suggest to businesses more avenues of tutor interaction because future customers will weigh social engagement as a factor after having gone through virtual classes themselves. We aimed to connect college students with K-12 students because it would be doubly beneficial for college students to resume-build and K-12 students to get someone who can share their experiences during quarantine.

Our App: Les Etudes (The Studies)

Our group created a tutoring app that uses weekly challenges, a forum, and point systems to help motivate students to engage with their tutors outside of normal tutoring hours. Students can upload photos, message, video chat, and group video chat directly with their tutors on one platform. Our Figma prototype shows the layout for a student, whereas college tutors and parents would have access to different functionalities.

We believe we have a self-sufficient tutoring app that promotes social engagement that other tutoring services did not. Some examples of this include:

  • Accumulating points based on interaction via tutor meetings, answering questions on forums, and weekly tutor challenges.
  • Using weekly tutor challenges to spark conversation between tutors and students.
  • Group tutor sessions help students in similar situations and allows them to meet students they otherwise wouldn’t have in a virtual classroom.

More Interactive Features than Anticipated

Since the storyboarding phase it was evident we needed a lot of features. Not only did we need the sign-up, video chat, profile, messaging, and materials that other tutoring services provided, but we also had to add the social features that we wanted and guidance features to help our different users understand everything.

The hardest thing to design was the points system. Initially students and tutors sent weekly challenges to each other and students earned points that way for emoji and coupons. As we started building the app, I pondered the point of the challenges if all it did was send pictures to each other. Why would tutors do them if they were already getting paid? How does it promote socializing? What can they redeem? Conveniently at the same time, other features were being built. Thus I suggested to the team to expand the point system to motivate users to use other features. From the prototype to the final, points were accumulated instead of spent since we wanted students to feel accomplished of the amount of points they’ve earned. Although the features didn’t iterate much, the concept of the points system evolved heavily to include many parts of the app.

Evolution of the Point System

The dashboard had the biggest change from the low-fi to the high-fi prototype. We had initially categorized the dashboard by features (people, calendar, challenges) and made tutor sessions separate so sessions could be updated live. But during user testing we found that users couldn’t find the video chat or understand the point system, and realized that features were more intuitive when they were grouped by tutor than functionality. Thus we simplified the prototype, moved up the points, and included video chat into the dashboard.

Simplifying the Dashboard

Due to how complicated the app was, there was a lot of added user guidance that wasn’t anticipated in the low-fi prototype. Users started on the login page without any explanation, prompting us to create onboarding pages to introduce ourselves. The point system, challenges, and materials were given descriptions at the top of their pages. I included a help page to answer logistical questions, especially for the tutors and parents. Grayed-out buttons, red alerts, and popups helped to provide feedback to users if they had completed their goal or not.

Educational Colors

When designing our app we wanted to color it differently between the students and the tutor/parents. We created a moodboard using K-12 pictures that were associated to our tutoring app and initially settled on using green, blue, and orange for our design. These were attributed to objects like pencils, learning material, school laptops, and other tutoring sites. Since we had no existing patterns we selected our own icons, calendar colors, and fonts for the low-fi prototype that we thought would add color to the app to make it kid-friendly and easy to read.

Initial Style Guide

During our second round of user testing we got mixed feedback concerning the color. While it was colorful the students felt conflicted with the green and the calendar, whose colors felt ‘random.’ As a team we also had difficulty with using the green color in areas that didn’t represent the meaning of ‘yes’ or conflict with the orange color. One student also made a comment about the Lora font, and that can be attributed to the fact that it stood out too much as the only serif font. Thus in our high-fi prototype we used shades of blue instead of green and orange to distinguish between clickable and non-clickable objects. When we chose the dark blue we then chose yellow from the complimentary color wheel as the orange stood out too much in some places.

Final Style Guide

One problem that we ran into was helping students figure what was clickable and what wasn’t. A lot of our boxes had curved edges, including the text-only boxes with no functionality. During testing students generally figured it out if something was clickable by clicking around the Figma model until Figma highlighted what was clickable. In our high-fi prototype besides distinguishing the light blue with darker blue, we also used black and white fill and drop shadows to signify if buttons were clickable.

Only boxes that were light blue and shadowed were clickable

Final Outcome

During our final presentation our class was very impressed with the detail and size of our project. Our team acknowledged that we had rebuilt a lot of features that already existed in other apps, and that while we created more social features perhaps our scope should have been more focused. We had also seen other presentations by this time and felt like our kid-friendly version of the app missed a lot of kid-orientated animations like stickers, curves, and animations. The teaching assistants felt like it was very flushed out and liked that we included our next steps.

I was really proud of this project because it felt really flushed out. Even if it wasn’t the most original design, it was completed and could have been shipped to engineers to build. If there was one thing I learned from the project, it was to find the target audience at any cost. Everyone in the team interviewed parents or fellow tutors during the research process. We failed to reach out to actual K-12 students because of our age gap (until user testing), but I think because our main audience actually was the children, we should have found them. None of the children we contacted needed a tutor but liked our app, so if we had talked earlier they may have led us to create something other than a tutoring app.

--

--

Christian Lay-Geng
0 Followers

A UCSD grad, aspiring UIUX designer. I can often be found in UX roles because I enjoy relating with end-users. My hobbies are in anime and in VR!