UMD+Notes+Design

__**Siwatm Piyasirisilp's Lo-Fi Designs:**__
 * Link:** Balsamiq design | Paper design
 * Introduction:** This design has four main pages; the homepage, the search results page, the class browser page, and the notes preview page. This design gives equal importance to each aspect of note finding. This means that the homepage includes a class browser where the user can look up their specific classes or find other classes that interest them, a search bar where the user can search for notes by topic, and a preview note of a high quality note submitted which users can sample and see if it features meets their needs. Also, users are allowed to browse the website anonymously or they can sign in with their UMD accounts to upload or comment on notes.


 * __Steven Banaszak's Lo-Fi Designs:__**
 * Link:** Balsamiq Design | Paper Design
 * Introduction:** I designed 4 main pages for the different sections of our website. They include a main page, specific class notes page, individual notes page, and a user account page. The main page was designed to allow the user to either browse notes in alphabetical order or search notes individually. The next page was based on the choice of the user and displays the class notes available. The next page shows the information for the set of notes selected on the previous page. The account page shows all of the information related to a user and has an edit button if applicable.

__**Daniel Choi's Lo-Fi Designs:**__
 * Link:** Balsamiq design | Paper design
 * Introduction:** From the data gathering and User Needs sections of the project, a big concern we received from interviewees was that the limitation system for downloading notes ("upload-notes-to-download-notes" system) must be a very hassle-free process; otherwise, they would not use the website. Accordingly, my Balsamiq design focuses on the expected or typical path a user would take based on the feedback we received from users. This path involves finding a course, selecting the item to view from a list of uploaded items, and viewing the selected set of notes in detail. In contrast, my paper design outlines a user who registers for the website and actively downloads and uploads notes.


 * First Group Draft**
 * Link:** First Group Draft
 * Introduction:** This design is centered on users quickly finding their classes and choosing their notes. The home page is a simple search bar for users to type in the name of the class they wish to find notes in. The search results page is a simple table which shows all pertinent information concerning the note: i.e. tags, course semester, professor etc. The group draft also contains designs for the upload and user profile pages.

For the evaluation process, our first step was that each group member created their own paper and Balsamiq prototypes before our first group meeting. At the meeting, we discussed the pros and cons of each member's prototypes and compiled a single rough-draft prototype consisting of the best components from each members designs. After creating the group draft, each member worked with an outside participant to run through the draft. The participants provided suggestions and considerations about the initial draft. Lastly, our group members met again and fine-tuned the initial draft while considering the suggestions of the outside participants.
 * Evaluation:**

When refining our first draft, we took into consideration the suggestions from our interviewees. On the home page, having two search fields proved confusing for our interviewees. Thus, we decided to take out the search bar in the top right corner of the page and kept the center search bar in the middle of the page that filters on course id, course name, and note topic. The search results page was also kept the same as the draft. On this page, the users found the table of uploaded notes to be very informative and that the search bar in the top right hand corner also gave them the option to easily search for more notes if the search results did not meet their needs. Users could also upload their notes from this page. In terms of a specific note's page, users requested for the ability to toggle on and off the annotations made on the notes because they could be obstructive if too many edits were shown on the page. Next, it was suggested that users will be able to preview the first page of every note and then use tokens to download or view the full notes. Lastly, to improve grouping in the profile page, the layout was changed to a three column format. The columns are divided into contact information, viewed notes, and uploaded notes.

In terms of what we learned from the evaluation process, one of the points we learned from the session with the outside participants is that wording of the labels and buttons on the interface should be understandable by everyone. By this point, we mean that labels cannot be ambiguous in interpretation. Also, we learned not to overload the user with too much information. For instance, instead of showing a list of all the possible courses on the main page, we reduced that functionality to a button that leads to a page with all the course listings. Also, we learned that each member had a different conceptual model of the website. These various perspectives on the model of the website aided us to choose the most intuitive and natural model.


 * Final Design**
 * Link:** Final Design