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.