Marcos Perez
Marcos Perez
Product Designer (UX/UI)
 
 

Backpack | Teacher Portal

An inclusive e-learning product for interactive learning that fosters collaboration between teacher, student and parent.

 
 

Project Brief
During the growing pandemic, we found a gap in online learning between grades K-6. Many of the students, teachers and parents were overwhelmed with the amount of online tools they needed to use, passwords they needed to memorize, and communication struggles between each other. Our team was tasked to evaluate and ideate a solution – how might we build a comprehensive online learning tool that would satisfy these core needs?

My Role
As part of the DePaul University’s 10-week HCI capstone project, I was the project lead in a team of three. My main focus was to work on the teacher’s portal and develop the design system for the team. I also took initiative to create a project management tool to ensure our team was meeting deadlines, had matching work loads, and coordinated meetings.

Skills Demonstrated
UX/UI Design
User research
Usability Testing

Tools Used
Pen and Paper
Figma
Google G-Suite
Slack

 
 

Project Process

ProjectProcess.jpg
 
 

DISCOVERY PROCESS

Research Methods

 

Competitive analysis

We compared three of the major e-learning platforms on the market - Seesaw, Socreative, and Google Classroom.

 
Seasaw

Seasaw

Socrative

Socrative

Google Classroom

Google Classroom

 
Frame 7.png
 

User Interviews:

To validate the problem we spoke to a total of six people, consisting of three teachers and three parents.
(We were not able to interview students due to IRB restrictions).

  • Our goal was to understand the barriers that teachers, students, and parents face while participating in e-learning.

 

Affinity Mapping

To analyze our interviews, we used inductive coding to group common ideas, feelings, and frustrations. These were then organized to group common themes and attributes together through the use of an affinity diagram.

 
 

Findings

Primary Research

Our research provided us with a clear landscape of the issues affecting our target users, what content should be prioritized, and what tools should be elevated to best suit their needs. The findings can be summarized as follows:

  • 66.6% of the teachers expressed frustration when managing the various programs they had to use for class management and assignments.

  • 100% of teacher noted challenges to keep track of student work during school hours and to aid those who do not speak up if they are struggling.

  • 83% of All participants reported difficulties with keeping track of messages from various platforms (includes parents and teachers.

 
Desktop Copy.png
 

Ideation

Teacher User type

To understand the users' backgrounds, motivations, and needs, I built a teacher persona based on our user interviews and affinity diagram.  

 
 

Xochi

Work: 2nd Grade Teacher

Goal: Easy communication with parents; monitor student classwork closely. 

Frustration: Hard to communicate with parents and students, is not sure how to accommodate children who do not ask for help.


 

User task analysis

After having a basic understanding of each persona’s user journey, we developed a user task analysis for three personas to streamline the user tasks for our prototype and define our major functions and basic user flows.

 

 

Lo-fi

 
 

Sketches

In our ideation phase, we developed lo-fi sketches for each of our use cases. This was done to explore potential solutions and requirements to the users’ pain points.

 
lofi.png
lofi_asign.jpg
lofi_Message.jpg

Lo-fi Wireframe

Lo-fi wire frames had 1 round of testing with 3 teachers. This helped me to identify areas of improvement.


 

Solution

Wire-framing & Prototyping

 
 

Home Page - link Organization

Prioritizing organization in the home screen, allows the users to quickly access external links and 3rd party software. This allows for offloading the various tools a teachers uses in their day to day.

 

Student Progress

Student progress was developed to aid teachers with keeping a closer eye on students while they worked during class hours. This also helps with identifying student who might be struggling and are not asking for help.  

 

Messaging

Communication with parents and students was a high pain point for teachers. Messaging allows for singular location for communication and quick access to parent and students.


 

Design System

To stay consistent across three interfaces, I built a base level design system for our hi-fi prototype. This was then added on by the other team members. The final product consisted of 90 UI components, a fully developed color system, and character styles.

 
 
 
 
 

TEAM MEMBERS

Marcos Perez
Qiren Lu
Harry Cao