Every final product has a design journey. Here is the design journey of Nota.
The idea for making Nota, my first app, came from the fact that I have two kids(7 and 10) who are both taking piano lessons. We had these music flash cards to help them in the learn to read music process but of course we somehow lost them. When the kids inherited our old iPhones(deactivated) after we upgraded to 3GS I figured a music flash cards app for them would be perfect! I looked into it and realized the choices at the time were not that great. I could design a better one I thought. I knew this was a niche market app and would not be my Tweetie but, it was a simple idea, perfect for a side project getting done at nights and weekends. Little did I know it would evolve from flash cards to include a piano and a reference library and that I would find myself unemployed and dedicated to this new iPhone development venture more seriously. The design process took only two rounds and one final revision was made during development.
Initial Design Concepts:
In the initial round of concepts, I explored the design treatments shown bellow but I settled on using the bamboo and dark glass as the official look and feel for the app. This design had the best positive feedback from the people I showed it to. In this early prototype, the Learn section was utilizing the iPhone’s scrolling interface to navigate the selections. This was later changed to a multi level table view which allows for better navigation when dealing with large amounts of content.
Once I settled on the bamboo concept, the next step was to apply that look and feel to all the sections of the app. Bellow are the designs for the Splash page, the Quiz page, the Staff page which never made it to the final app, the Piano page, the Learn page and a second level page for it. I also refined some of the elements in the interface like the arrows in the Piano section.
As development progressed, the design was tweaked and refined even more. The Quiz gained some playing feedback like number of correct or wrong answers, a start screen, a pause button, a high score etc. Looking back, I should have designed this before starting development to avoid pausing, rethinking and redesigning during development stage. The Learn section was renamed Reference and brightened up a bit since in the previous version it looked too dark and did not seem to belong with the other screens. Also, the icon for this section was changed to a book with a music symbol on the cover to make it look more like a library resource and less like music playing in iTunes.
For the logo, I wanted to include the bamboo as well as a reference to music, weather that was piano keys or a musical symbol. I started with the piano but realized there were tons of icons like this already in the App Store. I then added the note above the but this made the design too complex so I removed the piano completely leaving just the symbol with a bamboo border. I was really happy with the end result.
Find out more about Nota at notaapp.com