ReadingTree Prototype 3

Problem statement
The idea for ReadingTree grew out of field work with elementary-aged children. We observed children experiencing two problems related to reading (separate from cognitive difficulty with it).

Some kids had trouble finding books that they enjoyed reading, and consequently did not see reading as a pleasurable activity and sought to avoid it.
Other children we encountered enjoyed reading but did not have classmates who felt the same way. They did not have a place to talk about the books they enjoyed.

Our interest in fostering a love for reading, particularly among children who don't consider themselves readers, combined with our interest in commercial book recommender systems, such as Amazon and RatingZone, led us to the idea for ReadingTree.

Solution overview
Reading Tree serves elementary-aged children, regardless of their reading goals or abilities by helping them find something interesting to read, talk directly with other kids, and get an idea of what other kids think about books or other poll topics. In addition, the Member Rewards section gives incentive to contribute to the site and, along with "Member of the Week", provides site-wide recognition to active Reading Tree members.

Though site functionality is described in detail later in this write-up, overall we addressed our users book-related needs as follows-

Helping kids find books - We offer a wide variety of search types to allow kids to browse (subject search) or perform targeted searches (title, author, first letter search). Kids who don't know what they want to read can still find books by getting book suggestions provided by Reading Tree, derived from their ratings/ reviews and poll answers.
Talking about books - Reading Tree is a monitored and safe environment where kids who can't find in-person kid conversation about books (and even those who can) can use the site as a way to meet and connect with kids from around the world.

Kids have other, more general, needs as well

Design and Flow - Reading Tree is designed to be visually interesting and informative site. Background tiles, icons, informal font, and kid-level language/ tone signal that this site is a kid (not adult) zone.
Safe Space - The internet's potential for anonymity brings with it concerns for child safety. All Discussion Board, Chat, and Member Profile communications are monitored regularly by Reading Tree, and any offensive or otherwise dangerous posts are removed. In addition, though kids can communicate using Reading Tree they are reminded throughout the site to avoid disclosing personal information.

Personas and Scenarios

Our personas are the same, but our scenarios have changed slightly since we last discussed them in the writeup for our First Interactive prototype.

