IS 213 -- User Interface Design & Development

ReadingTree: Preliminary Design


 
 
 
preliminary design
 
 
 

 

Design 1
Diagram
Danny's interactions
Jenny's interactions

Design 2
Diagram
Danny's walk-through
Jenny's walk-through

Design 3 (partial)



Design 1


Design Overview

This design separates the various tasks into five main activities: managing a personal account (profile and bookshelf), searching for a book, browsing books, community contact and getting recommendations. As depicted in the above diagram, our primary personas, Danny and Jenny, encounter some of these in the following scenarios. Other scenarios, such as signing up or getting recommendations, which they will both do at least once, will be addressed in alternate scenarios. This design assumes a login on initial arrival, which then results in the personalized home page. Tasks for our secondary personas (Ayisha and Julio) are also supported, including searching by subject or author and title.


Danny's Interactions with Design 1

1. Danny arrives at ReadingTree and logs in, with username 'shortstop' and a secret password. (Home Page)
2. He sees the main page with "Welcome to ReadingTree, shortstop!" Since he needs a book, but doesn't want to go through any trouble, he clicks on "Today's Special" to browse through featured books.
(Today's Special)
3. He looks through the 30-40 titles at the top of the page, grouped under "Brand New Books", "Most Popular Books" and "Recent Reviews." He finds one book called "Figure in the Shadows", which sounds kinda scary and not too hard, under "Recent Reviews."
4. He clicks the title to see more about it.(More Book Info) (this sketch is present on the Find Book by Subject page)
5. He reads a little bit about the book, and then looks at the included excerpt to see if the writing is too hard. It seems to be OK, so he decides to see what other kids think about it (to make sure it's not too girly or babyish). He clicks on the 'See review' link next to the first review, which is the most recently added. (go to Reviews, not sketched)
6. He reads the first review, which is the one he clicked on. There are more reviews below it, but he's already spent enough time looking, so he doesn't bother looking any further. He clicks on the title of the book to return to the main book page, even though he could have written down the Dewey Decimal Number from the review page.(More Book Info)
7. He prints out the entire page in order to bring it to the library with him.
8. Danny logs out.


Jenny's Interactions with Design 1

1. Jenny arrives at ReadingTree and logs in, with username 'pinknpretty' and a secret password. (Home Page)
2. She sees the main page with Welcome to ReadingTree, 'pinknpretty,' and decides to go see what's most popular. (Today's Special)
3. She looks at both Brand New Books and Most Popular Books. On Most Popular, she clicks on the title of a book she's already read in order to rate it (More Book Info)
4. She clicks 'Rate this book!' on the book page and chooses a number from 1-5 from the drop-down menu and submits it (not sketched). Then she clicks the icon representing Today's Special to bring her back to the Most Popular books. She repeats this for four books on the top 10 list. (go to Today's Special)
5. Once she's done this, she clicks on the title of a book she hasn't read. (More Book Info). Once there, she reads the synopsis and excerpts to see if it sounds cool. She sees that it was reviewed by "rockstar" and "livebug" and follows the 'see review' link to read both reviews. (go to Reviews, not sketched)
6. She adds that book to her Bookshelf by clicking the Add to Bookshelf icon. Then she returns to the Today's Special page to continue looking for books by clicking on the Today's Special icon. (back to Today's Special)
7. One of the books on the Brand New list looks very cool, but doesn't have any reviews or ratings yet, and she wants to see if any kids have read it. She goes to the Tree House to see who else is around. (go to Tree House)

8. Once there, she checks out which chats are taking place. There are a bunch of kids chatting in
a room with the generic title 'Good Books' so she joins that room and asks if anyone there has read it and what they thought.
9. Rockstar immediately replies that he just finished it and posted about it on the bulletin board -- he thinks it is _________'s best yet. Jenny says thanks and they chat a little longer about ______'s previous books.
10. When she's done chatting, Jenny goes to check out who Rockstar is by clicking on his name in the Members' List in the Tree House. (go to "personal account page/public viewing", not sketched). She reads his profile and checks out his bookshelf (both favorites and books he wants to read). They have very similar tastes so she adds him to her address book, to remember to keep in touch.
11. Jenny logs out.


Design 2


Design Overview

This design share many features with Design 1 including a division between features accessible to all registered users and those available to all. One key difference is incorporating into the design the different motivations of our users (finding a book for school vs. for fun). Another difference is that there are relatively few "members only" items. Tasks for our secondary personas (Ayisha and Julio) are also supported, including searching by subject or author and title.


Danny's Interactions with Design 2

1) Danny still needs to find a book for a book report due in Science class next week. He has no idea what to pick and doesn't want to ask the teacher or other kids so while at the library he goes to the ReadingTree home page (Home Page). He wants to hurry up and check out a book so he can go hang out with his friends.He sees the link for "Choose a Book for Fun" (Fun Recommendations) but since this report hasn't been fun so far he selects the link for "Choose a Book for School" (School Recommendations)
2) He selects his grade level, a subject, book length range, the class it's for, doesn't select whether it's fiction or not, and hits "Get a Rec".
3) He receives his recommendations (Recommendations List), and decides he wants more info on the first book on the list. He clicks on the book's title and goes to a book information page which opens in a new window. (Book Page)
4) Danny decides that the book sounds dumb.
He closes the new window and goes back to the recommendations page and looks at the next book on the list. That one looks okay. The one after looks like it could be cool as well and he takes a look at its information page and decides it would be an okay second choice.
5) Danny hits "Print List" on the recommendations page, closes the browser, and starts looking for the books.


