Carnegie Mellon Mobile App

Description:

At Carnegie Mellon University, I focused on understanding users ranging from middle school to high school. I wanted to understand how allowing students to choose their difficulty would effect their performance and engagement on the Carnegie Mellon mobile tutors. I focused on making the app more approachable by utilizing my design and technology skills.

Role:

Product Designer/Researcher

Timeline:

May 2023 – August 2023

Tools:

Figma, CSS, JS

Process Overview

Constraints

The previous system, as seen below, runs off of components that could not be changed feasibly in the time that I was there.
I focused on making the best of the components that we had by utilizing them in a creative way to make the user experience more enjoyable while also needing to keep the timeline (10 weeks) in mind. During this time, I redesigned the system under these constraints and also developed these new designs.

Previous Version

The current version was based on a desktop app
My goal was to make this more mobile-friendly and also user-friendly

List of internship goals:

Enhance button size to follow Fitt's Law
Abstract the complexity of the progress bars to show progress after completing problems
Increase Hint readability
Enhance general attractiveness with new colors, fonts, and balance
Allow students to see what they entered to show their work and help them learn faster
Create new screens that would allow the student to choose more complex problems to get done with problems faster
Improve keyboard experience with larger and more focused buttons (no need for many symbols)

Early (First Week) Figma Prototype

After some quick whiteboarding, I created these quick Figma Prototypes to help illustrate my pathway to what I wanted to accomplish. These designs had to be under the constraints of components that we already had, and it would not be feasible to drastically change/add components.
Toward the beginning, there was some skepticism on this being feasible to develop which led me to also become a frontend developer on the team
I learned that being a competent developer is invaluable as a designer so that I can take work off of developers' plates and converse about feasibility in an educated way.
These designs focused on some of my main problems with the current system i.e. complexity overload, small, difficult-to-tap buttons, unclear flow, and general balance/aesthetic problems

Early Features

Reducing cognitive overload by putting progress bars in their own view
Increased button sizes
Cool colors to reduce stress
A large, easy-to-reach hamburger menu for easy navigation

Early Feedback

Separated progress bars did not work well for this application because it looked like they would signify one problem whereas they are supposed to show mastery and only fill on correct answers
Students were confused by this and disappointed when they did not get filled

Goals for new prototypes

Reducing confusion progress bar confusion
Creating motivational screens to keep students engaged
Creating new screens to allow students to have choice in their problem sets
Improving keyboard accessibility
Allowing students to show work

Incorporating insights into the design

Key features

Easy-to-understand progress bar that shows progress of a specific skill
Increased keyboard size with current layout (there are some interesting things to test though still)
Improved navigation with hamburger menu
Easy to read flow that allows students to show work

Key insights from testing with students

The new keyboard was comfortable for most students although it would be interesting to test whether or not the enter button should be on the lower right or the delete button should be on the top right as is customary with keyboards
Students showed a strong preference for the new bars. This was largely summed up by one student who said "I can see what I am focusing on

Testing whether students felt more confident when given the option of choosing harder problems

I wanted to see if giving students the ability to select problems would increase their likelihood of being confident in their problem-solving skills
I found that students generally felt more confident when given this option, but there were also students who felt that it got in the way of their objective (to finish their work)
This problem is something that requires more insights into as encouraging students seemed to be seen as a waste to some

Testing whether students felt more confident with intermittent celebratory and motivational messages

Students seemed to be relatively unaffected by motivational screens that showed up such as this. Students often felt that they got in the way and did not motivate them to finish
This seems to be largely due to most students main motivation which is to finish quickly which is why tying motivating through finishing quicker seems to have been effective

Key Takeaways and further work

Students showed a strong preference for the new progress bars to help them understand what they are focusing on
Students had a strong preference for the enhanced keyboard
Students expressed interest in doing homework this way over by hand as they are always able to do work on their phones
There is still work to be done in understanding how best to motivate students without incurring loss of focus on objectives