The Problem

Goodreads has one of the largest reading communities in the world — over 150 million members — but its homepage fails to communicate that. The logged-out experience is essentially a sign-up wall with filler content beneath it: a wall of plain-text genre links, anonymous user recommendations, and a quotes section that has no clear purpose.

The result is a homepage that doesn't persuade, doesn't excite, and doesn't show new users what they're actually signing up for.

Specific problems with the current experience:

• The hero has no emotional hook — just a headline and three auth buttons with no preview of the product

• The "What are your friends reading?" section has a headline but no content for logged-out users, making it feel broken

• A wall of 30+ genre links sits in the middle of a marketing page, reading like a sitemap

• The visual design is dated — beige backgrounds, small type, inconsistent spacing — and doesn't reflect the richness of the reading culture it serves

• The social layer, which is Goodreads' biggest differentiator over any book database, is invisible on the homepage

The Solution

I redesigned the Goodreads homepage to lead with value rather than friction. The focus was on making the social and discovery features visible before sign-up, building trust through social proof, and creating a visual system that reflects the warmth and depth of reading culture.

The redesign is organised around three ideas:

Show the product before asking for a commitment. The hero now includes a preview of the reading shelf experience alongside the sign-up form, so users understand what they're signing up for.

Make the social layer visible. The friends section is redesigned to show real book activity — grouped by title, with friend counts ("15 friends have read this") that communicate the health of the community without requiring the user to already have a network.

Earn the discovery section. Instead of a generic genre wall, recommendations are tied to a specific book the user has read, with a plain-language reason for each suggestion. This makes the algorithm feel transparent and the section feel personalised rather than generic.

Key Concept - Social Proof as the Core Hook

Goodreads' single biggest advantage over any other book discovery tool is its social layer. The redesign makes this explicit from the first scroll.

The "What your friends are reading" section surfaces books by friend count — "15 friends have read this", "7 friends are reading this" — giving logged-out users a sense of the community's activity even before they've connected with anyone. This is the same principle that makes review counts on Amazon more persuasive than a list of reviewer names: the number does the social work.

Ratings in this section only appear for books friends have finished — a deliberate data-state decision that ensures the stars mean something and don't mislead users with empty ratings on unread books.

Redesign - Mobile

The User

The primary user is someone who loves books and is considering signing up for Goodreads, or a lapsed user returning after time away.

They may already use Goodreads casually on mobile but haven't engaged deeply with its features. They are discovery-oriented — they want to find their next book — and socially motivated: they care what people with similar taste are reading.

Their main goal is to understand quickly what Goodreads offers them specifically, feel confident it's worth joining, and be shown books that are genuinely relevant to their taste.

Current Experience - Desktop

The Goodreads homepage presents a sign-up form immediately below the nav, with a generic headline and no preview of what the product actually does. Beneath it, the page fills space with a rotating quotes section, a list of anonymous users' reading activity, and a wall of 30+ plain-text genre links — none of which communicate why Goodreads is worth joining.

The "What are your friends reading?" section appears mid-page with a headline and nothing else — no books, no activity, no content of any kind for a logged-out user. It reads as broken rather than intentional.

Visually, the page relies on a beige background, small body type, and inconsistent spacing. Book covers — the most visually compelling element available to a reading platform — are largely absent from the marketing experience.

The core issue is not missing features. Goodreads has a rich social layer, a powerful discovery engine, and a massive community. The homepage simply doesn't show any of it.

Design Decisions

Typography: DM Serif Display + DM Sans A serif/sans pairing that separates editorial presence from functional clarity. DM Serif Display appears only on headings that carry the brand's literary personality — hero title, section titles. DM Sans handles all interactive and body text. The two fonts never compete because each has a defined role.

