Lynnette algebra tutor

I redesigned Lynnette, an online algebra UI, to communicate to students how their progress was assessed in the back end.

Overview

The problem

The problem was that students didn’t find the existing tutoring UI engaging, since they didn’t understand how their progress was being assessed.


Biggest research insight

Students had difficulty understanding how the system was assessing them.

My role

UX designer

  • User interviews

  • Academic research

  • Interaction design

  • Prototyping

The users

  • Middle school students

  • Middle school teachers

Timeframe

3 months - UX work

Contributors

Vincent Aleven - SME
Jonathan Sewall - SME
Sharon Dayoung Lee - UX
Katie Chen - UX

Final concept

Skill increase

When a student correctly completed a step, the UI reflected the increase in their skills and highlighted which skills were involved.

Skill decrease

When a student incorrectly completed a step, the UI reflected the decrease in their skills and showed that subsequent incorrect answers wouldn’t additionally decrease their skills.

Skill mastery

When a student mastered a skill, the UI would reward them with a juicier micro-interaction.

Level mastery (all skills mastered)

When a student mastered every skill, thus completing the level, the UI micro-interaction is even juicier.

The process

Getting up to speed

Joining an ongoing project, my first priority was to be a sponge, interviewing teachers who used the software and watching recorded student focus groups.

Screenshot of a skype call interview with a teacher
Screenshot of video of student focus group

Applying academic research

In lieu of direct user testing, I wanted to apply as much academic research as possible to the mockups I was designing.

Screenshot from a research paper about the discrepancy between students' self-assessment of their abilities and the back end system's

Students' Understanding of their Student Model - Yanjin Long and Vincent Aleven

Screenshot of an animation showing an algebra step being explicitly tied to a skill

Prototype explicitly demonstrating how the system was assessing skill

Handling design solution feedback

I would occasionally receive design solutions as feedback from stakeholders and became practiced at asking “why” to understand the reasoning.

After understanding the reasoning, if I proposed a different solution, I’d still quickly mock up their solution to provide a visual comparison.

Lynnette UI with past algebraic boxes hidden, a design solution I was provided as feedback

Design solution given as feedback

Lynnette UI with past algebraic boxes faded, my proposal

My proposal

My reflection

What was I right about?
When explaining design decisions to stakeholders, it helped to speak their language, in this case, academic research terminology.

What was I wrong about?
Because we were working in a waterfall structure, I initially thought my work was “done” when I handed off mockups.

What would I do differently?
I would push for a success metric that I could test and measure with design prototypes.