Goodreads

Role

UX/UI designer

Duration

Sept - Oct, 2024

Team

Context

Goodreads is the largest online community for book lovers to discover new books. As a user, I am often put off by its difficult and outdated interface. This inspired me to revamp the site with better user experience and a modern aesthetic.

Goal

This project aims to

  1. Improve usability by enhancing navigation and streamlining user journey

  2. Modernise visual styles to appeal to aesthetic-conscious users

Impact

9-10

9-10

Net Promoter Score (NPS)

Net Promoter Score (NPS)

Read ahead for my design process.

We conducted social listening on Reddit and App Store to gather information on user needs and frustration in an authentic and unmoderated environment.


The main reasons people use Goodreads are:

  1. To discover new book

  2. To track readings

  3. To connect with other readers


Many users reported that the interface feels clunky, noisy and ugly.

Social Listening: Quotes from Reddit

Original Goodreads Website

Original Goodreads Website

We conducted a design audit on the website and identified following design limitations.

  1. Poor navigation

  2. Lack of visual hierarchy

  3. Frequent need for scrolling

  4. Text-heavy content

Design Audit on Goodreads Website

We discovered that users reported moving to StoryGraph as alternative to Goodreads. . Competitive analysis showed that StoryGraph has:

  1. Better navigation

  2. Clearer visual hierarchy

  3. Modern UI

Design Audit on StoryGraph Website

Competitive Analysis

Navigation

  • Complicated

  • Hidden

  • Simple

  • Easy to find

Layout

  • Mixed

  • Consistent

Content

  • Different types on one page

  • One type of on one page

UI

  • Outdated

  • Inconsistent

  • Cluttered

  • Modern

  • Consistent

  • Minimalistic

User base

  • More established

  • 140 million users

  • Smaller and newer

  • 1.2 million users

User perception

  • Amazon-owned

  • Neglect user needs

  • No innovation

  • Independent

  • Created for reader

  • Growing users

UVP

  • Integration with Amazon & Kindle

  • Social features

  • Larger book catalogue

  • Non-amazon-affiliate

  • Personalised reading data & recommendation

  • Ads-free

Define

User persona was created based on user research and this report on average Goodreads user.

Persona

Sarah Thompson

29, Marketing Professional, New York

About

Sarah is a regular visitor of Goodreads. She is passionate about reading and enjoys exploring different genres. She loves discussing books and sharing opinions. Her favourite genres are Fiction, Romance, and Fantasy.

Quote

"I love losing myself in a good fantasy novel. Goodreads is my go-to place to track my reading and discover what I should pick up next. "

Goals

  1. To discover new books

  2. To track reading progress

  3. To connect with other readers

Frustrations

  1. Struggle to locate content on the website

  2. Overwhelmed by too many types of content on one page

Problem Statement

Goodreads’ poorly designed interface hinders users' ability to easily browse and discover books. As a result, users often feel frustrated and increasingly turn to alternative book discovery platforms that offer a more streamlined and visually appealing experience.

Success Metric

User Satisfaction Score

User Satisfaction Score

(Net Promoter Score)

Ideate & Prototype

To find a new book to read, it takes six interactions on the original website, which suggests significant friction.

We identified 3 areas of improvement to reduce the number of steps:

  1. Navigation

  2. Layout

  3. Scroll direction

User Flow: Discover a New Book to Read

We compared the pros and cons of different layouts. For example, we preferred the horizontal scroll to vertical scroll because it encouraged continuous exploration and felt more fluid and dynamic.

Sketches: Exploring Content Layout

We took design inspiration from other successful products. For example, the tab design was inspired by Youtube to group different type of content under tabs. This reduced clutters in one page and offerred a clearer organisation of content.

Design References

Evaluate

We tested our prototype with users and collected survey responses. They were asked to compare the original website and the new design on Figma prototype.

All 5 tested users preferred the new design and stated that the ease of navigation and visual appeal as the reasons for the preference.

User Survey Responses

What is your impression of the new landing page?

Which design do you prefer?

What influenced your choice between two designs?

Success Metric: Net Promoter Score (NPS)

How likely are you to recommend the new design to other Goodreads users if it gets implemented?

9-10

9-10

from 80% respondents

from 80% respondents

Final design

Goodreads Web Redesign

(See before)

Goodreads Web Redesign

(See before)

Next steps

  1. Conduct user interviews/collect web analytics to understand other pain points and rank the issues by urgency

  2. Redesign other pages on the website based on issues identified

Learnings

My first collaborative project with another designer was a fun experience, where we bounce off ideas and learn from each other's flows. We set clear weekly action steps and kept a consistent meeting schedule, which helped us stay aligned and moving forward smoothly in a remote working setting.

11:59 AM