CS Academy—
UX Design • Online Education
Overview
CS Academy is an online, interactive high school computer science curriculum being piloted 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 over 1000 participants from 40 schools nationally and internationally and will be growing to over 130 next year. Microsoft TEALS will be adopting this curriculum as part of their Introduction to Computer Science offering.
Students learn through interactive notes and over 250 coding exercises, ranging from drawings to animated games! Here are just a few samples of coding exercises made using the course’s custom graphics package:
Roles + Responsibilities
I’ve been working on this project as Lead UX Designer since June 2018.
Process
I set goals, delegate tasks, conduct meetings, and present designs to stakeholders and other team leads. I also connect with teachers to answer questions and exchange feedback.
As a team, we collect and consolidate user feedback through interviews, site visits, surveys, think-alouds, and more. We identify challenges and opportunities, which we design for through an iterative process, from low-fi paper sketches to digital mockups in Sketch and to high-fi prototypes in InVision and Framer.
Amidst my primary UX work, I review interactions for student exercises, author exercise instructions, and debug code.
Problems
Summer 2018
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.
Mapping out the flow for engagement with student exercises
Through many iterations, what we came up with was an “automated checklist”. This requires that a student interact with the canvas and test cases and automatically verifies that a student correctly performs a step to understanding an exercise. This is a way to encourage students to understand an exercise before jumping in, but to remain engaged while doing so. It strikes 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 related to button and test case interactions, which are frequently used components in the system. Many usability issues stemmed from the build-up of confusing microinteractions and feedback.
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 uncovered pain points and new potentials related to these resources. Some important questions that began to unfold were: How can we make resources more easily accessible? How can we make teachers more aware of these resources?
Features that we’re redesigning and integrating into a cohesive teacher portal include:
Gradebook
Progress
Pacing
Quiz mode
Creative Tasks
As CS Academy grows within classrooms, 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 fun when taking quizzes?
Conveying Value
Marketing became an important mini-project amidst revamping the teacher portal. Here I worked on designing a visual and 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 analysis, and designing iteratively for an MVP.
Things I’ve learned so far….
users
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.
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. 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.
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.
Team
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.
Final Notes
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.
Thanks to my team members Carolyn Chheath and Yanran Han.