Scenario 1 (Danny) - Find a book to read for school
Danny's Persona
Visual Interaction Flow
Task Overview: Danny has an assignment to do a book report. The teacher says they can pick whatever book they want, and Danny's looking for something that won't be too hard to read (so he's interested if other kids included that information in their reviews), that won't make him feel dumb (so he'll want to pick something at or near his grade level), and that isn't lame (so he'll want to read the synopsis/ description to make sure he doesn't pick some kind of girly book).
1.From the home page, Danny signs in to the system.
2. Danny does not have particular book in mind, so he goes to "What's New" as a shortcut to the popular books. Once there, he browses the new and featured books and he looks at the pictures and brief descriptions trying to find one that looks interesting--he's particularly interested in grade level and ratings.
3. Nothing catches his attention so he clicks on the link for "Suggest a Book."
4. ReadingTree recommends 10 books. Danny reviews the list of suggestions.
5. He clicks on one that looks interesting to find out a little more information.
6. It seems OK so he prints out the book information page, so he can find the book in the library.
7. Finally, goes back to the home page, logs out and heads over to the shelves.

Scenario 2 (Jenny) - Find a book to read for fun
Jenny's Persona
Visual Interaction Flow
Task Overview: For Christmas, Jenny received a $50 Barnes & Noble gift certificate from her grandmother. She wants to be sure to pick out something "cool," but she doesn't have a specific book in mind. Jenny hopes that the book she chooses will be one her friends Sara and Brittany end up wanting to read too. Her mom is going to take her to the mall after dinner so Jenny decides to go to the ReadingTree website she heard about in school last week.
1. Jenny goes to the home page.
2. Jenny signs up to become a Reading Tree member.
3. After signing up, she goes first to the "What's New" section.
4. She rates the 3 books on the list she's already read.
5. Then she looks at the information about books she hasn't read, especially the synopsis and other kid reviews.
6. After locating a few books that are interesting to her she prints out the what's new page.
7. Jenny goes back to the home page and logs out.

Scenario 3 (Jenny) - Talk about a book she's read
Jenny's Persona
Visual Interaction Flow
Task Overview: Jenny thought Island of the Blue Dolphins (one of the books on last month's "Featured Books" list) was really cool. She wants to talk about it with some other kids (to see if they were surprised about the ending too).
1. Jenny goes to the home page and signs in as a returning user.
2. She goes to Find a Book and looks up Island of the Blue Dolphins by doing a title search.
3. From the Book Information page, Jenny clicks on Review this Book.
4. She selects a rating and fills out a brief review, but she wants to know what other kids thought. Only two other kids have written reviews, so she decides to check the Message Board.
5. Jenny goes to the Treehouse and looks at the main message boards, and sees a forum marked What We're Reading. She clicks on this link.
6. She sees a topic called Books about Survival and clicks on that.
7. Jenny sees someone has already started a thread on the book and posts a message to this thread, says what she thought of the book's ending. She reads a posting by another kid (username "livebug") that says she thought the book was the bomb.
8. By clicking on the link of her name from her post, Jenny checks livebug's Bookshelf.
9. Since "livebug" seems to have similar taste in books, Jenny prints her Bookshelf to get some ideas for other books to read.
10. Jenny goes back to the home page and logs out.

Final Interface Design (KS)

Functionality

At ReadingTree, a user may perform numerous book-related activities. These activities may be quickly and easily accessed by way of the main navigational bar, which has both icons and text labels.

Find out about a specific book. If a user wants to learn more about a particular book, ee could search for it by typing in part of the title, part of the author's name, or the first letter of the title or author name. Running one of these searches will generate a list of results, with 10 books displayed at a time and the option to page backwards and forwards. The search results includes the cover image, title, author's name, grade level, and number of pages.

From the search results, one can learn more about a particular book by clicking on the cover image or the "Get more info" hyperlink. These actions bring up the "Book Information" screen, which shows the user additional details about the book, such as subjects, average ReadingTree rating, synopsis, names of ReadingTree members who have the book on their Bookshelves, and Treehouse reviews.

Say what ee thought about a book. From the Book Information page, a child has the option to rate the book, write a review, or go to the Treehouse to chat or post a message.

Rating a book on a 5-point scale occurs with a single click. Members receive 5 ReadingTree points for rating a book.
To do a book review, the child is taken to a separate page to complete a fill-in-the-blank form with lead in phrases (such as "My favorite part was when...") All review fields are optional. Members receive 10 points for reviewing a book, since this requires more time and thought than simply rating.
Treehouse activities (chat and message boards) are discussed in the next section.

Talk to other book-loving kids. Children may communicate with each other in two ways: asynchronously via a threaded bulletin board or in real-time through moderated chats (offered only during limited hours of the day, for safety reasons). At the bulletin board, the main discussions are established by the ReadingTree administrators. Within each discussion, any member may post or reply to a topic. To increase the clarity and conversationality of the threaded discussion, we added the convention "username (to username): " when replying to a message, rather than quoting the message verbatim. Messages are date- and time-stamped. User nicknames displayed on the message board connect to that user's Bookshelf, which displays favorite books, books the user wants to read, and a limited amount of personal information.

See what other kids think. Throughout the site, there are opportunities to find out the individual and collective opinions of other ReadingTree members. Options include:

Reading reviews of books written by other kids
Reading bulletin board postings
Checking out other kids' Bookshelves
Reading about What's Hot and What's Not (the 10 most highly rated and 5 least highly rated books at Reading Tree).
Viewing poll results.

Get ideas for a book to read. A user might not have a particular book in mind, and wish to get some good ideas. At ReadingTree, such a child has several options for finding new books:

Click on "Suggest some Books" hyperlink, available from the Find Book and the What's New pages. Books are recommended based upon the user's ratings of other books and other items (such as sports or school subjects), which are used to gauge the similarity to other children (and other books) in the ReadingTree database. If the user has not rated any books or answered any polls, ee will be prompted to do so in order to receive suggestions. If the user does have some ratings in the database, ee will receive a list of 10 books, with the immediate opportunity to give feedback by rating, adding a book to "favorites" or to "yuck list" (in which case that book would never be recommended to that user again). The user may also add the book to ers bookshelf to remember for later.
Look at another member's Bookshelf. By looking at what another user has saved as a "Favorite" or a book "To Read," a user may get ideas of new books to try. The Bookshelf also displays information about the user's grade, gender, location, and ReadingTree status (which reflects the number of books the member has rated and reviewed).
Browse books by subject. A user might have a certain kind of book in mind (e.g., about animals or about magic) but not know which book to read. From the "Find a Book" page, ee could browse by subjects, which are represented by colorful icons.

Save information about a book. There are two methods for saving book information. If a child is a ReadingTree member, ee can add the book to ers bookshelf. By default, books are labelled as "Want to Read" but if a child wishes to, ee can make it a "Favorite" by going to "Maintain Bookshelf." At this page, the user also has the option to remove a book.

The other option for saving book information is to use the Print/Save feature, available on the Search Results, Bookshelf, and Book Suggestions screens. Clicking on this link starts Microsoft Word and gives users the choice of printing or saving. If the child chooses to print, ee sees a nicely formatted and dated Word document listing the book title(s) and author(s).

Sign up to be a member. Through membership, users are able to have access to additional features, actively participate in community features (as Tree Guests they can read bulletin boards but not add their own thoughts) and gain points for their participation. Encouraging membership enables ReadingTree to create a user profile for the purpose of generating book recommendations. It also contributes to users' motivation to participate as they establish an online identity visible to other kids (through the "Bookshelf" feature and the message board) and as they acquire member points, which earns them both status (e.g. Tree Leaf member) and tangible rewards (at the moment, ReadingTree certificates and bookmarks).

Interaction Flow

Interaction flow diagrams are available for each of the three scenarios presented above.

Overall Site Flow (diagram)
Scenario 1 (Danny) - Find a book to read for school (diagram)
Scenario 2 (Jenny) - Find a book to read for fun (diagram)
Scenario 3 (Jenny) - Talk about a book she's read (diagram)

What was left unimplemented?

Given more time, we would have implemented numerous improvements to the interface and to the system as a whole.

We would have liked to improve our "Find a Book" mechanism in the following ways:

Provide results for near-miss searches or a drop-down list of books and author names, to address the problem of spelling.
A complete database of books. Important for children to be able to find the books they have read.
Include subject subtopics as an option in subject search to improve scalability when the database is larger.
Allow users to restrict their search by grade level, again to improve scalability.
Offer additional means to assess the "qualities" of a book on the book information page, in particular example pages from the book itself. Attempt to add a non-grade-based reading-level assessment of each book, such as "read with parent", "beginning reader", "chapter book" and so on.
Add links to library and other children's book websites.

We would also have liked to improve the community features of the "Treehouse:"

Use a tree structure to group ReadingTree member by grade level or ReadingTree status (to improve scalability), then make member list searchable.
Display a bookshelf by double-clicking member names
Specify Favorite or Want to Read when adding a book to the bookshelf
Enable "Add to my shelf" button when viewing another user's bookshelf.
Include address book with member's profile, so users can keep a list of names of members with similar tastes.

Sitewide, increase interactivity. Use rollover animations to provide more feedback about active links. Include some surprises--pop-up messages when you click on an image, perhaps at the member rewards page.

Finally, we would have added features for adult users (such as parents, teachers, and librarians) and features to allow the system administrator to manage the back-end database.

Tools Used to Develop the System

To develop our interactive prototype we primarily used Dreamweaver (for the pages), Microsoft Access (for the back-end database), and Adobe PhotoShop (for graphics editing). Our site includes a mixture of static HTML and Cold Fusion-generated web pages. For the chat and the bulletin board, we modelled our code on programs from CFHUB. Most graphics were downloaded from the ArtToday and the Don Barnett website and modified in Adobe Photoshop.

For the most part, these tools made the development task simpler. In particular, Cold Fusion is a powerful tool, enabling quick and easy interactions with the Access database. We struggled with, and eventually abandoned Dreamweaver's templates as they were not flexible enough to meet our needs.

We used Visio to develop our interaction flow, because we did not have time to become proficient with DENIM and the pen-based interface in time for the first design deliverable.

Design Evolution

Each iteration brought with it major changes to the interface design and functionality. We detail here the evolution of the current design from initial sketches to final prototype, and which changes were the most crucial to the system's appeal and usability. These crucial changes are accompanied by screen shots.

Initial sketches to lo-fi prototype
When the design group combined our three different sketched versions of the site, many compromises were made. First, there was debate about how much functionality to provide to users who hadn't logged in or were not members. On the one hand, we wanted it to be extremely useful to all kids, especially those who might have difficulty with the writing and reading involved in the sign-up process. On the other hand, the collaborative filtering aspects of the system required users' participation to be recorded and mined as much as possible, and privacy requirements (as well as our own common sense) minimally dictated that "strangers" not be able to engage in direct contact with members. Thus, it was at this point that we decided to limit all active contributions to logged-in members.

We also chose here not to differentiate between finding a book for pleasure and finding a book for school, despite the fact that they are two separate goals. First, we felt that the actions performed were similar enough so as not to cause confusion between the two goals, and second, we were uncomfortable in exposing books retrieved through a "school book" search to the likely and inevitable stigma such a label might bring.

At this point we also felt that our design needed to include community features such as chat and bulletin boards, as well as supporting the primary task of finding a book. This stemmed partially from our competitive analysis of other sites for kids, what they had and what they lacked, as well as our commitment to (at least try to) support the collaborative learning process online.

Lo-fi to first interactive prototype
After testing our lo-fi prototype with kid users, we realized that Sign Up (for new members) and Sign In (for existing members) were problematic and needed to be addressed. Indeed, at this point, unclear language and labels were the largest interface issues. On the whole, they were at odds with the goals of our personas, betrayed more of how the designers thought rather than how the users thought, and led to issues with navigation and keeping the interaction as a whole "fun." We attempted to simplify the sign up/sign in process and to re-think the navigation icons to more clearly support the goals our personas had, by overtly stating the meaning of each icon and section of the system, and by removing areas we thought to be extraneous, such as Members Only.

However, as a design group, we had some trouble taking to heart the problems that the lo-fi prototype revealed. In many cases, we felt that the simple transition to an interactive environment would clear up most of the problems. Although this was true in a few areas (such as increasing the "fun" factor), many of the problems we saw in the lo-fi prototype followed us into the first interactive prototype.

First to second interactive prototype
Following the heuristic evaluation of the system, several large problems emerged and were addressed. The most major of these was the problem of account management, that, once signed up, a user could not change ers nickname, grade, state or any other information. Furthermore, although we allowed a user to "customize" ers environment by adding books to a personal Bookshelf, ee could not access it easily and once there, could not manipulate the books there by rating them or removing them. This led to the addition of a persistent Bookshelf icon to the navigation bar, which allowed a user access to ers Bookshelf and all account information (this included much of the data discarded when we lost the Members Only section. We also continued to tinker with the language used to attempt to map more closely to a child's cognitive level (without dumbing down.)

At this point we had pretty much solidified the navigation structure to include Home, Find a Book, Treehouse, What's New, and [User's] Bookshelf. We also nailed down the actual functionality available to a user who had not logged in or become a member (screenshot), and tried to clarify the steps necessary for a user to get personal book recommendations. We also began working in earnest on error prevention and recovery mechanisms.

Second to third interactive prototype
After the second interactive iteration, we tested an online prototype for the first time on our target users -- kids. This was eye-opening. The sign-up/sign-in problem that we thought we addressed after lo-fi prototype persisted with vigor (screen shot) -- one tester could not get beyond the sign-up process during our session. We made sign-up clarity and error prevention and recovery during sign-up our main priority during our final iteration. We also found that the ability to earn points and move to different member levels was a big motivating factor for participation -- this also became a higher priority in our final iteration.

User testing also served to identify a host of smaller problems with functionality or interface, none of which required significant changes to the interaction flow or overall look and feel of the site. At this point, we felt very positive about our final prototype. Users had responded enthusiastically to the features we had hoped they would and for the most part were able to navigate and complete tasks without difficulty. The metaphors of the nav bar were not too obscure for our users to grasp and the language and terminology did not exceed the limitations of any of our testers, ages 6 to 11. Although we hope to continue to improve and innovate with this system, we feel that the third prototype closely reflects our vision of a final product.

Most valuable evaluation technique

Our design team found the heuristic evaluation to be the most valuable to the prototype's usability in this specific instance. The insights of our expert evaluators gave us a great combination of large-level problems with the interaction flow and concept, along with nitty-gritty problems with specific portions of the interface. Unlike other testing methods, they also offered solutions, which, while not always implemented, gave us a jumping-off point from which to begin. We felt they gave us the feedback we would have ourselves identified if we were able to take a truly objective stance about our own interface.

However, outside of a class project environment, our design team found the pilot usability test to be by far the most valuable in exposing us to uses of our system in a "real-world" environment. By actually observing kids finding aspects of the interface difficult or fun, we were able to get a real feel for parts that were genuinely successful and where we needed work. Having the users interact with a later version of the prototype -- something that looked and acted a lot like we thought our final product should -- also minimized our ability to chalk problems up to "not-yet-implemented" or "on-the-list-to-fix." Lastly, we cannot overemphasize the power of hearing comments, requests and critiques come straight from the mouths of the actual users. For example, although we had identified and tried to address the problem of sign up and sign in long ago, it was not until we watched a nine-year-old boy struggle with it that the problem and its necessity was fully driven home. This effect may be lessened with audiences who are less "different" from the designers, but it made an enormous impact on this design team for ReadingTree.