The goal

Lynnette is an online tutoring software for simple algebraic equations; I was tasked with redesigning the interface to be more engaging.

The users

Middle school students were the primary users. The tutor was meant to be used in a computer lab setting during school, so teachers also needed to be considered.

The team

I worked at CMU’s Human Computer Interaction Institute on an interdisciplinary team under the direction of Vincent Aleven and Jonathan Sewall. There were two other designers on the team who decided upon the color palette and space theme, but I designed all of the interactions and layout on the problem solving interface.


Final Concept

My redesigned interface incorporated many different educational principles from scientific papers or addressed issues brought up in focus groups and user testing.


Top 20 Principles from Psychology for PreK-12 Teaching and Learning

American Psychology Association

  • Principle 10: "Students persist in the face of challenging tasks and process information more deeply when they adopt mastery goals rather than performance goals.”

  • Principle 12: "Setting goals that are short term (proximal), specific, and moderately challenging enhances motivation more than establishing goals that are long term (distal), general, and overly challenging.”


To engage students, problem levels were represented by planets. Mastered planets were shown on a separate page in full color, while unmastered planets were shown partially filled in order to motivate students.



Each level contained several skills. I wanted to include skills on the problem solving interface in order to include shorter term mastery goals in addition to the long term goal of mastering the entire level.


Skill Bar Updates

Students' Understanding of their Student Model

Yanjin Long and Vincent Aleven

  •  "We found that students pay close attention to the OLM and report that seeing it change encourages them to learn…” (OLM = Online Learning Module, a.k.a. the tutor interface)

  • “students inspected the OLM frequently to see their progress, but thought that the design of the OLM was too simple to convey much progress information”

Correct Steps

The animation for a correctly attempted step reflects how the skill bar is updated, filling the input box from left to right as the skill bar increases from left to right. The skills being used in that step are temporarily highlighted, so a student interested in how the tutor works can better understand how skills and steps are related. However, the highlighting of the skills being used doesn’t slow down the problem solving process.

Incorrect Steps

The animation for an incorrectly attempted step also reflects the corresponding skill bar update, filling the input box from right to left. However, for all future attempts, the animation changes. This is because the tutor only updates skill bars based on the first attempt. As such, the pulsing animation doesn’t imply an increasing or decreasing skill bar.

Skill Mastery 

A major component of engagement is to set concrete, short term goals to motivate students. I wanted to design a more elaborate interaction for the mastery of a skill that would begin the same as the animation for a correct answer.

Level Mastery

A level is completed by mastering every skill, rewarding the student with a planet. The animation for the mastery of a whole level needed to be much more elaborate than the mastery of just a skill.

Error History

Students' Understanding of their Student Model

Yanjin Long and Vincent Aleven

  •  “Therefore, the discrepancy between the student’s and system’s assessment may indicate inaccurate self-assessment abilities of the students.”

I observed this finding in user testing as well. Students would be unpleasantly surprised when their skill bars decreased after finishing a problem (this earlier prototype didn’t immediately update skill bars). Displaying the history of errors and hints will avoid such a surprise, but testing will need to be done to see if showing error history will be too demotivating.

Showing the error history on the problem solving interface will also help teachers. Through contextual inquiry, it was found that students often avoid asking for help even if they need it. However, with error history being shown, teachers can see who they may need to help just by looking at a student’s screen.


In order to ensure a student won’t remain stuck, the last hint for a step will often contain the correct answer. Through focus groups, it became clear that students often disliked reaching this last hint prematurely. This issue is alleviated by providing visual feedback for how many hints are left until the final hint.



Mapping Interactions

I wrote down all the student inputs necessary to solve a problem, noted what feedback already existed, and looked into ways that feedback could be extended and improved. I wanted feedback to be immediate, informative, and fun.


Skill Bar Updates

The primary challenge was how explicit to make the skill bar updates. In the following two prototypes I realized I had gone too far, as the problem solving process itself was being slowed down by the skill bars being updated.


Animation specifics

The initial animation I designed was a simple linear “wave” from left to right. However, the motion behind this animation didn’t feel dynamic enough.


While this animation was certainly more dynamic than a linear animation, I thought it was too distracting.

Mastery Interactions

In creating a special interaction for the mastery of a skill or a level, I wanted to make sure that the initial part of the animation was the same as a correct answer animation, in order to avoid confusion.


This animation didn’t have the same rhythmic, satisfying feel as the other mastery animation.

Error History

I experimented with different ways of showing the history of a step being completed with two errors (-10x-10), one error (20), and no errors (-10x-10+10). I wanted to iterate through ideas which were ridiculous, literal, and practical.


I was able to work with an engineer to implement my final design, having several back and forth conversations. I learned a lot about the importance of consistency in interaction design.



These papers provided key insights for how to design Lynnette.

Students' Understanding of their Student Model

Yanjin Long and Vincent Aleven

Top 20 Principles from Psychology for PreK-12 Teaching and Learning

American Psychology Association

Active Learners: Redesigning an Intelligent Tutoring System to Support Self-Regulated Learning

Yanjin Long and Vincent Aleven