GOODREADS

Kendra Raczek, Janice Cheng

04/04/2020

WEBSITE REDESIGN

01 INTRODUCTION

Goodreads is a social cataloging website that allows individuals to freely search its database of books, annotations, and reviews. Users can sign up and register books to generate library catalogs and reading lists. They can also create their own groups of book suggestions, surveys, polls, blogs, and discussions.

Goodreads resides in the genre of “social cataloging applications,” which help users to catalog things like books, movies, music, etc. Some other sites in this genre are MyAnimeList and MyDramaList, IMDb, and Last.fm. Goodreads, more than these, focuses on the social aspect of cataloging, with friends and a social feed being one of the main focal points on the website. These other examples generally also have a worse UI than Goodreads, so it’s hard to find a similar site that has exemplary design for us to reference.

When navigating to the Goodreads site, the first apparent problem is the amount of clutter and information presented on the many pages of Goodreads. As part of this clutter, a differentiated hierarchy of information (text, content, sections) is rarely present, leading users to not have a clear path for where they should be looking. There are also a lot more functions than initially visible as well, but are difficult to uncover. Because there are so many functions and information throughout the site, the navigation and information architecture of Goodreads doesn’t clearly provide access to these. At times, too, there may be too much scrolling for users to easily navigate and find the information they’re looking for.

Looking at opportunities for the site design, we hope to clearly outline and categorize the functions of the site to provide better navigation for users, and even remove functions that are less used. In this way, it will be important for us to uncover the priorities and usage of each function.

02 CONTEXTUAL INQUIRY

To begin our user & usability research on the existing Goodreads website, we developed a task list for three participants that we conducted a contextual inquiry with. We recorded the sessions and created transcripts of each participant, noting breakdowns, verbal feedback, behavioral changes, and task performance. Before starting the interviews, we carefully chose the users that we wanted to perform contextual inquiries with. The most important factor in this was to study a wide variety of users with different levels of experience navigating Goodreads and digital technology in general.

Below is a summary of our results on two of our participants.

User 1

First, we interviewed the sister of one of our members. She is in her 20s and works as a software engineer. She is already familiar with user research processes, and had a valuable perspective of looking for what was wrong with the Goodreads system. She is a user that is very familiar with using technology and navigating websites, being a front-end software engineer herself. She mainly uses Goodreads to find books to read, and to track and review the books that she has read. This participant is also a huge book reader, and reads multiple books at one time. We did the interview at her apartment, using her laptop in her usual spot on the coffee table in her apartment. Her biggest struggle with using the website was the overwhelming amount of information being presented on each page. We expected this participant to easily navigate the site because of her expert status, but even she had a very hard time finding some features because they were hidden or unintuitive. She also got so frustrated on not figuring out the task of manually sorting the books in one of her bookshelves that she decided to not complete the task. Finding out that even expert users struggle to navigate Goodreads, we realized there are significant UI/UX issues.

User 2

For our interview with a middle-aged mother, we found that it was especially hard for her to navigate the site. She is an avid reader, but is an amateur computer user. She works a lot at her job, and has little time outside of working for leisure time on websites, limiting her familiarity with digital design patterns. During the interview, she was having a day off and using a laptop on the couch, which is the common context that she uses the computer. Many times, she first looked for a more manual way to do tasks, not being aware of certain features that would simplify the process. Memory was also an issue, as the participant often forgot where they were on the site and which buttons to click, even shortly after just performing them (recognition vs recall). She often questioned how to go back from certain pages, informing us about the lack of breadcrumbs throughout the website. At the end of her interview, I asked what functionality was most important for her on Goodreads, and she responded finding books and also keeping track of what books she has read. It seems like, for her, and probably most of the older generation, doesn’t value the social aspects of this website as much as younger users. It would be helpful to look up the specific demographic statistics of the Goodreads site.

03 AFFINITY DIAGRAM

To begin our initial brainstorming process, we created an affinity diagram with Post-It notes on a whiteboard, quickly coming up with the many functions and aspects of the Goodreads site, and sorting them into categories.

04 WORK MODELS

From the qualitative and quantitative data we collected in our contextual inquiries, we created various work models outlining users' experiences with using the original Goodreads site. From these we identified breakdowns that would frame our understanding leading into the design phase.

Flow Model

We made a flow model of different types of users in the Goodreads community. The different types of users in the community are based on the roles the users play and often, a user can play more than one role in the community. This makes it hard to exclusively categorize users and assign tasks that they perform. While determining different types of communications between different types of users, we found that users do not use this platform to extensively communicate with other users of different roles with the exception of discussions where users discuss a certain book or mutual interests and reviews where users mostly read reviews posted by other users and do not reply and comment on them. As a user can play multiple roles in the flow work model, most relationships between different roles are between a user and another role. Most communications also exist in one direction because as noted in the cultural model, most of the users of Goodreads are introverts and participate passively, choosing to read other users’ comments and whatnot instead of contributing content, which would put them in the latter role, keeping the communication relationship one way.

Artifact Model

We chose to examine the homepage as an example of the various UX problems that we have found throughout the site. Especially because of one of our interviewees’ strong thoughts on the large amount of information on the homepage, we wanted to analyze the amount of information more. As the user glances over the text, there aren’t very clear indications of what sections are what because the style of text is not well-differentiated. In terms of artifacts, there are a lot of links and functionalities available on the homepage that are overwhelming for a user to comprehend. When our interviewees were performing tasks, the small and hidden text was hard for them to find, thus preventing them from being able to perform those tasks or knowing that certain functionality existed.

Sequence Model

The sequence model we chose to draw was of the first task. We chose this task because from the interviews, it was the task with the most hiccups and the one where interviewee’s took an extended duration of time to complete as compared to the other tasks, suggesting that there are a lot of breakdowns in a key feature of Goodreads. A lot of the triggers where the interviewee had to reroute their methods and backtrack to a previous page was because they hit a dead end in the step process which could have been avoided if the web page developers made clear indications of what a page does or if they will be able to perform a certain task by clicking on something. The intent of the task was pretty simple. However, the intent kept repeating itself after multiple steps due to the interviewee’s hitting dead ends and having to start over not due to not being able to find where something is but not having access to perform the certain task. A good example of this would be the user not having permission to post on a certain discussion thread and not realizing this until scrolling all the way to the bottom of a long discussion thread. This breakdown could easily have been resolved if a text statement in red was made at the top stating the the user cannot post in that thread because it was not a member.

Cultural Model

People’s use of Goodreads as a service relies heavily on the amount of free time they have, especially since reading books, which is the backbone of Goodreads’ functionalities, take up a lot of time from the lives of working adults. The user may also be using other social media outlets for connecting with others instead of Goodreads, detracting from the social elements of the website. A foundational influence is also the user’s access to technology; what kind of devices, how fast of an internet connection, and when they are able to use technology. In the context of Goodreads, individual users collectively establish an unwritten code of conduct and norms for how users participate in the different functions of Goodreads, especially the community-based ones.

Physical Model

05 PERSONAS

We created two user personas that represented archetypal groups of Goodreads' user base to aid in developing our prototype.

06 PAPER PROTOTYPE

After creating multiple quick ideation sketches of various screens of our Goodreads redesign, we developed a detailed hand-drawn set of the 10 main website pages. We also included "pop-up" paper elements to use when we performed an interactive user evaluation on the paper prototype.

07 HIGH-FIDELITY PROTOTYPE

For our final Goodreads prototype, we used Adobe XD to create an interactive set of website pages, for which we received a heuristic evaluation from our peers.