...
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 userBen'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 The first time Ben uses SETENTS to take notes, he will be presented with a standard account creation/login page. Once they have Ben has created their his account, they see he sees the notes note storage, which is organized into sections with years and classes.
Image of hierarchy with nothing created yet
On initial login they Ben must either select the pre-populated school year or create a new one. Once the year is selected, they he can create a class, and then create notes for that class. This is not analogous to a standard file-system hierarchy in that you 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.
...
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 Ben 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 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 a user Ben clicks the camera icon in their his account, a window opens containing a QR code that they he can use to download our app on their his smartphone.
Image of the smartphone app: picture taking mode
The user Ben can point their his cellphone camera at the subject they wish he wants to insert into their his notes, and take 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
The user 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. If they press When he presses save, the photo will appear in the camera roll on the app.
All changes to a userBen's notes are auto-saved by our webapp.
...