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 is presented with a standard account creation/login page. Once Ben creates 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. 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 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. In this design, there isn't any difference between creating notes for the first time and reviewing them later, so when Ben comes back to the notes to insert new facts from the course readings, and when he comes back again to review for a test, he just opens the notes in the organization hierarchy and views them in the editor.
To find the notes he wants, he can use the search bar at the top of the home page, which will search both the titles and the contents of notes and display hits in the title first in the results.
Analysis
Design 2
Account creation and login weren't really considered as significant in our designs, so they will likely just be standard forms for each of these designs. After logging in, the user will see the a hierarchy that will eventually contain folders and notes, organized however the user wishes(similar to a common file system window such as in Windows). Also similar to a familiar file system window, the folders and notes will be sortable by name and by the date of last modification. A search bar at the top will allow the user to quickly find a particular note or folder. Buttons at the bottom of the page will allow the user to create a new folder or a new note.
Ben Bitdiddle is beginning a new semester at college. At the beginning of his first lecture, he opens up SETENTS and creates a folder for his class, 6.123, and also creates a new note for the lecture.
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.
Design 3
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
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.