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 - Research

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.

  • What they like most about the app: "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 

  • Low 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:

  • 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.

Key problems identified

  • Lack of feedback when adding books to shelves
  • Confusing information architecture/menus
  • Search field didn't take into account finding friends

Step 4 - Sketches & Prototype

Brainstorming session
Brainstorming session

Brainstorming + Sketches

Ideas sketched on paper were later translated to Adobe XD, creating an interactive prototype adding:

  1. Feedback dialog when adding books + button status
  2. Feed and recommendation tabs with different content
  3. Search filter

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 into 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!