Etude


Assignment

The project assignment was to create an interactive real time data visualization with three or more types of data representation, and to express the solution through a design process document and a motion grahics prototype. We were allowed to pick our own topic to work on.

My Role

Music is a large part of my life, so I came up with the concept of creating a music practice app that surpassed the current selection of tuner and metronome apps. I designed the user interface based on my own expeirence as a musician and feedback from other musicians that I know.

Research

Competition

There are already a lot of music apps on the market. My research targeted the top three: Music Journal, Tunable, and Metronome+. I analyzed their features for useability, and then combined them to make the feature list for Etude.

Initial User

Originally, I was considering a user 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.

Final User

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.

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.

Wireframes

Process

My first wireframes were very out fo 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

Moodboard

I made three moodboards, but this was the most successful. It's animated and lively, drawing on bright colors and simple shapes to create a playful mood.

Visual Development

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.