Edmentum Sensei was designed to help educators in more than 40,000 schools nationwide seamlessly access and interact with data on their students’ progress. However, it was underused by those who'd benefit the most. As our Carnegie-Mellon HCII Capstone project, we were responsible for investigating the gap between the ideal and actual usage, and providing solutions to fill the gap.
This project is featured on Edmentum's news.
As a UX designer, I practiced the end-to-end process of a product cycle from ideation through prototyping. I worked closely with the project coordinator, researcher, content creator, and developer to identify user needs and product features. I conducted user interviews, surveys, qual. & quant. data analysis with other teammates. I worked with another designer on transforming research insights into design solutions. I iteratively sketched, designed, and prototyped the solutions. In this case study, I'll be only presenting my work.
Figma, Sketch, InVision, Google Forms, Google Sheets, Think-alouds, Descript, Apple Numbers
Our journey began with us trying to understand why the current usage of Sensei was below expectations. After reviewing 17 pieces of literatures, analyzing 7 competitors, surveying 134 teachers, interviewing 17 teachers, and analyzing user logins data in 1.5M usage sessions, we found an interesting fact:
We identified 3 main problems of Sensei based on the insights from research findings:
“I feel that Sensei has a lot of data that I can’t access because I don’t know how.”
“I often have a hard time understanding the data in Sensei. It would be helpful if it gives me an easier time identifying which topics my students need support on."
“When I read the data, I wish Sensei could tell me what the next reasonable step was.”
Firstly, I drew this information architecture map to identify key user interfaces and features. Solid borders are MVP features; dotted borders are nice-to-have features.
Then I sketched low-fi wireframes to reflect data points from the information architecture map. The below wireframes describe the content and behavior of each page and its components.
Sensei Original requires teachers to recall quite an amount of information when accessing a data report. This shuts teachers down from actively accessing the data.
I tackled this issue by applying Nielsen Norman Group's usability heuristics principle for interaction design Recognition Rather than Recall to save teachers' time and reduce cognitive load.
Sensei Pro provides a flat card view that enables picking out a data report at one click and viewing assignment progress at a glance.
A floating card (left) indicates that the assignment is done, ready for view and download.
A bordered card (right) indicates that the assignment is in progress, displaying current progress with a progress bar and annotation text.
Sensei Original visualizes data with a steep learning curve. Teachers often find themselves get lost in the datasheet. Besides, their eyes get fatigued when looking at it.
I tackled this issue by applying color-coded data visualization. With Sensei Pro, teachers can easily understand class and individual performance at a glance and quickly identify struggling students.
My design passed accessibility testing, ensuring that eyes don't get hurt, even when watching continuously.
A chip (left) displays an individual's mastery level on a topic. The floating visual effect indicating it is clickable, covering details.
A container (right) with more information is triggered by clicking on a chip, providing details on an individual’s mastery level.
Data from user interviews and surveys showed that teachers are confident about their expertise. They'd like Sensei to recommend the next steps occasionally to save time, but do not like it when Sensei overdoes.
My design carefully addressed these considerations by
Each recommendation is placed near its source data to better inform teachers the rationales behind the recommendation.
My design respects teachers' expertise by making sure each recommendation is fully customizable.
Teachers have the freedom to accept or reject a recommendation.
Teachers can choose which students to assign the assignment to.
Besides, they can customize the assignment name, the assigned date, the due date, and instructions.
Teachers can preview the assignment, choose which questions to include, and add custom questions.
👇 This is an interactive prototype I made for my developer teammate to smooth engineering handoff. By interacting with it, the developer could understand navigation structure, interactions, and UI elements.
Since he prefers React.js as the frontend framework, I used Material UI native components to ease the styling and implementation.
I applied Atomic Design Methodologies by starting from designing components, and built a design system. I followed 8px grid system to ensure pixel perfect design. I give proper name for each component in my design system to ensure a clean and easy-to-follow engineering handoff.
We conducted a total of 26 usability testing sessions in 5 iterations with 10 teachers (3 existing users and 7 new users). This way, we'd be able to know how our solutions contributes to both retention and conversion, comparing to the original design of Sensei. The results were positive:
Teachers who participated in usability testing sessions said a lot of good words about Sensei Pro! 😍
"My not-so-computer-savvy friends could do much better with it because it’s so much more clear."
"Everything was easy. I’ve never used this ever and I was able to navigate through this more easily than something I’ve been working with for 3 years."
"It’s nice because all the data is right there. I don’t have to go in and find the class report and look on my own, this has it all right there."
"All the stuff I want to see is in one place."
Interested in how we measure success? Here are more details —
Usability Testing Metrics
Process and Methodology
When clients don't use a product, it doesn't necessarily mean they don't like it. Often, they are waiting for a better user experience. Understanding the why behind a problem is always a good start to solving it. When users smile with an "aha", it made my day as a product designer.