The Design of Nota

Every final product has a design journey. Here is the design journey of Nota.

Why 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.

Nota Blue Stripes ConceptNota Parchment ConceptNota Eve ConceptNota Gray ConceptNota Bamboo Staff ConceptNota Bamboo Concept

Revised Concepts:
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.

Nota Round 2 Splash ConceptNota Round 2 Quiz ConceptNota Round 2 Staff Concept

Nota Round 2 Piano ConceptNota Round 2 Reference Table ConceptNota Round 2 Reference Detail Concept

Final Design:
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.

Nota Final Design: Quiz StartNota Final Design: QuizNota Final Design: Quiz HighlightNota Final Design: PianoNota Final Design: ReferenceNota Final Design: Reference Detail

Logo:
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.

Nota Logo Concept 1Nota Logo Concept 2Nota Final Logo

Find out more about Nota at notaapp.com

5 thoughts on “The Design of Nota

    1. Melvin Rivera Post author

      Christopher, most of the items in the Reference section will be applicable for flute. The Piano and the Quiz sections are obviously applicable to piano only but keep in mind that piano is a basic necessity for any musical instrument. Check out the demo one the website to get a better idea http://www.notaapp.com.

  1. Pingback: links for 2009-10-21 | manicwave.com