EarSketch

Learn to code via music composition

Overview

Re-Design Team : 6 members

Personal Role: UX Lead

Skills Used: Research, Task Flows, Wireframing, Visual Design, Usability Testing

Where is EarSketch used: Used by 190k students across all 50 states. Schools using EarSketch in classroom include- Lanier High School (Georgia), Marist School (Georgia), Nebo Elementary School (Georgia)

Project Duration: August 2014 - May 2015

About & Background

EarSketch teaches computer science through music composition and remixing.

Students learn to code in Python and/or JavaScript to create and remix music within the same kind of digital audio workstation (DAW) software used throughout the music industry. EarSketch is designed to enable student creativity, to enhance collaboration, and to leverage cultural relevance. EarSketch is a National Science Foundation-funded initiative that was created to motivate students to consider further study and careers in computer science. EarSketch partnered with Young Guru (Jay-Z's sound engineer) and Richard Devine (electronic musician and sound designer) to create audio loops and beats that are bundled with EarSketch.
Learn more about earsketch here .

EarSketch is designed and developed at Georgia Tech by Dr. Brian Magerko and Dr. Jason freeman. EarSketch shifted from being a standalone desktop application to a Website application. On making the switch, the UI needed to be re-designed.

First look of the Web Interface


The design for EarSketch cannot be compared on analyzed with once single system since EarSketch brings together different applications under the same umbrella in a never before way. Thus, designing for EarSketch involves acquiring an understanding of each of these domains.

The EarSketch interface is an amalgamation of 6 key elements

Design Process

I followed an iterative User Centered Design process to design the EarSketch Interface. The process started by understanding the EarSketch problem space and following the EarSketch curriculum to understand how to use EarSketch to make music, followed by making personas to understand it’s target population. Once, the space was understood, background research of existing systems were done to guide the first set of designs. Post this Usability testing1 was conducted at Lanier High School in Atlanta, Georgia to identify key usability issues with the interface. The interface was re-designed on the basis of the data collected from this study. These redesigns were further user tested with a task driven and think-aloud protocol method to guide the final design of the system.

Personas



Based on feedback from teachers at Lanier High School and the project lead, I came up with four personas to represent the personalities of students to be using the system. I differentiated them on the basis of their interest in programming and music. This helped me guide my future design iterations on the basis of interest/background in both programming environments and DAWs to be designed for novices in order to instigate interest in both aspects and to cater to special needs to the population.

Research


DAWs like Ableton Live , Garageband, FL Studio, and Logic Pro were studied to understand how modern / best DAW softwares in the industry have been designed. Online Forums for musicians helped in understanding some key aspects of DAW design that are helpful for composing tracks. For e.g It was helpful to note that color coding different tracks helps in differentiating them from each other as opposed to giving the same color to all the tracks.
For the purpose of file browser design, I tried to understand and capture design decisions from popular music/radio applications and websites to help select sound samples.
In order to understand best code editor design practices, I studied different popular native and web code editors. These helped in realizing key aspects of modern code editor designs such as syntax highlighting, numbering lines of code for better error detection, usage of monospace fonts for better code readability, ability to collapse/ group functions, and highlighting the tabbed spaces used in lines of code.
In order to understand the best design practices for the curriculum design, I got a deep understanding of various MOOC interfaces.
Applications like Wavepot, Scratch and Processing were studied to understand how to understand how to design coding platforms for creative expression.

Based on research of exisxting system & feedback received from teachers and the Project leads, several pain points were identified in the old experience.





Wireframes

Initially, the workstation comprised of 4 parts: sound browser, code editor, Console and the DAW.
We designed the parts to be modular so that the size of the module could be adjusted as per the user's need. With the progress of the project, the need to integrate the Curriculum with the main workstation came up. A team is also started working on a viusalization module for the tracks generated. With the future addition of more and more modules, the interface started lacking in space. To solve this problem, the idea of a side navigation module selector came up.

Visual Design

Minute details were paid attention to while making the visual comps. For eg. using two colors for tracks helps to differentiate between tracks better. Also, A darker background is generally considered easier to work with in a coding environment. The visual comps progressed alongside the wireframe progression.


User Testing

Usability students conducted at Lanier High School Georgia in the form of Contextual inquiries and surveys presented with a lot of areas for design improvement.






Impact

My research driven design for the GUI of EarSketch has help establish the initial design and user experience for students and teachers, which has only been further enriched over time.

EarSketch has crossed 190k+ active users and is currently being taught in more than 250 schools across the US.

EarSketch has been highlighted by President Obama's Administration as a top CSEd initiative and it also received the 2017 NCWIT award for CS education engagement