Goodreads App
Inis Leahy
UI/UX Designer
Made with

Goodreads App

Finding good books to read shouldn't be rocket science

My role

This project was part of my User Experience Design certificate course at IADT - Ireland. The research phase was conducted with the help of two other designers and the prototype and visual design phases were done by me alone. What I did in this project involved:

User research (Survey, Interview and Observation, Guerrilla Testing, Formal Usability Testing) • Brainstorming session• Wireframing • Prototyping • Visual design • Animation for interaction

Tools used

Survey Monkey • Adobe XD • Marvel App • Protopie • Illustrator • Photoshop

Step 1 - Analysis

Current version of iOS app.
Current version of iOS app.

Heuristics Evaluation

I used Nielsen's Heuristics as an inspection method that helped me identify usability problems in the user interface.

A summary of the problems found:

  • No indication when images are still loading
  • Search field doesn’t take into account spelling mistakes
  • No search suggestions while users type in the search field 
  • Busy “Search” page with small pictures and not enough white space
  • Small font and with not enough contrast (font x background)

You can read the full report here.

From left to right: Candl, LibraryThing and Litsy.
From left to right: Candl, LibraryThing and Litsy.

Competitors Analysis

In order to better understand how competitors tackled the same problems, a competitors analysis were conducted with direct competitors:

  • Candl: Focus on the organization aspect, leaving the interface looking really clean and easy to read. 
  • LibraryThing: It's the only one apart from Goodreads with a scan bar code feature. The platform also allows users to search books by genre.
  • Litsy: Very visual, allowing people to share pictures with their posts. Apart from the search and social features, it doesn’t provide other ways of finding recommendations.

When comparing Goodreads with its competitors, it gets clear that it offers a broader range of features, making it harder to prioritize, leaving the whole app architecture confusing.

Step 2 - Research

In order to assess Goodreads user experience and validate the previous findings, a mix of qualitative and quantitative research methods were chosen, as combining methods would allow me to determine the strongest insights from each one of them, resulting in a better understanding of users.

Goodreads App

Survey

The survey was designed focusing on understanding how real users use the app, which features they use most, what they like about the app and what they don’t.

  • 39 people completed the survey

  • When asked about what they like most about the Goodreads app, the answers revolved around "getting book suggestion" and "being able to see what friends are reading".

  • Importance of social features for the users in order to find new book recommendations

  • Use of List/Shelves to organize and keep track of readings 

  • Frequency in which some of the features are used suggest poor information architecture or unnecessary tools

35%
used Goodreads "Less than once a month"
59%
identified as female
70%
described themselves as very skilled at using digital apps
55%
were between 25 and 34 years old
Screenshot of one of the observation recordings
Screenshot of one of the observation recordings

Observation and Interview

3 new users were observed using the app, 2 of them being male and one female, all aged between 36 and 44 years old and with good level of familiarity with using digital apps.

The tasks were:

  1. “Log In, find a new book to read and add it to a shelf.” 
  2. “Find a book you’ve already read and add it to your ‘Read Shelf’.”

After the observation, the same subjects were interviewed. 

Guiding Questions:

  • Have you used the Goodreads app before?

  • What was the most enjoyable part of using the app?

  • What was the most frustrating part of using the app?

  • Are there any improvements you would make to the app?

  • How would you describe the experience of using the app in one word?

Conclusion... so far

Positive aspects:

  • Subjects found the idea behind the app simple and useful
  • They enjoyed using features like the search bar and the cover scanner

Negative aspects:

  • Subjects struggled to complete tasks due to lack of affordance, confusing navigation and lack of feedback from their actions.
  • Low contrast between elements, with buttons and fields faded into the background

Step 3 - Personas &
User Scenarios

In order to better understand users motivation when using the Goodreads app, I used the data collected to construct Personas and Scenarios.

"As is" Scenarios described the main task each persona would be motivated to achieve, being important to identify pain-points and possible struggles when using the product.

After this step, "To be" Scenarios were designed in order to address the pain-points found, showing how these tasks should be achieved in an ideal situation.

Problem Statement

Based on the research above, the question that guided the redesign was: 

