Design

We based our design on the following principles:

Simplicity and attractiveness of design
Safety from errors
Efficiency and ease of use

Our final design is the result of three iterations of testing and evaluation. Below are the design decisions we made on each:

Paper prototype

Several important changes resulted from this iteration:

More uniform colors in accordance with internal consistency
Static navigation bar to replace the navigation page
Elimination of the special "Librarian" user

Heuristic Evaluation

The second iteration of our design yielded much criticism and many changes for our user testing phase:

We had not known we were allowed to use outside libraries in our design, so our visuals left a bit to be desired. We chose to implement bootstrap for the next iteration.
Our responses mentioned the wasted space on the right on every page; we had chosen this layout in order to make the webapp easily adaptable to vertical screens, but it resulted in an unattractive layout.
One could only recommend books to one person at a time; since the goal of the webapp was to encourage social interaction, we decided to allow people to recommend books to several people at the same time.
The navigation bar did not display the page in this iteration; we changed this in the next iteration, enhancing state visibility.

User Testing

a		The "Log In" and "Sign Up" pages are almost identical. These were separated because we observed that it was common to input a username and password in the incorrect boxes on websites that display both "Sign Up" and "Log In" options on the same page. None of our test users complained about this, so we thought it safe to implement this even though it goes against standard practice.
b		This is the home page once logged in. It displays four icons that the user may use to link to different pages: their own profile; a list of their friends' profiles; their own reading lists; and a search page for all books. This page reflects an important design choice--every page is designed to be easily adapted to a mobile device screen. Furthermore, the color scheme is a result of our previous test iterations, where it we found that more consistency and a reduced color scheme were desirable.
c		This page is the logged in user's profile. In order to enhance the experience of the students and make the webapp more appealing and marketable to high school students, we decided to let them modify their profile picture. Furthermore, we decided against letting the students upload their own images in order to prevent misuse or inappropriate imagery.
d		Here we show the dialog that allows users to modify their profile picture. They can select a picture from a list, which becomes visibly selected, and apply their changes with "Save Changes." We chose this interface to minimize mistakes, and to maximize reversibility.
e		The friends list displayed in this image is not reciprocal; that is to say, if one user A adds another user B, then B appears in A's friends list, but A does not appear in B's friends list. We came to this conclusion to minimize clutter, and following the model of many other social networking sites, such as Spotify and Twitter. This feature allows one user to follow the reading preferences he likes, but does not force others to see his own preferences.
f		The user's reading list displays books he has read, books he plans on reading, books he has been recommended, and books he is currently reading. We added boxes surrounding the books at the recommendation of our test users in order to increase readability. Although Meelap Shah had recommended zebra stripes, we found that they clashed with the design of the rest of the website, and instead chose to enclose each book in a box. Aside from fitting the aesthetics of the site more closely, the boxes increase the space between books, making each book a unit instead of a part of a table.
g		This page shows the list of books that is available in the library. It includes two different ways of finding books to read: The search bar and the new books browsery. The search bar includes an autocomplete function that allows us to dispense with the traditional alphabetical search function. We reached this conclusion based on our test users' reactions.
h		Our user testing phase complained of the fact that our buttons on this page had been different during testing. In order to improve the aesthetics and the internal consistency of the page, we made the buttons match.

Further Considerations

Our evaluation indicated that users prefer larger buttons and text over smaller ones, and to this end, we increased the size of both. This also improves the transferability of the design to mobile devices.

Implementation

Frontend

Backend

We implemented the backend for our app with Parse, a Javascript-based backend which stores data online and thus does not require a server to be set up.

Each user stores the following arrays: friends, already-read books, currently-reading books, going-to-read books, and liked books. Books are added to the “liked” array if the user rates them more than 3 stars, and removed from it if the rating is changed to 3 or fewer stars.

Books store title, genre, synopsis, an array of comments, and an array of ratings. Comments and ratings are themselves objects. Comments store the username of the user who created the comment and the text of the comment. Ratings store the username of the user who created the rating and the number of stars the user gave.

Book recommendations are stored as objects containing the ID of the user recommending the book, the ID of the user the book is recommended to, and the title of the book.

The decisions we made for implementation did not directly affect our interface. However, because we took a long time to choose the language for our backend, and struggled to implement it, we were not able to devote as much attention to the frontend as we would have liked.

Evaluation

Scenario

You want to know what your friends are reading, and you want them to read books you have previously read. This way you can bond over your shared reading experiences!

Tasks

Create a profile.
You are looking for a book to read later. Find one in which you would be interested later.
Add Allison Abernathy as a friend.
Find out who is reading the same book as you.
Recommend the book to another friend.
Delete Allison from your friends list.

User 1: 11-year-old avid reader.

Usability issues found:

--Attempted to search by pressing Enter, which is functionality we intended to implement but did not have time to complete (major). There is no harm in just implementing it for every search bar.

--Was confused by the way in which ratings were displayed. The average rating is shown if the user has not rated a book, and she did not understand this. She also did not notice the “Average Rating” and “Your Rating” underneath the star selection (catastrophic). Possible solutions was to display Your Rating and Average Rating as starts as well, with the label to the left of the stars instead of above the stars.

--Accidentally clicked on the user below the one she was trying to add as a friend, indicating that perhaps the user entries are too close to one another on the page (major). The solution to this is simply to widen the gap where appropriate.

--Did not understand why confirmation was needed for recommendations, especially since it was not needed to add/remove friends (minor). In order to address this, we decided a possible solution was to ask for confirmation when asking to add or remove friends as well.

--Tried to add books to the reading list by visiting the Reading List page, rather than the page for the desired book (minor). We decided we could also provide a popup with a search bar in the Reading List order to allow the user to add books to reading list as well.

User 2: 18-year old reader

--Wanted to upload own picture; looked for a while before realizing it is not possible (minor). We were reluctant to allow students to be able to upload any picture in order to keep obscene or objectionable material from school webapps, but decided it may be possible if the administrators are notified whenever a student tries to change a profile picture so that they may review the change; if this is not possible, we wanted to just put instructions at the top of the popup.

--Preferred larger "search" button, particularly because search was not activated by hitting the "Enter" key (cosmetic, major). The solution to this is simply to make the Search button bigger.

--Wanted to be able to change colors; complained of lack of settings (cosmetic). Just as with pictures, we thought we could implement a small menu that allows users to change some settings including colors.

--Disliked having to go to book page to add books; wanted to add directly from book list (minor). We thought it would be useful to use a small popup that has a synopsis an the option to add to one's own reading list and a small summary that links to the book page, but were uncertain due to the possibly reduced efficiency.

--Did not understand what links at top of "My Reading List" were for (minor). When clarified, responded by saying they waste space anyway. The solution to this would be to place the Already Read section, which is likely to be the longest and least looked through, at the bottom, and to dispense with the links at the top of the page.

User 3:

Reflections

Elizabeth Attaway

In my opinion, we did well in integrating the comments we received during each step of the design process. However, it would have been better if we has implemented a more detailed computer prototype. Many of the comments we received for HW2 dealt with the fact that our prototype was unattractive (which was a result of our misunderstanding that external libraries like Bootstrap could not be used). We would have been able to get better feedback, and thus improved our final version more, if our prototype had been better. In addition, we would have done better to choose a backend early in the implementation process, which would have allowed us to focus more on frontend during implementation.