Colour: Terracotta accent on a warm neutral base A single signature accent colour (#C0542A) applied to CTAs, active states, rating stars, and key labels. The rest of the UI stays in warm near-whites and near-blacks, ensuring book cover art is always the most colourful element on the page. This approach — expressive accent, neutral base — avoids competing with cover art while giving the product a distinct visual identity that no competitor currently occupies.

Homepage structure The page is organised as a progressive reveal of value: hero (why sign up) → social proof stats → personalised discovery → friend activity → community lists → genre navigation → footer. Each section earns the next.

Empty state for logged-out users The friends section handles the logged-out state honestly: real books are shown with community-level friend counts rather than blurred or placeholder content, communicating activity without faking personalisation.

CTA consistency Both the discovery section and the friends section end with a right-aligned outlined CTA — "See all recommendations" and "See all friend activity" respectively — leading to dedicated full pages. This creates a consistent pattern across sections: the homepage shows the best three or four, the full page handles the scale.

Redesign - Desktop

Reflection

This project currently covers the desktop and mobile homepage. Tablet version, as well as inner pages (book page, search results, logged-in dashboard, recommendations page, friend activity feed), will be added as the redesign develops.

The most interesting design challenge was the logged-out empty state — designing a section called "What your friends are reading" for a user who has no friends on the platform yet. The solution (community-level friend counts rather than personal activity) reframes the section as social proof rather than a personalised feed, which is both more honest and more persuasive for a new user.

A close second was the decision to keep the overall Goodreads rating in the "What your friends are reading" section, rather than deriving a rating from friends' reviews alone. Since not every book will have friend ratings — some will only appear in "want to read" shelves, others will have been read with no review left — using friends' ratings would create an inconsistent card design where some books show stars and others don't. The overall rating keeps the cards visually consistent and gives the user a reliable anchor to click through to the book's full page.

On mobile, two additional decisions were worth noting. The illustration was placed below the hero copy rather than above it, so the headline and CTA are the first things a user sees on a small screen — the illustration adds warmth without delaying the value proposition. And the desktop 4-column card grids become 2-column on mobile, maintaining enough visual density to feel like a rich discovery experience without sacrificing legibility on a narrow screen.

Explore the live prototype for desktop here and for mobile here

The mobile redesign leads with the headline and a single clear CTA, so the value proposition hits before anything else. The illustration sits below the copy rather than above it, keeping the sign-up flow uninterrupted. Book covers are large enough to be visually engaging and immediately recognisable.

The personalised recommendations section shows four cards in a clean 2-column grid, each with the book's genre, title, author, and rating — everything a reader needs to decide whether to click.

The friends section replaces the empty state with community-level friend counts ("15 friends have read this"), communicating social activity honestly without requiring the user to already have a network.

Each section has a clear CTA leading to a dedicated full page. The overall layout is calm, structured, and consistent — it feels like a product that respects the user's attention rather than competing for it.

The mobile redesign leads with the headline and a single clear CTA, so the value proposition hits before anything else. The illustration sits below the copy rather than above it, keeping the sign-up flow uninterrupted. Book covers are large enough to be visually engaging and immediately recognisable.

The personalised recommendations section shows four cards in a clean 2-column grid, each with the book's genre, title, author, and rating — everything a reader needs to decide whether to click.

The friends section replaces the empty state with community-level friend counts ("15 friends have read this"), communicating social activity honestly without requiring the user to already have a network.

Each section has a clear CTA leading to a dedicated full page. The overall layout is calm, structured, and consistent — it feels like a product that respects the user's attention rather than competing for it.

Current Experience - Mobile

The original Goodreads mobile homepage is visually cluttered and structurally confusing. The sign-up options (Amazon, Apple, email) are presented as three equal choices before the user has any reason to care about the product, with no value proposition above them.

The hero banner is decorative but doesn't communicate what Goodreads actually does. Below it, the page becomes a dense wall of small text — genre links, quotes, anonymous recommendations — with no visual hierarchy to guide the eye.

Book covers, the most compelling asset a reading platform has, are tiny and hard to distinguish. The "What are your friends reading?" section appears with a headline and nothing underneath it, reading as broken.

The overall impression is of a website that hasn't been designed for mobile — it reads like a desktop page that has been compressed.