Fostering collaborative coding for autistic students for EdASE.
ROLE & TEAM
I was the Product Designer in a team of 8.
The team consists of myself, another product designer, a PM, and 5 developers.
WHAT I DID
I designed the desktop prototypes and conducted 10+ usability testings with developers.
CLIENT
EdASE (Educating Autistic Software Engineers) hosts an annual Computer Game Coding Camp for high school students on the autism spectrum, providing them with an opportunity to learn and excel in coding.
PROJECT TYPE
Start-up project
The product I designed will be launched in July 2023.
PROBLEM
Autistic students face challenges in the tech space due to a lack of resources for learning coding collaboration.
Autistic individuals in the United States of America face significant challenges in the workplace due to social difficulties, resulting in an unemployment rate of over 80%.
SOLUTION
Designing a collaborative coding platform that enables autistic students to learn how to collaborate effectively with their peers.
#1 COLLABORATIVE ENVIRONMENT
Students have their independent workspace and can use the ‘scene’ function to collaborate with others.
#2 GRADUAL COLLABORATION
Students get a 10-second delay warning message when other students want to join their workspace.
#3 CO-EDITING
Code stacks will be locked when one student is editing the stack.
#4 AWARENESS OF OTHERS
Students can view code history to see how their code has been changed by others.
UNCOVER USER NEEDS
5
User Interviews
10+
Literature reviews
3
Competitor Analysis
The current Scratch platform does not allow students to collaborate with each other. Specifically:
IDEATING THE SOLUTION
How might we create a collaborative coding environment?
3
Design Iterations
5
Usability Testings with autistic students
10+
Usability Testings with developers
Iterate towards achieving easier development
Before
The initial design allowed students to select a block upon logging in to claim their spot. Once inside their workspace, they could scroll up and down to view other people's workspaces. Although this design aimed to promote collaboration, our usability testing revealed that students struggled to navigate the large canvas effectively. Our developers have also noted that this design poses significant development challenges due to its complexity.
After
The redesigned iteration version incorporates a new feature called "scenes." In this version, each student has their own independent canvas to develop their code. A scene represents an individual workspace. If students wish to collaborate with others, they can enter another person's scene by clicking on it or by directly dragging their code into the other person's workspace. This redesigned approach offers better organization for students and is also easier to develop for developers.
Iterate towards minimizing cognitive load
Before
In the initial version, students could click on other people's workspaces to enter and collaborate. The other student would then have the option to admit or deny the request. However, our usability testing revealed that this approach, while giving students the freedom to deny collaboration, proved to be disruptive for them. They had to interrupt their coding logic and consider whether or not to admit other collaborators. This disruption often discouraged collaboration as a result.
After
In the redesigned iteration, a notification will appear at the top to inform students when others are joining their workspace. This eliminates the need for students to decide whether to admit or deny collaboration requests, thereby reducing their cognitive load while coding. This approach aims to encourage students to embrace collaboration since they are not constantly required to deny collaboration requests.
Iterate towards enhancing user control
Before
In the first iteration, students could view the history of previous code and manually adjust their own code accordingly. However, our usability testing revealed that students desired a feature that would allow them to directly use older versions of the code. This feature would save a significant amount of time that would otherwise be spent on manually editing the code.
After
In the new design, students have the ability to view previous versions of their code. Additionally, they can utilize old versions to recover specific code blocks. This feature offers students the convenience of accessing and restoring previous code versions, facilitating easier code recovery and enhancing their overall coding experience.
IMPACT
”I am excited to use this collaborative function in the summer for our camp!”
— Registered student for Computer Game Coding Camp 2023
”I am extremely excited to see the comprehensive design and its impact on helping our students learn the skill of collaboration. ”
— EdAES Summer Camp Manager
MAIN TAKEAWAY
This project taught me how to collaborate with developers in designing accessible developer tools.
This project has been instrumental in expanding my understanding of coding from a design perspective, even though I had prior experience in front-end development. Throughout this experience, I have gained valuable insights into various aspects, including accounting for latency, ensuring code integrity during collaboration, and measuring instrumentation. It has broadened my skill set and enriched my understanding of the interplay between design and development in creating accessible and efficient tools.