sharon dayoung lee
lynnette-banner.png

Lynnette Intelligent Tutor System

user experience and user research

 

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

Summer internship 2018
UI/UX, user research, interaction design, A/B testing,
wireframe, beta testing

 
banner-lynnette2.png
 

The Project

Lynnette is an intelligent tutor system that helps middle school students learn algebra. The algorithm of the software was top-notch and was proven to be effective to motivate students. However, the tutor needed improvement with the visual system and the user flow.

My team proposed elements such as badge collection as a more engaging methods to motivate students to solve equations. Our design solution was informed by test sessions with 15 local students from grade 5 to 10, interviews with teacher and instructor, and research from academia on factors affecting students' learning outcomes. By the end of the summer, the finalized interface was shipped to developers.

 
 

My role

As a product designer, I was tasked to redesign the overall flow and the UI elements for Lynnette. Specifically, I worked on the on-boarding, dashboard, and reports page.

In addition, I was to part in facilitating co-design sessions with the user groups and weekly check-in meetings with the entire team.

 
Asset 2@3x.png
onboarding.jpg
dashboard.jpg
lynnette.jpg
 

Goal for the design team

Katie, Jasper, and I each were assigned to work on different features of Lynnette but worked together as a team to gather and present research insights.

I was specifically tasked to create prototypes for student’s on-boarding experiences, problem selection page, and the dashboard.
View website

Our overall goals were to:

  1. Improve the overall user flow.

  2. Create engaging UI through gamification.

  3. Encourage self-regulated learning.

 
 

Gathering insights from original interface

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

user-flow-01.png
 
 

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.

 
 
lynnette-competitive.png
 
 

What do users value?

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.

Initial sketches

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 user 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
 
 

Discovering insights

Through the co–design session, I wanted to look into different ways of communicating their scores in a form of a graph. I 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

Best designs are the designs that meet the scope of the project. This was my first time getting to see my designs shipped to the developers for implementation. Although I tried my best to advocate for my design decisions throughout the process, sometimes I had to make compromises — meeting them half way by sacrificing design features due to the timeline and feasibility.

Clear and constant communication is extremely important when working with developers. When I design, I needed to know if certain things are possible to build on their side. Being able to do so saves time and effort for both of us. The greatest challenge I faced came from not being able to get in a room and discuss my design approaches with the front-end and back-end developers as I created a feature that was not feasible on the back-end. Eventually, we were able to come up with a revised design that was successfully implemented but it took several additional meetings for the design team to revise the design.