"How can we improve the information architecture and search feature of the app in order to provide users with an easier and more enjoyable way to find their most desired resources: book recommendations and friend’s activities?"

Step 4 - Sketches & Prototype

Brainstorming session
Brainstorming session

Brainstorming + Sketches

Having the user pain-points in mind, we started to sketch possible solutions. After a couple of versions, the best one was voted by team members, and a slightly more refined version was made.

Paper prototype
Paper prototype

Paper prototype

The result of the brainstorming session was a paper prototype that were tested between group member to make sure the designs were solving target problems. The final version of the paper prototype was refine in Adobe XD and some of its interactions can be seen below.

Step 5 - User Testing

"Like, Wish, What if" protocol from Guerrilla Testing

Guerrilla Testing

The Version 1 of the interactive prototype shown above were tested with two people who were asked to perform 4 tasks:

  • Find the profile page of your friend “Mary Smith”
  • Find books recommended for you
  • Add a book named “Book of Mine” to your one of your shelves
  • Find a list with your friends’ activities

After the interaction, the "Like, Wish, What if" protocol was used as a tool to help users talk about their experience.

Goodreads App

1st Iteration

Problems found:

  • Users were unsure about what they would find in a tab called "Explore"
  • Users were confused about the layout on "Add to shelf" dialog box


Positive/Liked aspects:

  • Carousel to explore book recommendations
  • Search filters
  • Explore by gender

Formal Usability Testing

We conduct a moderated in-person usability study using Version 2 of the prototype, following a within-subjects design, where all participants perform all tasks, and used a technique called counterbalancing, whereby the order of tasks is randomized to limit the effects of learning transfer. 6 users evaluated the prototype and all of them shared similar demographic characteristics with the personas. 

Tasks performed:

  1. Find the profile page of your friend “Mary Smith”
  2. Find books recommended for you.
  3. Add a book named “Book of Mine” to your one of your shelves
  4. Find a list with your friends’ activities 

After the tasks, participants were asked to complete the “Like, Dislike, Wish and What if” Protocol, which helped them to talk about their experience. 

The full testing protocol can be seen here.

User testing session
User testing session

Findings and 2nd Iteration

A summary of the user testing findings:

  • All participants completed all tasks, but needed a large number of prompts to finish Task 1.
  • Participants enjoyed the quick access to tabs and menu, but also liked the idea of having a search field on the top. 
  • Navigation and the overall interface was described as intuitive and clean.
  • The search box was not prominent enough.
  • Filter in search was not visible enough.

Goodreads App

Step 6 - Visual Design

Proposed

Proposed "Discover" tab

The final step was to design the screens in Adobe XD, also using Protopie to animate interactions. Changes made in the visual aspect of the app focused on improving problems found in the research phase as:

  • Busy screens
  • Low contrast text and buttons
  • Low readability and discoverability
  • Not consistent UI elements

Fonts and main brand colors were kept to be consistent with brand guidelines

Goodreads App
Interact with the high fidelity prototype below.

Interact with the high fidelity prototype below.

Goodreads App

Search filter

One of the problems found in the research phase was the search feature, which can only be used to search for book titles or authors. In the new proposed search field you can also look for friends and filter your search results.

Goodreads App

Adding books to shelves

Another problem was the lack of affordance when adding books to shelves. In the proposed flow, users are presented with a pop up to choose their options and then, a confirmation message. The button also changes to inform the book was successfully added and name the shelf it is on. 

Goodreads App

Discover tab

Carousels were used in the Discover tab to encourage users to inspect what's next, also being a better solution for small screens than a thumbnail grid.

Goodreads App

Learnings

  • The importance of giving some level of control to users: some of them wanted to look for friend's profiles using the search box, others wanted to see a full list of friends.
  • Users can provide designers with valuable insights and ideas they never thought of: one of the users said she would like to quickly bookmark books without having to organize them in shelves.
  • At a personal level, I had the opportunity of updating my knowledge on Mobile Interface Design.


Thanks for taking this time to see my work!

If you have any questions or simply want to talk about design stuff, don't be shy and contact me!