Role  UX Designer
Team  Monica Chang, Angela Chen, Michelle Lee, Janet Peng
Timeline  6 months, 2020
OVERVIEW
CS Academy offers interactive computer science online curriculum serving students from underserved and underrepresented communities. 
More than 29 countries, 1200 schools and 50000 students are using the curriculum. There are over 250 coding exercises and interactive notes within the platform that is entirely free. 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
The UX team is redesigning the platform to upgrade CS Academy's current brand image. We aim to better reflect the values and purposes of the curriculum for more students and teachers. 
MY WORK
Design
Design and iterate webpage visual display on Figma with design system
Reconstruct teacher portal full site information hierarchy for new navigation 

User Testing
Conducted usability testing and iterated through rapid prototyping

Accessibility Research
Researched and explored multiple accessibility features for ADHD, dyslexia, visual impairment, and color blindness students
PROBLEM
As teacher and student users were growing rapidly, one of the biggest suggestion CS Academy received:
Navigation of Teacher’s Portal can be easier to operate
We aim to ease teacher’s classroom set ups by redesigning pacing & points, students grouping and assignment dashboard.
GOAL
How to make teacher's life easier?
We aim to ease teacher’s classroom set ups by redesigning pacing & points, students grouping and assignment dashboard.
PROCESS
Weekly meeting with dev and pm
Design cycle: explore a feature --> critique --> iterate --> report --> iterate --> testing --> iterate/document/finalize
(user tested 2 navigation & style, with 7 teachers across the US)
(affinity diagram to further iterate)
Dashboard for all classrooms & navigation of each classroom
Navigation
Problem: information hierarchy not sorted out,
need better navigation for teacher portal, teacher’s administrative set ups (customize the classroom set up, using CS Academy curriculum but different pacing, grading system...)

Consider teachers have different classrooms of different CS curriculums,
Create homepage dashboard with all classrooms “enter classroom” to do further administrative set ups
Make easy to switch between classrooms (from the side menu bar)
Clear classification for all features (according to importance level, combine some classroom features “ grouping” “quiz” into new tab --> “assignments” / add “overview” page as dashboard give teachers a brief info display of the class)​​​​​​​
Accessibility
Screen settings
Thought about customizable exercise screen for ADHD/Dyslexia students who doesn’t like too much distraction on screen
however, there’s a problem of who should be customizing the screen? teacher or students

switch to more general screen setting
font size and simple display setting can also assist students with disabilities


Console Error Guide
Problem: low usage of console error --> more like an error display, light gray small text on a corner of the screen without any buttons, doesn’t seem usable and is often ignored.

Goal: want to equip students with the habit of checking which error happened to their code --> fix error more efficiently, great debugging tool
Also, great accessibility feature: exercise hints for some students --> better suggestions for errors in code

Design challenges:
Exercise screen was already crowded, how to fit in error guide? how to catch students attention?

Add in a layer of control, teacher has the power to unlock these “hints” for some students. Don’t want to let the course become too overloaded with hints --> students problem solving skills are important, CS Academy emphasize
Assignments
Organize all assigned work together in “assignments” to give an overview of what’s been assigned in the past and the upcoming & current tasks. Create better manage system for teachers, prompt teachers to assign quizzes according to their pacing timeline.
Also distribute the “assign tasks” feature from pacing & points to this assignments, which is more correlated.
UI iteration and prioritize the most useful functions & info --> more useful & delightful
Grouping
​​​​​​​

Reflection
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. 

You may also like

Back to Top