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, Ben'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
The first time Ben uses SETENTS to take notes, he will be presented with a standard account creation/login page. Once Ben has created his account, he sees the note storage, which is organized into sections with years and classes.
Image of hierarchy with nothing created yet
On initial login Ben must either select the pre-populated school year or create a new one. Once the year is selected, he can create a class, and then create notes for that class. This is not analogous to a standard file-system hierarchy in that Ben cannot create loose notes: they must be associated with a class, and classes must be associated with years.
Image of populated hierarchy
Ben creates classes for the different courses that he's taking. 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 Ben can type in. We allow 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 a 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. Since Ben is new to our app, the camera roll does not open yet.
Image of the QR code download screen
The first time Ben clicks the camera icon in his account, a window opens containing a QR code that he can use to download our app on his smartphone.
Image of the smartphone app: picture taking mode
Ben can point his cellphone camera at the subject he wants to insert into his notes, and takes the photo. Once a photo is taken, the app will go into crop and upload mode.
Image of the smartphone app: picture cropping mode
Ben can crop out the area of interest on the image (in this case, the diagram on the blackboard behind the Professor), and choose to save or delete it. When he presses save, the photo will appear in the camera roll on the app.
All changes to Ben's notes are auto-saved by our webapp.