CMU Computer Science Academy

ROLE

Lead UX Designer

TIMELINE

since June 2018

TEAM

Carolyn Chheath
Yanran Han
Janet Peng
Kade Stewart
Se Eun Park

DOMAIN

e-learning
Computer Science
Research

HOMEPAGE-1
OVERVIEW

We provide a fun and challenging computer sicence resource for over 8000 Students, 300 Schools, and 700 teachers nationally and internationally.


CS Academy is an world-class, interactive high school programming and computer science curriculum that bridges the gap between the fun, engaging K-8 resources and rigorous AP CS courses. Microsoft TEALS has adopted this curriculum as part of their Intro to Computer Science offering.

Students learn through interactive notes and over 250 coding exercises, ranging from drawings to animated games!

HOMEPAGE-2
PROCESS

We prioritize user needs. We advocate for design. But we are patient with change.


As the lead UX designer, I prioritize short-term goals within long-term goals through research, feedback, and business needs. From site visits, teacher interviews, and competitive analyses to surveys, design sprints, and affinity diagrams, I the team in discovering and tackling problems. We design iteratively, test out multiple designs, and stay in check with feasibility.

HIGHLIGHTS OF 2018

We challenge existing assumptions.


Students don't read. This was my first challenge in joining the team. I started out by asking two questions:

  1. Why aren't students reading?

  2. What if students don't have to read?

Understanding why students weren't reading and recognizing that reading is only a means to an end, I redesigned how students approach problem solving. I sketched out user journeys and created low to high fidelity prototypes to test with potential users and present to the rest of the team. 

The final design was an interactive checklist, which makes understanding the problem more digestible, engaging, and fun. It also ties in closely with the programming test cases, which students use to debug their code.

EXERCISE-PAGE-FINAL

Microinteractions! Microinteractions!


Amidst redesigning the exercise experience, I discovered that confusing microinteractions in the exercises were taking away from students' problem solving and learning. I fleshed out the use cases, edge cases, and visual language that these contexts could translate to. 

For fun, I used Framer to create an animation for showing student progress at the end of an exercise.

TEST-CASE-MICROINTERACTIONS-masked
HIGHLIGHTS OF 2019

We seek to understand why the
problem exists.


We discovered that teachers were not using a lot of the resources in the platform. Through our research, we found that some tools were irrelevant to teacher needs, possessed too high of a learning curve, or were so lost in the weeds that our teachers couldn't discover them. We wanted to redesign this teacher experience. 

undisoverable
redundant
inaccessible
overwhelming

learnable
simple
accessible
digestable

How can we improve navigation and discoverability?


One of the biggest pain points was confusing navigation and congested content. Our work involved reworking the site taxonomy, cleaning up content, and improving information hierarchy. 

COURSE-FINAL

How can we streamline management within and across classes?

TEACHER-PORTAL-UNCOLORED-FINAL

How do we increase transparency between teachers and students and facilitate feedback in a personalized learning environment?

PROGRESS-FINAL

Stay tuned for more on the design system, a more accessible approach to problem solving, and our solution to increasing teacher awarenesss.


How can we improve our visual language and design more efficiently?
We are refining the design system not just for our users but for the team and the long-term vision of CMU CS Academy. 

How can we improve on the accessibility of our platform?
People have different mental models, modes of learning, and disabilities when it comes to problem solving. We are pursuing a more personalized approach towards coding exercises. Modular coding environments perhaps?

How can we keep teachers more informed?
Teachers need to keep up with a lot of things—quizzes, grades, progress, deadlines, etc. While teachers initially expressed an interest in receiving notifications, we quickly realized that people don't always want what they say they want. This is a problem of awareness and a notifications feature isn't necessarily the answer.

How can we improve the onboarding experience for new CMU CS Academy team members?
It can be difficult to bring important tacit knowledge to the forefront and bring new team members up to speed. What do they need to know? Who can they communicate with when? How can we integrate them into the culture?

I look forward to growing further as a designer, researcher, leader, collaborator, coder, & conversationalist.


My role as UX Design Lead has given me the opportunity to learn and grow across so many disciplines. With a new metrics team, I'm excited to use more quantiative data to inform UX Design, and vise versa.

One of my favorite things about working for CS Academy is seeing the excitement and creativity students bring to learning and coding from scratch. Seeing how the course personalizes learning for students and transforms the role of the teacher from a deliverer of knowledge to a debugger and guide, is truly rewarding.