Scenario
Ben Bitdiddle is taking notes for 6.006 on his laptop. He has to keep up with the professor and write down all of the important points. The professor begins to draw a very complex diagram on the board, and warns the class that if they don't understand all of the details of the diagram, they will fail the next exam! Ben must be able to insert the diagram into his notes without losing any of the details, and without falling behind taking notes on the rest of the lecture.
Later, while studying for the test, Ben decides to do the assigned reading from his textbook. He wants to insert additional notes into his lecture notes on the same material, so Ben opens his notes to modify them. He goes over the notes, and inserts a few new facts that he forgot when he was taking the notes originally.
Design 1
In this design, the user's notes are stored in a strict hierarchy corresponding to school years and classes. Inserting images is done by taking the pictures on a smartphone and uploading them into your notes.
Storyboard
New users will be presented with a standard account creation/login page. Once they have created their account, they see the notes storage, which is organized into sections with years and classes.
Image of hierarchy with nothing created yet
On initial login they must either select the pre-populated year or create a new one. Once the year is selected, they can create a class, and then create notes for that class. This is not analogous to a standard file-system hierarchy in that you cannot create loose notes: they must be associated with a class, and classes must be associated with years.
Image of populated hierarchy
Clicking the buttons to add a year or a class has a text box pop into the list, with a default name highlighted for pending delete. Clicking the button to add new notes for a class, though, takes you into the text editor.
Image of the text editor
The title of the notes is presented in an editable text box in the tool bar, which on first open is called "Untitled N," again highlighted for pending delete with the focus given to it. On future opens focus will be given to the body of the notes. The text editing parts of the interface are standard: there's a large text area that you can type in. We allow users limited rich text functionality tailored to note taking, with bold/italic/underline, different font sizes, and the ability to easily make bulleted or numbered list. The home button on the left returns to the notes hierarchy. The camera button on the right leads to our most interesting functionality: the ability to easily insert a picture using your smartphone. If a phone is already associated with the account, the camera button opens a camera roll of images that have been taken with our app on their phone. Clicking a picture inserts it at the current cursor position, or the images can be dragged to any location on the page, displacing text as needed.
Image of the QR code download screen
The first time a user clicks the camera icon in their account, a window opens containing a QR code that they can use to download our app on their smartphone.
Image of the smartphone app: picture taking mode
The user can point their camera at the subject they wish to insert into their notes, and take the photo. Once a photo is taken, the app will go into crop and upload mode.
Image of the smartphone app: picture cropping mode
The user can crop out the area of interest on the image, and choose to save or delete it. If they press save, the photo will appear in the camera roll on the app.
All changes to a user's notes are auto-saved by our webapp.