...
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. A search bar at the top of the page allows users to look for notes without browsing through the hierarchy.
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, and 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; all of this functionality is accessible through the tool bar or, in some cases, through keyboard shortcuts. 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 launches the app on the phone. Pictures taken on the phone are added to the camera roll on to the right of the editor. 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.
...
Image of folder/note hierarchy 
After creating a new note or selecting an existing note, the user will be taken to the text editor, which is central to the application's functionality. This provides the user with the ability to enter rich text into a document to take notes for the class. There are standard controls for formatting text, as would be seen in a normal text editor, but the interesting feature of this view is the ability to record video of the lecture that will be synced with the notes. (For the purposes of this design, we will assume that the user has a front-facing webcam of some sort to record the video)
...
Image of text editor view
On the right side of the view is a toolbar for managing the video recording. There is also a button to allow the user to take a screenshot that can be inserted into the notes. When the screenshot is taken, a new window will appear to so the user can crop the photo to the correct size.
Several times, the professor draws important figures on the board that Ben wishes to include in his notes. He clicks the "take screenshotsnapshot" button to crop the image and insert it with the text.
Image of screenshot cropping view
After a class is over, the user will likely wish to review the notes that were taken during class. In the text editor view, there is a "Review" button in the top right corner. This takes the user to another view that shows the same notes and video that the user created with the edit window, but they are not editable. One half of the screen shows the recorded video, and the other shows the notes that were typed. While the video is playing, the corresponding section of notes is highlighted to show how the video and the notes match up. Additionally, by clicking on a word in the notes, the user can jump to the part of the video that was happening while that word was written in the notes. This allows the user to find certain parts that they wish to review without having to seek through lots of video time. The top right of this view contains an "Edit" button, taking the user back to the edit window to make any necessary changes.
Image of review view
Analysis
Design 3
...
Image of app with navigation pane populated with stuff 
Ben can create a category for 6.006 or any other classes, and have notes inside of the categories or in the root of the hierarchy. He can drag notes into new categories to organize things. Categories can be created by clicking the new category button at the bottom of the navigation pane. Notes are created by clicking the new notes button within the category you want them to go in (or in the root of the hierarchy). Dragging the bar between the editing pane and navigation pane allows Ben to allot as much screen real estate as he wants to either.
Once Ben is satisfied with how his notes are organized, he can use the rich text editing pane to take notes as in our previous designs. When the time comes to insert the crucial diagram, he clicks the drawing button at the right of the toolbar.
Image of QR code screen 
As in design 1, the first time he clicks the button he must associate a smartphone with his account by downloading our app and signing in. He can scan the QR code that pops up to download our app onto his phone. Once Ben has associated a phone with his account, clicking the drawing button will bring up a canvas where his cursor is in the notes. If he doesn't already have the app open on his phone, the canvas will contain a text prompt to open it. Ideally we would The pane can be deleted like any image could be, by backspacing or using undo.
Images of phone app and web app with the synchronized canvasses 
Once the smartphone app is open, Ben can draw the diagram using the touchscreen on his phone. The canvas in his notes will show a live view of his diagram. Ben can choose from a limited selection of colors, draw lines with a single finger, and do bitmap erase with a single finger. He can also zoom in by using standard pinch to zoom, and navigate around the zoomed in image by either using the grabby hand or dragging with two fingers.
...