UX Design • E-Learning
Team: Carolyn Chheath & Yanran han
Duration: 1 year
Role: Lead ux designer, research
CS Academy is an online, interactive high school computer science curriculum founded at Carnegie Mellon University. The platform bridges the gap between the fun, engaging K-8 resources and the challenging AP CS courses, while providing extensive teacher support. There are currently 6000 students from over 300 schools nationally and internationally. Microsoft TEALS has adopted this curriculum as part of their Introduction to Computer Science offering as we continue to expand the curriculum.
Students learn through interactive notes and over 250 coding exercises, ranging from drawings to animated games! These are just a few samples of coding exercises in the course’s custom graphics package:
Roles + Responsibilities
I’ve been working for CS Academy as the Lead UX Designer since June 2018, 1 year after its inception.
We build an understanding of challenges and opportunities for our users and our internal processes. Our research often includes interviews, site visits, surveys, web metrics, competitive analyses, and more. We design through an iterative process, from low-fi paper sketches to high-fi prototypes in Figma and Framer.
Recently, we’ve been working on improving site taxonomy, content and UX for notifications, and a design system for the platform. Amidst my primary UX work, I review interactions for student exercises and author exercise instructions.
Students don’t read.
Whether it’s going through lesson notes or understanding the criteria for a coding exercise, students often skip reading and digesting information presented to them. This issue was beginning to be addressed in lesson notes through chunking and interactive checkpoints, but became a focus of mine in Summer 2018 as part of redesigning the experience of coding exercises.
Through many iterations, we found an “automated checklist” to be most valuable. It requires that students interact with the canvas and test cases to help them understanding an exercise. It encourages students to understand an exercise before jumping in, but to remain engaged while doing so, striking a balance between guidance and self-discovery in learning.
Here’s a fun animation I made to make student exercises more engaging.
In redesigning the experience of student exercises, we uncovered many issues regarding button and test case interactions, which are frequently used components in the system. Much of these usability issues stemmed from the build-up of confusing micro-interactions and coding feedback.
Challenges — Fall 2018
How do teachers use our resources
and how can we add value to this experience?
CS Academy provides plenty of teacher support, some of which exist as external sources. Through our research, we began to uncover pain points and opportunities for improving awareness and accessibility for teacher resources.
Features that we redesigned and integrated into a cohesive teacher portal include:
How can we streamline management within and across classes?
How can we better the information architecture of the course to improve navigation and discoverability?
How can we keep teachers informed about student progress in a more personalized learning environment?
How do we facilitate and track feedback between students & teachers?
How can we increase organization and engagement when taking quizzes?
Marketing became an important mini-project amidst revamping the teacher portal. Here I worked on designing the splash page to convey the essence of CS Academy to new site visitors. This involved evaluating the value and personality of CS Academy, performing competitive analyses, and designing for an MVP.
People use different tools in tandem with your system. We are designing systems within systems.
People have access to different resources/technologies, so how do you optimize functionality and accommodate, provide versatility and consistency?
The “ideal” design may not be the best design for the current system. Changes are incremental, not abrupt, and becoming better is a continual process.
Interactions can be very complex so producing low fidelity prototypes is super valuable in order to “fail fast”.
When presented with a possible issue, asking why can be super important to finding it's root cause. For example, students cheat. But why do students cheat.
Understand what people say they want vs. what they actually want because it can be different.
Issues and ideas rise faster than you can tackle them, so prioritization becomes super important.
Does the value that a new design brings outweigh its steeper learning curve?
The consequences of a design change are often not what you’d expect.
Taking over one’s role is slow at first because so much knowledge becomes tacit knowledge and cannot be passed on.
Ask questions, push back, be honest, be open, be trusting.
One of my favorite things about working for CS Academy is seeing the excitement and creativity students bring to learning and coding from scratch, which includes everything from drawings, to animations and games. Seeing how the course personalizes learning for students and transforms the role of the teacher from a deliverer of knowledge to debugger and guide, is very rewarding.
In addition to the meaning it has brought to students and teachers, it has given me tangible experiences to help me learn and grow in my roles as a designer, researcher, leader, collaborator, coder, and conversationalist.