EduPad

Time period: Sep 2020 – Dec 2020

Team members: Junghyun Choy, Haohong Lin, Beny Mizrachi, mentored by Ron Zhang

Keywords: product design, UI/UX design

Project Overview

In collaboration with HP, we explored the experiences of virtual elementary school classrooms to improve hands-on learning for teachers and students ages 5 to 8. I was primarily responsible for leading user research and designing our product’s web app.

Through this project, I learned a lot about collaborating online; I had never done a design project completely remotely before. I learned to use some new methods, such as a weighted matrix, as a part of our process. If we had more time on this project, I would want to test our prototype with students in addition to teachers.

Identifying Opportunities

Stakeholders: Initially, we created a 2x2 matrix to help us identify the key stakeholders who would be involved in our product opportunity. This helped us determine that younger children, elementary school teachers, and those who teach hands-on subjects are impacted by distance learning the most.

matrix of stakeholders in distance learning

Secondary research: We researched online about the social, economic, and technological factors of remote learning and learned about the difficulties of:

Overall, we determined that we would center our project around elementary school teachers and students in kindergarten through third grade.

User Research

We set out with these questions:

I developed our user research plan, and reached out to over 120 teachers with a survey. From the 18 responses, we learned that the top concerns with distance learning are:

We interviewed 3 elementary school teachers and a school IT director and learned:

We also sat in on 3 videocall classrooms to directly observe the dynamics of elementary school students learning online:

Research Synthesis

Based on our research insights, we created our teacher persona, Amy:

description of our teacher persona

We organized a journey of Amy’s day (click image for full size):

journey map for teacher persona

We decided to focus our product opportunity on the teaching a lesson part of the journey.

At this point we finally had enough data to revise our problem statement, since our initial problem statement being very broad about remote learning. We constructed an affinity map of opportunities based on our research insights. After 3 rounds of dot voting and discussion, we converged on a final opportunity: How might we make remote learning more tangible/hands-on for K-3rd grade students by combining digital and physical methods?

Ideation

We constructed these product requirements to help guide our ideation:

We began by each generating 10 concepts, prioritizing quantity over quality. We then did a structured group brainwriting exercise, where everyone selects three ideas of their own for someone else to brainstorm off of to create three additional ideas. We did two rounds of this exercise, then narrowed down our ~50 concepts by:

Some of our final remaining ideas were primarily software-based and some were hardware, so we looked to combine these concepts into a single product.

Final Concept

We wanted to build off the assumption that students already have school-issued Chromebook or other computing device that they are using for remote learning.

Our final concept was a USB-attachable tablet with a surface for writing and drawing, and tactile buttons for video calling shortcuts. It would come with a stylus so students can write on the surface, and pair with our custom-designed videocall web app that integrates drawing directly into the digital classroom.

Since many students already have some sort of laptop they use to attend classes, our product would support and be compatible with existing technology.

Prototyping

Half of our team worked on the physical prototype while the other half (including me) focused on the digital prototype.

Physical Device Prototype

Here are some mockups of how we envisioned our product:

EduPad mockup

EduPad mockups

(lifestyle photography below provided by HP)

EduPad mockups in HP lifestyle photos

Web App Prototype

I primarily worked on our web app prototype in Figma. I started out by drawing user flow diagrams:

web app user flow diagrams

Then low-fidelity wireframing:

low-fidelity wireframes of web app

As we moved into high-fidelity mockups, I kept in mind the visual language that we wanted to maintain. Since we were designing for kids who are still developing their digital literacy, we wanted to use bright colors and tactile-looking UI elements:

videocall controls

I chose Proxima Nova as the main font because its taller x-height gives it a friendly appearance that is easy to read.

Product Features

Our online component would integrate with Clever, which many schools already use as their one-stop hub of classroom apps. This way, students can easily log on with a system they’re familiar with.

sign-in screen

They can see their schedule for the day and join class with one click. This relates back to our teacher interviews where we learned that maintaining a daily routine is important.

sign-in screen

In class, teachers can start a drawing activity by adding instructions and setting an optional timer.

start drawing activity screen

Back on the student side, they now see the drawing interface. Whatever they draw with the tablet will show up on screen. They can also signal to the teacher with the “Raise Hand” button or “I’m Done!” button

student drawing activity screen

start drawing activity screen

Once the activity is started, teachers see a grid of all of their students drawings in real time. They can then select a student to see a bigger view of their drawing to give feedback on.

teacher overview screen

This addresses pain points surrounding giving feedback on student work.

teacher feedback screen

User Testing

We tested our prototypes with 2 teachers by walking them through the prototype on Figma, and showing pictures of the physical prototype.

Originally, we had considered letting teachers discuss questions with students in a private breakout room. However, the feedback we got pointed out two issues: first, having a teacher and student alone in a breakout room is a safety risk, and in at least some school districts, not allowed; second, unless there was another adult to supervise the rest of the students, the rest of the class cannot be left unattended.

Some suggestions for improvement were to implement a show-and-tell feature so teachers could showcase student work, let teachers check work quickly by giving checkmarks for perfect scores and circling parts that students need to improve on, and let students save their work for later and finish them, for example, at the end of class.

Overall, both teachers thought our product would be very useful; one of them said, “This would be incredible, if I could have this right now and see what my kids are writing.”

Acknowledgements

Thanks to Ron Zhang from HP and Professor Kosa Goucher-Lambert for their guidance on this project!

Image credits