top of page

Online Learning Platform

Project Team: Emily Nguyen, Jennifer Pham, 

                         Spencer Keats, Weiyi Ma

Timeline: 6 weeks
Location: UCSD, San Diego, CA

My role: UX Research &UX Design 

Research: Co-designed and spread out surveys and conducted user interviews. 

Design: Lo-fi wireframes and hi-fi prototype making.


  "Going to school used to excite me, but sitting in front of a computer for eight hours a day does not interest me. I wish we could go back, even one day a week. Even one day a month. Even in small groups. I don’t really care. "

Make learning fun again!


Education was one of the areas that suffered the most during the COVID-19. Students and teachers are required to attend class online, and interaction with one another is prohibited. K-12 students, in particular, are at a stage in their lives when they are easily distracted and restless. As a result, during the remote learning phase, some of them are having difficulty learning new materials. Thus, we raise the question that:

How might we support engaging and effective learning and teaching in an asynchronous and remote setting?

User Research

  Research Methods Used


User Interviews


We collected 30+ responses from students and teachers who are experiencing remote learning. 

Goal:  To get a general feedback on user's thoughts about remote learning tools. What they like about it? What they don't like about it?

Result:   We developed a survey cloud to collect some of the terms that respondents mentioned in their replies. Users like tools that are well-organized and simple to use. They dislike the user interface, the overwhelming amount of information, the conflict between teachers and the students, and the current tools' restricted communication.


User Interviews

Interviews were done with two students and two instructors from the high school levels.

Goal:  To learn more about our target users' lifestyles and school situations. Obtain thorough information about their worries about distant learning as well.

 High School Computer Graphics Teacher
Orange County, CA

"I attempted to connect with my students, but it wasn't easy to persuade them to participate.  I had to use the break room to allow kids to work in groups. But I couldn't see what they were doing in the group."

Stuck at Home - Group Call.png

 High School Student
San Jose, CA

"I liked how online classes had a lesser workload than in-person sessions and that the content was simpler. However, I miss conversing with my friends, and my interactions with professors were restricted to the break rooms. There is no other form of communication accessible."

Stuck at Home - Working from Home.png


1. There is a shortage of communication between students and teachers both in and out of the classroom
• Students are not actively engaging in class
• Comments made during class are easily disregarded
• Outside of class, students have limited access to teachers
2. Teachers are concerned about a lack of support toward students
• Due to a lack of feedback, teachers are unaware of students' struggles
• Students frequently muffle themselves to make it appear as if they are not present at all
3. Working out in groups is considerably more challenging
• Breakout rooms are the only method to have group discussions in class; yet, professors cannot monitor each group individually
• If students wish to connect outside of class, they face a physical barrier


Frame 3.png


Hannah is 17 and currently lives at home in Orange Country with two younger siblings, her parents and her cousin. She's sharing the room with her sister, so sometimes she has to take courses in the kitchen. She liked listening to music and attended a band in her school. However, during the quarantine, the practice was suspended.

1. Want to find a way to communicate with her friends and teachers more
2. Want to do more extracurricular activities without disturbing others
3. Want to balance her responsibilities in the house and the school


1. She had to turn her webcam and microphone off during class because the kitchen can get quite busy.

2. Sometimes she would eat lunch during class because there is not enough time to eat.

3. Her parents occasionally ask her to do chores around the house during her classes, which bothers her quite a bit but she can’t do much about that.

Frame 4.png


Sam is 52 year-old, recently divorced Computer Science teacher with two children whom he lost custody to. He lives alone in Los Angeles. Sam only receives visits from his children once every two weeks, and otherwise spends the rest of his time taking care of his four American Shorthairs. Sam is lonely so he devotes himself heavily to his hobbies and to his work. He cares about his students as if they were his own children.


1. Create a curriculum that can function over remote learning that can still engage students

2. Have a form of communication with students that go beyond the Zoom call and emails
3. Get more students engaged and participating

4. Some form of social interaction between students and teachers supports students educationally and keeps their mental health


1. Sam is unsure if the curriculum he is writing is effective;

2. He receives little to no feedback from students about their assignments

3. He is unsure about which students are struggling.

4. There is almost no communication between him and his students both during and after school.


To address our target users' issues, we developed storyboards based on their goals and frustrations to demonstrate how we might alleviate their pain points by creating a new remote learning solution. Then, we present storyboards to our target users again, asking for their preference and soliciting their feedback.

Reward system

