Redesigning Sensei™ to better support user growth

Research Process and Findings

Why don't teachers use Sensei?

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:

‍

Teachers don't use Sensei ≠ teachers don't like Sensei. Sometimes they just don't know how to use it.

‍

‍

We identified 3 main problems of Sensei based on the insights from research findings:

‍

😞 Problem 1: Data is hard to access —‍

“I feel that Sensei has a lot of data that I can’t access because I don’t know how.”

😞 Problem 2: Data is hard to interpret —

“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."

😞 Problem 3: Data is hard to take action on —

“When I read the data, I wish Sensei could tell me what the next reasonable step was.”

‍

‍

‍

‍

‍

‍

Design Scope and Ideation

How I turned research problems to design solutions.

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.

‍

‍

‍

‍

Design Rationale and Solutions

Introducing Sensei Pro, an interactive data platform with data that are easy to access, interpret, and take action on.

‍

‍

‍

😃 My solution to problem 1 "Data is hard to access": easily accessing data with Flat Card View.

‍

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.

‍

‍

😃 My solution to problem 2 "Data is hard to interpret": easily interpreting data with Color-Coded Data Visualization.

‍

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.

‍

😃 My solution to problem 3 "Data is hard to take action on": easily taking actions on data with Actionable Recommendations.

‍

Balancing smart recommendations and teacher control.

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.

‍

What kind of recommendations do teachers need?

• To decide on whether to accept a recommendation, teachers need to know the rationale behind it. ‍
• To make sure that each recommendation tailors the specific need of an individual student, teachers need to preview and edit before approving a recommendation.

‍

My design carefully addressed these considerations by

• placing each recommendation near its source data.
• making each recommendation customizable.

‍

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.

‍

‍

Being engineer's best friend by delivering an interactive prototype.

👇 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.

‍

‍

‍

Accessibility Testing — How I decided on colors and styling.

‍

‍

‍

‍

‍

‍

‍

‍

Success Measurement

Teachers love Sensei Pro!

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:

‍

30% and 40% higher rated regarding usability (scales 1 to 10).

‍

‍

47% faster on the average performance of a task (47 sec → 25 sec).

‍

‍

‍

55 - 75% fewer clicks (12 → 3) when accessing an assignment or an individual data report.

‍

‍

‍

‍

Teachers who participated in usability testing sessions said a lot of good words about Sensei Pro! 😍

‍

Sensei Pro is intuitive.

"My not-so-computer-savvy friends could do much better with it because it’s so much more clear."

Sensei Pro is easily adaptable.

"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."

Sensei Pro is more efficient to use by lowering cognitive loads.

"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

• Time of task completion
• Number of clicks

Process and Methodology

• During each testing session, 1 subject is required to perform 7 tasks on Sensei Original and Sensei Pro.
• We observe the subject's think-aloud interaction with both platforms, and record the time of completion and the number of clicks, respectively.
• At the end of each session, we ask the subject to rate the usability of Sensei Original and Sensei Pro, respectively, in scales of 1 to 10 with 1 being “hard to use” and 10 being “easy to use”.

Tasks

• Access a previously created assignment
• identify students who are scored in a certain percentage range on the assignment
• Access a student’s individual data report
• Access a specific topic
• Identify struggling students within a topic
• Assign more practice to students who are struggling

‍

‍

Project Reflection

What I learned

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.