Etude: A Music Practice App

UX/UI Design, Motion Graphics

Fall 2014

Fulfilling a school assignment to create an interactive real time data visualization with three or more types of data representation, I created a proof of concept for a music practice app that combined features of current metronome and tuner applications.

View Process Documentation
screens of the Etude app

Research

My preliminary competitive research targeted the top three apps for musicians currently on the app stores: Music Journal, Tunable, and Metronome+. I analyzed their features for usability, and then combined them to make the feature list for Etude.

For my core user, I initially considered someone just beginning to play music. This led to various feature sets including pieces of music stored in the app for playback, accompaniment tracks, and other learning tools. As I researched other music apps, I settled on a much more advanced musician as my user. I wanted to cut out the extraneous educational features and focus on data visualization, which would be most useful for an intermediate to advanced musician.

infographic of two different users

Features

PRACTICE: Etude includes a tuner, metronome, and recorder. The metronome is customizable with beat divisions and time signatures.

IMPROVE: The app is arranged by piece, so users can set goals for each specific piece and play many in one session. Notifications are sent out to remind the musician to practice.

RECORD: Musicians can replay their recordings and watch a live analysis of their intonation. They can also share recordings by email.

taxonomy of the Etude app

Wireframes

My first wireframes were very out of the box. I wanted to incorporate octagons (for octaves in music) into the structure of the app, and when I did that I went too far and lost structure, especially on my list pages. Through iterations, I brought back Android design standards to structure my app and make it more easy to navigate.

Visual Design

I made three moodboards, but the most successful one was animated and lively, drawing on bright colors and simple shapes to create a playful mood. Just like with my wireframes, I started off too strong with my visual design. My colors were too bold and there was no heirarchy. Through several rounds of iterations, I reined in my colors and settled into a good visual design.

Who's Keiran?

Keiran Pillman is a designer, illustrator, and researcher living in Rochester, NY. They have a BFA in New Media Design from the Rochester Institute of Technology (2015), and a MFA in Art History from the University of Massachusetts Amherst (2017). They have worked as a freelance designer and illustrator for seven years, doing projects for a variety of clients.

In their spare time, Keiran enjoys running, hiking, writing both fiction and non-fiction, and serving as a loyal minion for their cat.