Building a Community for Readers
Our user-research findings identified major pain points of the current Goodreads website to be cluttering, poor labeling and lack of hierarchy, which make Goodreads difficult to navigate and use.
We’ve designed Goodreads to be more effective, efficient, and accessible for current and new users by reorganizing the structure of the website and minimizing information overload by giving prominence to the features our user-research identified as essential.
Low and medium fidelity prototypes based on the user-research findings
Our team worked collaboratively on each segment of the project in order to apply and further develop our research skills and the ability to use various methods of gathering information. We've worked as a group to organize our research findings, create sketches and build prototypes.
Goodreads before the redesign
Goodreads after the redesign
Content – Content Analysis
To assess the volume and different types of content, which exist on Goodreads we’ve conducted a content analysis focusing on the subject, document type, format, source and existing architecture.
Context – Background Research
We assessed competitive sites such as BookLikes, Bookish, and LibraryThing and our analysis identified the advanced social media component of Goodreads as a feature which set it apart from its competitors. We also examined interviews with Otis Chandler, Goodreads founder and developer, to determine the business goals and thinking behind the structure and functionality of the current website.
We used a Web Analytics tool called Quantcast and identified three key statistic indicators of Goodreads’ user demographics:
Americans are the most prominent user group of Goodreads, which make up almost half of the overall user population,
75% of the users are female and 25% are male,
More than 50% of the user population is 34 years old or younger.
Our group conducted interviews with people within the primary user demographic in order to get a better understanding of attitudes towards the current system, most valuable features and the pain points of the current website. The interviews included a usability task component which required the participant to complete five common tasks using the current Goodreads website while explaining their thinking at each step of the process. This exercise helped us gain insight into what and how users think when using Goodreads.
An open card sorting session was conducted to help establish a new labeling and main navigation menu structure. In order to create the cards, we've used the information we gathered from the content analysis.
Summary of card sorting results
Information Architecture Schematic Diagram
The design if the Information Architecture Diagram was informed by the results of the card sorting exercise. A top-down hierarchy and the relationships between various content types were established.
Information Architecture Schematic Diagram
Our research findings helped us create use cases and build personas and scenarios, which guided our final design. The card sorting exercise informed a user-centered redesign of the navigation structure and the labeling.
Sketching allowed us to explore a variety of homepage layouts in a quick an efficient manner. Sequences of sketches were created to illustrate each use case and ensure website is structured in a logical and user-friendly manner.
Sequences of sketches based on use cases
During the sketching process, we’ve redesigned the elements that our user-research identified to be problematic. For example, the layout of the homepage and the content pages was simplified to address the issue of information overload and filters were added to homepage search bar to enable the user to search the book database by title or author; or find their friends on Goodreads by their first or last name. Most frequently used features were given a prominent position on the homepage where the users can quickly access them.
Once the final direction for the design was determined all the sketches were finalized and annotated in detail.
Annotated sketch of the homepage
The clickable medium fidelity prototype was collaboratively created in Figma. We made minor adjustment suggested by the users during the review of the sketches and further developed the mega menu structure. At the medium fidelity level we are able to focus more of our attention on the user experience without getting caught up in the details of the design such as color selection and fonts.
Introduction of mega menus for each of the three main navigation options.
Clean and easy to navigate design for content pages