EarSketch is a web tool which allows students and anyone else to learn how to code in JS and Python by enabling them to create music from their code. This project started around 5 years ago at Georgia Tech and is funded by NSF. The goal of this project is to make major strides to address computer literacy for K-12 students especially underserved populations.
I worked as the sole UX Designer on the EarSketch project from August 2015 to May 2017 on two major projects.
Redesigning the entire interface to based on user feedback to make the website similar to professional grade music editing software.
Conducting research and designing cohesive workflows for features that need to be included in EarSketch for it to support collaboration between users.
This article highlights the details of the second project.
First things first
EarSketch was the main project that I worked on during my part-time job at ADAM Lab at Georgia Tech from August 2015 to May 2017.
EarSketch recently crossed 100k+ active users and is currently being taught in more than 250 schools across the US.
Highlighted by President Obama's Administration as a top CSEd initiative and it also received the 2017 NCWIT award for CS education engagement
Through this job I put myself through grad school
The work done in the EarSketch Collaboration project was evaluated in a live-coding context and the findings from that study have been accepted for publication in the proceedings of Audio Mostly 2017, an ACM conference related to Audio interfaces and interaction design
EarSketch is an integral part of the AP CSP curriculum in many schools all over the country. To make sure we are meeting the standards of the AP CSP curriculum and at the same time maintaining high standards for CS education our performance evaluation team conducts regular studies at schools. Moreover, as a team we are constantly focussed on shipping new features to meet our user needs every release cycle and due to this the research team at EarSketch led by Dr Anna Xambo (I am also a part of this team), focuses on finding the pain points and shortcomings of the current product and steps we need to take in order to address these shortcomings. Together the research of our performance evaluation team and the user research team revealed the following areas that needed attention
Collaboration and team projects are a huge aspect of CS education but the EarSketch interface had no mechanism/workflow for supporting such projects
We found out that students were very concerned about maintaining authorship of code that they were sharing publicly or with others but EarSketch had no mechanism for ensuring author attribution.
Debugging logical errors is an integral part of CS education, however, even though there exist UX/UI related frameworks to support syntax-error related debugging, there wasn't any UX framework to support debugging of logical errors
Goals & Constraint
Based on the problem space that we were tackling we had the following goals to achieve
Provide a comprehensive collaboration framework which is also simple and doesn't get in the way (by adding clutter to the interface)
Support both co-located and remote collaboration
Develop a UX framework for collaboration that could also serve as a pedagogical tool
Sharing a script
Code Import & Author Attribution
Collaborative code editing
Communication through messages
Commenting framework for debugging
These features together form the entire collaboration framework for EarSketch. To learn more about the research we conducted, read on!
To identify problems and pain-points that our users were facing with EarSketch and to understand how collaboration worked within the current ecosystem Dr Anna Xambo and I conducted exploratory research by conducting interviews, doing field observations in schools and undertaking an extensive competitive analysis of similar products
Dr Anna Xambo conducted interviews with 9 teachers (6 female and 3 male) who either teach EarSketch or are proficient in EarSketch. The question we were trying to answer was
What were the existing sharing practices among students, students and teachers and among teachers?
Upon analyzing the data from the interviews we realized the following areas that needed more attention
Students were skeptical if sharing was positive
Students shared the musical outcome but refused to share their work outline
Sharing could go against AP CSP if teachers were unable to ensure work authorship
Ownership rooted in cultural backgrounds
Sharing between students and teachers
Informal presentations to receive feedback
Share by URL opened lots of windows in ES currently. Very tedious
Students talk to each other before they approach the teacher
Assignments have rubrics and code shared in Google Docs or Google Classrooms for grading purposes.
Sharing among students
Students used Google Docs for sharing code
Multiple users could edit together in real time
Provided permission based control and even shared folders
They used a discussion forum to post code and comment on it
Sharing among teachers
Teachers have their own curriculum which is shared among teachers of the same school
Teachers were moving away from Powerpoint and were using guided worksheets instead
Need online support - a community of sorts for communication.
Group up together informally. Generally teams of 3 with at least 1 musician in each
Follow pair programming when in class with driver and navigator roles
Remote collaboration (outside class) was very difficult
They have individual activities but the process is shared
We (Dr Anna Xambo and I) conducted field observations at the Marist High School near Atlanta with 34 students in 2 classes to answer the following question
How did students deal with code related errors in EarSketch?
(Although this research was initially conducted to be separate from the collaboration research - we quickly realized that we could use collaboration as a means for providing UX framework for debugging logical errors)
We collected screen-capture of 34 students doing their assignments in EarSketch for an hour and also collected notes for our observations. We later coded the videos with different errors that were made, how long it took for students to recognize and rectify their errors and if they relied on help for rectifying the error. From our analysis, we realized the following aspects
Students were able to rectify most of the syntactical errors themselves by relying on the error messages.
Students overwhelmingly relied on external help like their friends, teachers or previous examples and solutions when they encountered logical errors in their code
This made us realize that we could leverage the collaborative communication aspect to provide a framework for students to point out potential logical errors thereby allowing themselves and their team to learn as a group
We (Dr Xambo and I) did an extensive competitive analysis of products that were similar to EarSketch or supported real-time collaboration/live-coding or had visualizations of author contribution. The image below gives an overview of the products we looked at
We were asking the following question
How do these products support collaboration?
Our analysis helped us identify certain features and design elements that were necessary to support collaboration
All the users involved in a real-time editing project were given their own color coding
All users knew who was editing what at any given time
Communication was key
We needed to provide a cohesive workflow for peer-to-peer communications
As identified before commenting could help us tackle error handling
Technical aspects relating to EarSketch
Real-time code editing with multiple users results in compilation issues. Thus we needed to follow a turn-taking based approach.
My tenure at EarSketch ended (on account of me graduating from college) before I could participate in the evaluation of the designs. Evaluations of the interface especially the communication features is being done by Dr Anna Xambo and Dr Gerard Roma.
They recently conducted evaluations of the collaboration features in a live-coding context and found the communication and collaboration features were greatly beneficial for the musicians especially in teams of 3. The findings from this study will be published in the proceedings of Audio Mostly 2017, an ACM conference on Interaction Design.
They will be conducting studies with the prototype they have built to evaluate these designs in an educational setting.
Thank you for reading about EarSketch Collaboration. Want more? Click here.