Role UX Designer
Team Monica Chang, Angela Chen, Michelle Lee, Janet Peng
Timeline 6 months, 2020
Team Monica Chang, Angela Chen, Michelle Lee, Janet Peng
Timeline 6 months, 2020
OVERVIEW
CS Academy
CS Academy offers free interactive computer science online curriculum serving students from underserved and underrepresented communities. There are over 250 coding exercises and interactive notes within the platform. Microsoft TEALS has adopted this curriculum as part of their Intro to Computer Science offering. In 2021, CS Academy is being funded by Amazon Future Engineer program.
High-Level Challenge
As CS Academy continues to have an increased amount of users, the platform must be more inclusive and have more flexibility in terms of usage for both teachers and students. At the same time, the platform should convey the core values: creative, professional, challenging.
UX Team Mission given by Product Manager
1. Inclusive design for 900+ teachers and 26000+ students worldwide
We break the mission down into several tasks:
Reorganize Platform Information Architecture for Better Navigation
User Testing & Iteration through rapid prototyping
Accessibility Feature Design for ADHD, dyslexia, visual impairment, and color blindness students
2. Design with CS Academy accent
Upgrade current CS Academy brand image
Redesign Website Interface on Figma with a new design system
PROCESS
Daily design meeting explored the content display and interactions of each interface. We kept asking ourselves: how to make the interfaces more accessible?
Each round of exploration would go through a design cycle of team critique ⇨ iteration ⇨ weekly check in with dev team and report to product manager for feedback.
In between design process, we recruited users of the platform twice to test the new navigation and interactions. After testing, the team conducted affinity diagram together to organize feedback.
PROBLEM 1 - teacher focused
How might we improve teacher’s experience of managing multiple classroom administration set ups?
SOLUTIONS
Reorganize information architecture
1. Restructured and reduced Teacher’s Portal navigation layers
2. Organized and combined Classroom Portal tabs
3. Increased flexibility to switch between classrooms
[ Highlighted boxes are the interfaces that will be featured below ]
Dashboard for all classrooms
⇨ Teacher's Portal
Consider teachers often have multiple classrooms for different CS curriculums, having a homepage dashboard with all classrooms organized will be more convenient for teachers to do administrative set ups.
Navigation between each classroom
⇨ Classroom Portal
Easier switch between classrooms from the side bar by having all classrooms in the drop down menu.
Overview of all assignments
⇨ Assignments
Create an independent tab for all assigned work together to give an overview of what’s been assigned in the past and the upcoming & current tasks. Create better manage system for teachers and prompt teachers to assign quizzes according to their pacing timeline. Also benefits students by keeping track of assignments on one page.
Grouping
⇨ Assignments
Teachers can assign students to work in groups on "creative task" and "collaborative task" at the end of every unit.
PROBLEM 2 - student focused
How might we increase the interactivity of test cases for students?
SOLUTION
Test Case Interaction
⇨ Exercise ⇨ Test Case Section
Test case is a powerful debugging tool that guides students to test their code and problem solve on their own. However, students are not using test cases efficiently and the click data of each test cases are not high. Meaning students didn’t know test case section, previously labeled as "checklist", is clickable? Or they are not interactive enough? How to prompt students click on test cases and run them to test their code?
PROBLEM 3 - student focused
How might we provide better guidance for a diverse of students?
Research & brainstorms:
Reduce visual distraction on exercise screen to focus on the exercise for ADHD, dyslexia, visual impairments, color blindness students. The new features will need to follow the Individualized Education Program (IEP).
SOLUTIONS
Accessibility Settings
Screen settings for customizable exercise screen for ADHD dyslexia students who doesn’t like too much distraction on screen, and to adjust interface display for visually impaired and color blindness students.
Console Error Guide
⇨ Exercise ⇨ Console Section
Similarly to test case section, the console also has low usage and is often ignored.
We want to equip students with the habit of checking which error happened to their code because CS Academy emphasize on students' problem solving skills. Console error guide can also serve as hints for individual students that need special assistance if teachers permit.
We want to equip students with the habit of checking which error happened to their code because CS Academy emphasize on students' problem solving skills. Console error guide can also serve as hints for individual students that need special assistance if teachers permit.
Takeaways
Designing for online curriculum has lots of different aspect to consider: features for teachers and students, consistency design for various function webpages, accessibility for incorporating more students...
The team went through rounds of explorations, critique, testing, and iterations. I’m glad that I joined this team of talented people who were always creative and supportive. Designing interfaces for educational purposes has to be considerate and detail-oriented. This team of 5 nailed it over 2020 summer.
The tasks given were challenging and frustrating sometimes, but this internship definitely had a profound impact on my determination of becoming a UX designer.
Achievement
The biggest recognitions for all of us on the team is to be funded by the Amazon Future engineering program in Fall 2020, which was almost toward the end of my internship. I’m glad that the product we designed will be exposed to more users worldwide!
