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

Above-the-fold-2x-final
OVERVIEW

CS Academy provides a fun and challenging computer science resource for over 8000 Students, 300 Schools, and 700 teachers nationally and internationally.


It is a 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!

Our team is rolling out a brand refresh to better reflect CS Academy's values, purpose, & voice.

Splash-page-sample-final
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 lead 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.

exercises-final-1

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.

microinteractions-final
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 platform 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. 

Information-hierarchy

How can we create a more scalable system?

teacher-home

Content creation and user experience go hand-in-hand. How can we better integrate our voice and style into our resources?

docs-and-colors-final

Stay tuned for more on the design system, better onboarding, and a more accessible approach to problem solving.


How can we improve our visual language and design more efficiently?
We have been redesigning the design system not just for our users but for the team and the long-term vision of CMU CS Academy. While we have many foundational elements currently in flow, we are evolving to refine and flesh out the system further. 

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?

How can we continue to 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 increase equity and inclusivity?
Indeed, CS Academy is a free resource that enables individualized learning. Amidst becoming available in more languages, outreach efforts, and interface accessibility improvements, how can we become more equitable and inclusive from a design standpoint?

illustration-banner-final

I look forward to growing further as a designer, researcher, leader, collaborator, coder, and 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.