Jenny's Interactions with Design 2

1) Jenny's went with her mom to the library on their way to the mall and she's got some extra time while her mom leafs through Tuscan guidebooks. She sees an empty terminal and goes to the ReadingTree home page (Home Page).
2) She's not sure how much time she has so she first decides to check out what books are most popular now (What Other Kids Are Reading)
3) She sees that the list was updated that day and looks for more information on one of the books (Book Page). She checks out the book's average rating and the information on it and thinks she might be interested. She sees that "pandagirl" reviewed the book and clicks on the review link. This takes her further down the page to the actual review.
4)Jenny decides that "pandagirl" seems like she could be cool. She leaves the book page open and returns to What Other Kids Are Reading and selects pandagirl's bookshelf page from the "Choose a Shelf" drop-down box.
5) Jenny goes to pandagirl's bookshelf page (Public Bookshelf Page). She checks out her profile (pandagirl is an 11 year old girl too) and the books pandagirl loves and the ones she wants to read. She's familiar with most of them, but gets more information on one (Book Page)
6) Jenny looks up and sees her mom talking to one of her book club friends. She decides to add the two new books to her bookshelf. From one of the navigation buttons on the top she gets to the member sign in page (Member Sign In).
7) Once logged in she's moved immediately to her member page (Member Page). She clicks on "add" under the "Books to Read" shelf and is moved to the Adding a Book pages (Add a Book Page) She copies and pastes in the title from a previously opened book page and clicks submit. ReadingTree returns the book's title and author and asks her to confirm if it is the book. She checks, it is, she clicks on "yes, this is the book" and she goes back to her member page (Member Page) where she sees the book added to her shelf.
8) She wants to add the second book and again clicks on "add"
under the "Books to Read" shelf. She pastes in the title of the second book, submits it, confirms it, and is returned to her member page.
9) Her mom's still talking to her book club friend. Jenny checks out her newly expanded "Books to Read" shelf and sees one that she already finished and loved. She moves that book from her "Books to Read" shelf to the "Favorites" one by selecting the book and clicking the "move to fave" button. The page reloads and the change is made.
10)
She looks up and her mom's still talking so she decides to submit a review of the book. Clicking on the "submit a review" link she is transferred to the review page (Submit a Review). She writes her review, submits it, and is returned to her member page.
11) Her mom comes over and asks if she's ready to go. Jenny logs out.


Design 3

This version was an attempt to design an interface focused around graphics, with animated objects that ReadingTree Users could act upon directly (for example, dragging a book from a bookshelf onto a desk to get more information). However, the design was not coherent enough to consider as a whole and the house idea clashed with the tree metaphor. Furthermore, the graphic design and Flash requirements would be prohibitively labor-intensive to develop, while making the site inaccessible to certain users and perhaps detracting from the informational goals of the site. We include the sketches anyway, as they may contribute to future design iterations.