COVER_photo.png

Lynnette

Lynnette_Cover.png

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.

Engagement

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

Mastery

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.

1-LynnetteHighlight_planets.png

Skills

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.

LynnetteHighlightArea2.png

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.

Hints

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.

 

Process

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.

ScanFin2.jpg

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.

ScanFin1.jpg

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.

20-skillGainIteration1.gif

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.

BookScanCenter.jpg

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.

Conclusion

My final prototype is being implemented and I will be participating in student testing in the coming months! I’m looking forward to seeing how students interact with the tutor and working together with engineers on the next iteration.

 

References

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