Goodreads App Redesign

Designlab Capstone, February 2017

Home - Perspective Mock Up.png

Goodreads is a social cataloguing website centred on books. Readers can share what they’re currently reading with millions of other book aficionados around the world, track what they’re reading, get personalized recommendations, and see if a book is right for them based on community reviews. They have a native app for both Android and iOS that supports nearly every single feature on the website.

 
 

At a Glance

My Role: UX Designer (Student)
Project Date: Feb 18, 2017-Feb 25, 2017
Responsibilities: Created the brief; conducted initial user research; utilise research to restructure IA in Sketch; conducted user testing on mid-fidelity prototype.
Design Tools Used: Pen and paper, Sketch, InVision
Design Methods Used: User interviews; personas; card sort; A/B testing

 
 

COntext of the Project

I worked on this as a student in Designlab's UX Academy, a bootcamp for those interested in all aspects of UX design. I was allowed to do one independent project as long as I came up with a full brief. I chose an app that I use almost everyday: Goodreads. While I love the app, there are still some things about it that I wish it could do more efficiently; but in the end, these opinions can only be acted upon if others feel the same way, too.

For this capstone, I created my own hypothetical brief that asked the following questions:

  • What is the main goal that readers expect to achieve on the app?
  • Once the goals are understood, how efficient are the solutions?
 

 

Project Process

Empathise

Research, Phase 1

My research was done in physical bookstores and online via Google Hangouts. Many of these in-person, sporadic interviews occurred in the bookstore and the bookstore cafe with strangers who were browsing through books, so it was unclear whether these folks actually used Goodreads (or similar apps) at all. With a limited time for the project, I opted to make my demographic broad: I spoke with librarians, bookshop employees, and people who just liked reading a lot. 

The goal of the research was to learn about peoples' reading habits, starting with a general exploration (how do you find out about what book to read next), eventually drilling down to more specific questions (how do you keep track, and have you used an app to do this).

Here is a list of all my findings.

 

Personas: Understanding the Users

Out of 11 preliminary interviews, I created three distinct user personas from the research findings. This helped to understand and visualise 1) what kind of user is likely to use the app, and 2) what their goals might be.

goodreads-persona.png
 

 

Define

With the preliminary research on readers, a competitive analysis was conducted to see what already existed, and what the most common features were. Goodreads definitely had the most features, but of the 5 participants who knew about the app, all of them mentioned that it was too complicated to use.

competitiveanalysis.png

Since this was a personal project and not one of the pre-defined briefs, I came up with imaginary business goals based on some of the secondary research I'd done on Goodreads' business model (found in the brief). The app would ideally help connect readers with new books while helping Goodreads sell more books.

businessgoals.png

Taking the personas into account, the prioritisation process began. This project was more focused on the logic and user flows rather than the visual design elements, so I wanted to make sure that the MVP was done first with a clear progression of user tasks.

 

 

Ideate

I created a product UI requirement sheet to organise the tasks by comparing the priorities vs. the persona goals. I designed a site map based on the requirements which helped feed into the potential user flows.

sitemap.png

Selecting the Tasks to Design

Because there are many potential user flows, my mentor suggested that I work with a maximum of three from a larger set of general tasks. 

userflows.png

Of these three, I pursued the task of adding a book to one's "To Read" list. Within that task, these two user flows were pursued as the most useful and universal among the personas (and due to the short time frame of the project): finding a book and adding a book to one's profile.

 

Low-Fidelity Wireframes

Quick sketches were made to get critiqued by my classmates. Since this was a much more complex project, I wanted to get initial ideas out first to get feedback, and then continue making a few more sketches with improvements before moving onto the mid-fidelity wireframes.

lowfi.png
 

 

Prototype

Mid-Fidelity Wireframes

Mid-fidelity wireframes were built out after receiving feedback from the low-fidelity sketches. They were plugged into InVision as a prototype, which was then tested by five participants. They were asked to sign up, search for Pride and Prejudice by Jane Austen, and add it to their "To Read" list.

midfi.png

 

Research, Part 2: Findings

After testing the prototype with 5 participants, I was able to see what was confusing (barring UI elements):

results.png

Before tackling the next iteration, more user testing was conducted through Usability Hub. A question test for the book page asked whether more or less information was necessary: more people wanted more information, but had varying opinions on what was the most important. As such, a card sort was done to figure out the information hierarchy of the book page with respect to both the reader (do they get the information they want) and the business (can a book be sold easily).

To better understand the CTAs, questions were also asked about some of the buttons on the page to get a sense of what was expected. Most of these buttons were derived from the original Goodreads app, so it was important to learn what copy resonated with readers to get the results they wanted.

High-Fidelity Wireframes + Prototype

Armed with this newfound information, the high fidelity wireframe was created. The current prototype can be accessed here.

 
 
 

 

Design

Visual design was not the main focus of this project. Per my mentor’s suggestion, I mimicked the current Goodreads branding by inspecting the elements from my browser and using the same colors and fonts. This was done out of respect for the project's timeline for Designlab, and remembering that my main goal was to complete a full iteration of this capstone.

 

 

Learnings

The Goodreads app is chock-full of the features available on the site, which makes it both amazing but also very taxing to use its quintessential features. While Goodreads is originally intended to be the "Facebook for readers", the research showed that the social aspect was very rarely used.

Based on my findings, I hoped to go back to the basics for the app by focusing on one flow that incorporated the intersection of customer goals and business goals: easily finding, adding, and possibly purchasing a book.

People who have used Goodreads before took a look at my redesign and felt that they would be more likely to use the app. They liked that the ISBN Search was prominent, and that the search results could be filtered.

Next Steps

It would be interesting to look into incorporating the plentiful features from the Goodreads desktop site. Based on Google Play reviews, many complained that yes, it was hard to navigate, but many also complained that there weren’t enough of the site features available for them to want to use.

The questions are based on necessity: How can we incorporate many features into the native app without affecting its usability? Which ones are really the most used? Which would pull the right levers for both the reader and the business?