By providing students with a benefit for engaging in class, they are more likely to participate in group projects and communicate with the teacher in class.

Instant messenger

The instant messenger allows students to connect with the teacher in a more direct and immediate manner, both in and out of class.

Disscussion board

The more interactive discussion board allows students to post their questions and help others. In conjunction with the reward system, students may earn credits by answering questions.


1. The majority of users favor the reward system.
• Students believe that a reward system will motivate them to interact.
• Teachers believe that the reward system will encourage students to provide feedback on class material.
• Some users are concerned that the system may lead to student comparisons.
2. Thoughts on the instant messenger are both good and bad
• Some students appreciate the notion of using an instant messenger since they can obtain replies from teachers right away, especially during examinations.
• Some people believe that having an instant messenger is superfluous. They believe that using discussion board is sufficient.
• A slew of new information structures and designs must be examined by us.
3. The interactive discussion board is a "nice to have" feature.
• Most remote learning systems already feature a discussion board. 
• Students may provide a random answer merely to gain credit; otherwise, we must consider censorship.

Lo-Fi Prototype

Based on the user feed back, we decided to focus on the reward system as our solution. Then, we move on to Figma and create a low-fidelity prototype with all the functions we want to include.



In this state, we designed each wireframe independently, then convened and criticized each design. With a few recycle, we integrated our design together.

Frame 3.png
Frame 4.png
Frame 5.png
Frame 6.png
Frame 7.png
Frame 8.png

Click on the photos to see more details!

Design Language

We specifically paid attention to our design language since K12 students usually prefer a colorful interface.

Mood Boards

By searching for related figures and words, mood boards give us hints on our system's emotions.

Screen Shot 2021-10-11 at 2.42.43 PM.png
Screen Shot 2021-10-11 at 2.41.29 PM.png

Components Style

Frame 6.png


We brings our wireframe and style guid to our target users and asked for their opinions.

1. They enjoy the theme color and the fonts
• Most of our users like the purple tone of the system and the fonts. They think it's delightful.

2. The course card should have a bright backdrop to be readable. 

• Users report that some of the card style's backgrounds are excessively dark, making the text unreadable.
3. The top bar on the teacher's course menu was perplexing 

• Users didn't grasp how the top bar functioned to add different functions to the homepage.

4. We should be aware of the interactive emojis used in class as a product aimed at K12 pupils. Currently, we included three emoticons, one of which is a thumbs-down. This may result in mental school bullying or other ethical difficulties. 

Final Design

Interact or give reactions in class to earn points!


Students can give quick feedback to stimulate discussions and debates.

Frame 1.png
Frame 5.png

Buy new items with your points and equip your favorite item!


Students can use the points they earned to purchase items from the store.


Edit your avatar with the items you bought. 

Frame 2.png
Frame 3.png

Use calendar to follow up your tasks


Students are able to attend class through calendar.

Frame 4.png


Frame 6.png

All of the course cards that students/teachers presently have are displayed on the home page. Four accelerators at the bottom of each card lead to the appropriate page.

Frame 8.png

The system's video tutorials are available on the support page. Separate tutorials are created for teachers and students.

Frame 7.png

The course instructions that teachers had sent out are stored in the inbox. Students can star instructions, delete them, and organize them by course.

A style guid helps you design easier

Creating a design style guide with a theme color, font choice, and major component is critical before producing hi-fi prototypes. This is especially important when working in a group. Our group finished this project during the quarantine and is at different locations in the world. We discovered that the design style assisted us in developing a consistent system without the need for multiple meetings and saved a significant amount of time from adjusting button size and text alignment.

Brainstorming should be use wisely

Brainstorming is a popular method for generating new ideas when working in a group. However, during our first few brainstorming sessions, we discovered that two members constantly share their ideas while the other two seldom speak. As a result, our ideas and thoughts are constrained since individuals constantly tend to agree with others' points of view. So, at the wireframe stage, we decided to work alone first and then review each design during meetings. With this new process, we had various ideas on different functions. Working separately prior to brainstorming helps us create more ideas.

User research need to be more broadly held

Due of the geographical locations of our group members, our user research mostly focused on west coast instructors and students. Furthermore, due to time constraints, we are unable to reach out to users in other districts. This might lead to bias in our survey and interviews. In future projects, I plan to contact more individuals and collect more data in order to build a more reliable user database.


Other projects you might want to check

Uber Extension


Offer safety to the carpooling community

iPhone 14 Pro_edited.png


Accessible social prescribing for the general public

bottom of page