b 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.

c 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.

d 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.

e 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.

g 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.

h 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.

i 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.

j 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.
|