...
In this design, we allow a single level hierarchy that lets you put notes into different categories, and the list of notes is displayed on the same page as the editor. Rather than inserting pictures from a camera, this design allows us to harness the ease of typing things on a laptop and the ease of drawing things with a touchscreen by using a smartphone to create hand-drawn diagrams.
Storyboard
Image of first launch
The first time Ben uses SETENTS to take notes, he is presented with a standard account creation/login page. Once Ben creates his account, he sees the combined browsing / editing window. The first launch has an uncategorized, untitled notes document already open. .
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.