Lynnette Intelligent Tutor System

user experience and user research


Lynnette Intelligent Tutor System
Redesigning the tutor experience through human-centered design approach


Skills —
UI/UX, user testing, wireframing, interactive prototyping

Team —
Jasper Tom, Katie Chen

Lynnette is an intelligent tutor system that helps middle school students learn algebra. The algorithm of the software was proven to be affective but the tutor needed improvement on the visual system and user engagement. Our design solution was informed by user study sessions with local student cohorts and teachers and research from academia.

My Role —
Specifically, I worked on the on-boarding, dashboard, and reports page. I was tasked to rethink the initial interaction from homepage to problems page and methods of displaying data to students.


Goal for the Summer Internship —

By the time I had joined the Lynnette team for the summer, the project has gone through several iteration stages to improve the performance of its CTAT implementation in Lynnette 2.0 release. The goal for the design team was to come up with a realistic design solution for Beta implementation, which is proposed to happen in spring 2019. Together with the development team, the design team identified the MVPs for the summer, which were the on-boarding screen, problem solving interface, dashboard, and reports page.

Asset 2@3x.png

Gathering Insights —

The first step we took to tackle this project was look at and analyze the existing UI and features of the program. As we weren’t solely focusing on the visual aspects but also the entire user experience itself, we went and did a few problems as well. We used the program ourselves for 10 minutes at a time and wrote out the user journey for what we experienced and the pain points.


Understanding the existing flow —

After using the system ourselves, we analyzed the user flow of the tutor. From our analysis, we discovered that the report feature was underutilized for student groups while the instructors actively used the feature to understand their students’ performance. However, our research team believed the report feature provided valuable insights for students as well and wanted to make this information accessible to middle school cohorts.


Competitive Analysis —

I referred to other online tutoring platforms such as Khan Academy kids, Komodo Math, and and Varsity Tutors, especially focusing on their user flow and how they engage their audience. All three platforms made use of colorful, cute vector characters to engage young audience.


Brainstorming —

It was definitely helpful for the design team to get together in a room to discuss possible directions for the project, but we are not our users. We needed to see what people wanted to see in their tutor interface, and decided to find this out by testing a few different versions of reports and dashboard page.

We created multiple versions of the report page with bar graphs, spider charts, and circular gage to identify the visualization that worked the best that would be tested during the user study sessions.


New Flow —

At this stage, we had a general idea of what we needed to change, so we worked in a group to generate ideas about what directions we could take this redesign into. This involved white-boarding overarching ideas of concept directions.

This is also when I began to pinpoint what elements I wanted to include in the dashboard and created a new user flow: 

Created by Katie Chen

Validating design decisions —

Through the co–design session, we wanted to look into different ways of communicating their scores in a form of a graph. We decided to conduct a co–design activity where students can cut out multiple types of graphs and put them together in a way they thought was most effective in motivating them to use the tutor.


Takeaways —

Picking up from where the previous team has left me with, most of the flows of the software was already solidified. This project was a learning opportunity for me where I got to work in a setting where a lot of the decisions were already made for me. A lot of the times, the design team had to make compromises with the development team since the high-level coding framework was too difficult to change at this point in the timeline.