WORK           PLAY          ABOUT


The MEME Project is an online math tutor for middle school students developed by Carnegie Mellon HCII research. I worked on the Quantity Animator team, which developed a feature of the tutor that explains algebraic expressions through interactive animation.

*3D Illustration pack by Alzea Arafat

Role: Visual design, UI/UX
Tool: Figma
Timeline: 7 weeks - Summer 2021


I wanted to create a playful visual style that helps students engage with the algebra tutor yet not distract them from the math problems.

Color and Typography

To emulate the feel of a “simulator,” I chose Ubuntu to be the header, as it has a very digital feel yet is still humanist and playful. I used a dark background to further imply a simulation space while using bright colors to highlight buttons and instructional text. 


Problem Space  🤔

The original design for the Quantity Animator is not very engaging. Students are often bored and unmotivated to do the math problems. 

Solution I ✏️

Introduce a series of narratives to frame the algebra problems, making the experience more game-like.

Solution II ✏️

Redesign the interface of the algebra tutor to make it appear more up-to-date, fun, and immersive.


Although this is a UI redesign and room for big change was not an option, I decontructed the elements on the page and reformated them in a way that makes better sense to the user. I also analyzed competitor products, such as Khan Academy, to better understand the nuanced little interactions that makes a big difference in the user experience.

Left to Right: Competitor Analysis. Wireframe sketches


I learned a lot during my summer internship, through my own work as well as collaborating with design researchers and programmers. Some highlights I’ve gathered:

  1. There are many ways to improve motivation for students to learn math, such as targeting intrinsic motivation by helping them understand the usefulness of math, or extrinsic motivation through many encouragements. Extrinsic motivation can turn into intrinsic motivation when students gain a sense of achievement and want to improve further.
  2. Scaffolding is important as too much information can overwhelm the student, which can be seen through narrative flow as well as hint-giving.


Project Lead: Ken Koedinger, Vincent Aleven
Team Lead + Programmer: Yun Huang
Design Researchers: Shai Bhardwaj, Xinyu Lin
Marketing: Mimi McLaughlin

3D Illustration pack by Alzea Arafat