Design + HCI at Carnegie Mellon University


work about resume 



Summer 2018
Design Team:
Sharon Lee, Jasper Tom & Katie Chen

I was a design research intern with Professors Vincent Aleven and Jonathan Sewell from the CMU Human Computer Interaction department. I redesigned the UI for the dashboard screen of the Open Learner System, Lynnette, which is aimed at middle school students to help them learn to solve algebraic equations.

I integrated a more gamified, and engaging platform that would motivate students to solve equations in order to collect “badges,” or planets. This was done after continuous user tests with local middle schoolers, interviews with teachers, and analysis of previous research reports written by CMU master students on how rewards, games, etc. affect student learning.

Final Screens - Dashboard UI 

Live Prototype:

Design Process

Understanding the Existing Design

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.

Existing User Flow
After using the system ourselves, we deconstructed what the user flow of the entire mathtutor was. From here we realized reports were almost never used for students, only teachers, but it had valuable information that could be used to motivate students.

Focus Points
We each had specific parts to focus on for the UI development but in general we worked as a team to develop a cohesive theme and design across all features of Lynnette, and conducted user research together when doing interviews with middle school students.

Sharon - Home page and problem selection screen
Katie - Dashboard and problem selection screen
Jasper - Problem solving screen

Secondary Research
Because we were jumping into a project that had already been worked on by a previous team, we had to familiarize ourselves with the research they already did specifically for the structure and user flow of Lynnette. This was less about the UI and more about how we could continue to have successful results in engaging students and improving their learning. We read 7 articles published by outside sources and by phD students that had previously worked on the team with Vincent. The key takeaways were:

  • Mastery/progress bar approach is associated with positive problem selection behavior such as willingness to work on new materials
  • Delayed skill meter updates were more effective in improving self-regulated learning
  • Gamification too much of it can inhibit actual improvement to learning, while too little of it can be rather not engaging/motivating for students (Intrinsic vs Extrinsic incentives)

Based on a first round of primary research done with middle school students, we narrowed down certain specific problems that the UI would play a large role in modifying. 

Problem Selection:
System and Student controlled is effective for learning but the UI makes it hard for students to understand the concept of “mastery”

Progress Reports:
Currently are only being used by teachers since the data displayed is both too hard for students to understand and overwhelming

Design Goal
To improve Self-regulated learning (SRL) through an intrinsically engaging UI and scaffolding features(self assessment prompts, delaying update of progress bars, providing progress information on problem type level)

For me in Particular:
Updating the Mastery/Progress Bar and Dashboard Progress Reports page

Before starting on any designs, I looked into a few apps I had that I felt had effective progress screens to gather some inspiration for how I could better present data, particularly in the progress charts:

Idea Generation
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 whiteboarding overarching ideas of concept directions (gamifying, adding or removing features, etc.). 

This is also when I began to pinpoint what elements I wanted to include in the dashboard and created a new user flow: 

After developing a theme, I thought broadly about what I could do to improve the progress bar and dashboard pages. How could we motivate the students and keep them engaged and interested in learning?

Scroll to see sketches:

Screen Design Iterations

Primary User Research
We conducted user tests with local middle school students to identify what new designs and features were effective and which weren’t. We used a combination of cardsorting in a co-participatory design workshop setting where the students prioritized dashboard elements and arranged them in their own way, and with a guided questionnaire.

These were our key insights:
1. The spider graphs are too complex and unfamiliar. (by timing the students, we found that they understood bar graphs much faster)
2. Younger kids really appreciated having a theme.
3. Some students suggested having a warm up section in the beginning.
4. Clarify completion vs mastery - Unclear whether mastery level was being indicated or completion

Avatar development Illustrations I drew (Procreate, Ipad)

Ad for User testing I designed
Cargo Collective 2017 — Frogtown, Los Angeles