Melodious Mind App

Spring 2014

Melodious Minds App is an Android application 4 students and I created during Spring 2014 in my UI/UX design class at University of California Berkeley. Given less than a semester, we were challenged to create a functional application prototype that uses sound as its main component. A real-time music transcritpion app was what we came up with.

 

As the chief interface and graphic designer of the team, I worked with four other engineer students to create the interface, color shceme, and poster presentation of the final product. Our team won the notable visual design award for our final presentation session where directors from Yahoo! Labs, AM+A, SoundHound, and Qualcomm were invited as judges.

 

Below shows some of the process in which I took to develop the interface and the final presentation poster I created for the class, which includes the final interface design of the application.

view all the visual assets I created for the mobile UI

view projects and assignments I have completed in this class

Step 1: The Challenge + Brainstorm

The challenge was to create any sound based Android App. The team sat down and started branstorming app ideas that can make a positive change in people's life. We decided on a music sheet generator

Step 2: Contextual Inquiries

We visited the musicians on campus to figure what they were like in their natural habitat, and further interviewed them and made observations during their composition process.

Step 3: Sketches

From our findings, we made our firsrt initial sketches

Initial Sketches

Step 4: Usability Testing

We reached out to another group of musicians with composing experience and tested our low fidelity prototype

Step 5: Re-design and AB Testing

After drafting up a new set of sketches (shown below), we went out to two different groups of new musicians and tested out the original and the new sketches.

First Iteration of the UI

Step 6: Final Iterations

We took the design with the better responses and built a prototype with Java.

FInal Iteration of the UI

Tutorial Tiles for the Final Iteration

And finally, here are some demo videos that we made throughout our class.

prototype

final demo video

This site was designed with the
.com
website builder. Create your website today.
Start Now