EarSketch

Overview



Re-Design Team : 6 members

Personal Role: UX Lead

Skills Used: User Research, Task Flows, Wireframing, Visual Mocks

Where has EarSketch been used: Lanier High School- Georgia, Marist School- Georgia, Nebo Elementary School- Georgia

About

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 .

YoungGuru talks about EarSketch

Background

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

First look of the Web Interface

The site pictured above was put up initially just to get the back-end functional. Once, the backend was functional, a new re-design team was formed. I worked closely alongside Chris Latina, the Front-end lead, to make the UI more functional.

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.

The above wireframes depicts the progression of design ideas.

A quick representation of the design idea.

Visual Comps

Small 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.
The above comps represent the design progression with time.

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. We came up with a lot of minute UI changes. One of the key takeaway includes redesign of the sound browser. I am currently working on changing the design and structure of the sound browser.