Redesigning reader's
experience on Books on B

Books on B Homepage Design 1
Books on B Homepage Design 2

Role

UX Research • UX Design • Interaction Design • Usability Testing

Platform

Website

Timeline

4 weeks

Overview

Project:

Books on B (4-week concept project at General Assembly Bootcamp).

Focus:

Applied coursework skills to a real-world problem using design, prototyping, and evaluation.

Context:
  • Books on B is a local community bookstore.
  • Covid closures caused inventory struggles despite digital presence.
  • Readers had difficulty purchasing online → led to customer loss.

Providing an Improved
Experience to Books on B
Readers

Website rebuilt to make shopping easier with refined filtering and a scannable layout.

Independent publishers highlighted to support loyal readers' requests.

So, what process did I actually follow to get to the solution?

Following the double diamond design process

In four weeks, I applied the Double Diamond process to explore opportunities, design solutions, and deliver an impactful product.

Double Diamond Design Process

Understanding Readers' Problem

Key Insights

1.

Control over search

Readers value title, synopsis, subject, and recommendations.

Want concise, clear, low-cost info.

"Need concise, clear, and inexpensive information about the book."

2.

Multiple formats preferred

Many readers prefer audiobooks and e-books.

"Over the years I've started to enjoy digital books more."

3.

Decision fatigue

Too many choices overwhelm readers.

Often rely on friends' recommendations.

"Convenience over anything."

4.

Quality over cost

60% prioritize genre/category over book price.

"I always go for my favorite genre."

Identifying Reader Pain Points

Tested Books on B's original website with 5 users through tasks and questions on flow, interface, and usability. Gathered initial impressions, noted pain points, and identified areas for refinement.

Original Website 1

Homescreen

All 5 users were confused about filtering information with the menu.

Original Website 2

Content Screen

4/5 users struggled with scannability and content hierarchy.

Original Website 3

Product Page

3/5 users found the page too text-heavy.

Original Website 4

Checkout Screen

All 5 users said the 10-click checkout was too time-consuming.

Anna, a student

Anna - Student Persona

Goals

  • Explore rare books conveniently online
  • Support independent publishers
  • Find trusted reviews

Pain Points

  • Visiting stores takes too much time with her busy schedule
  • Overwhelmed by browsing giant online retailers
  • Frustrated by lack of support for indie publishers

Needs

  • An easier way to explore all available books
  • A quick, convenient shopping experience
  • Reliable reviews for less popular titles

Mapping Anna's journey revealed emotional lows during book discovery and checkout — critical opportunities where design could improve her experience.

Anna's Journey Map

Design Opportunities

1

Bring the bookstore feel online

→ Recreate the joy of browsing in-store while offering the convenience of shopping from home.

2

Make the experience intuitive

→ Simplify navigation and interactions so readers can easily discover and buy more books online.

3

Highlight features & services

→ Showcase unique offerings and benefits of Books on B to build trust and encourage engagement.

User flow

Mapping out the flow and interactions

Books on B User Flow Wireframes

Low-Fidelity Sketches

Early sketches explored content hierarchy and navigation improvements.

Homepage Development Sketches

Add filters/sort for easier exploration.

Keep categories in global navigation limited.

Include E-books and audiobooks.

Updating Navigation Menu

Interviews revealed that categories were often duplicative or unhelpful. To improve content filtering, I redesigned the navigation using two methods:

  • Tree testing → evaluated findability of topics
  • Card sorting → showed how users group and label ideas

These insights helped create a cleaner, more structured information architecture.

Original Navigation Bar

Original navigation bar

Updated Navigation Bar

Updated navigation bar

Updated Submenu

Updated submenu

Mid-fidelity Wireframes

Refined homepage, content, and product pages to make the site more scannable, intuitive, and trustworthy.

Mid-fidelity Homepage Wireframe
1

Animation screen for events

2

Quick filters for genres

3

Independent publishers

4

Children's books category

Product Page

Refined homepage, content, and product pages to make the site more scannable, intuitive, and trustworthy.

Product Page Wireframe
1

Book genre shown – easy category context

2

Pricing in all formats – supports diverse customer needs

3

Wishlist button – encourages future purchases

4

Embedded reviews – credibility from accredited sites

5

Recommendations – related books by same author

Checkout

Redesigned checkout for a faster, clearer flow.

Checkout Wireframe
1

Multiple sign-up options – sign in, guest, or quick accounts

2

Progress bar – shows users exactly where they are in the process

3

Order summary – visible on every screen for clarity

4

Streamlined flow – reduced to 5 clicks for faster checkout

Interface Usability Testing

Conducted 5 moderated and 30 unmoderated user tests (via Maze).

Iterated designs based on recurring themes from user feedback.

Usability Testing 1 Usability Testing 2
Usability Testing 4 Usability Testing 3

Key Findings

🏷️

Users liked book signing events highlighted on homepage.

📂

Needed clearer distinction between the two menus → combined flows for smoother navigation.

🎯

Filtering worked well, but categories required refinement → added more genres under Independent Publishers.

📖

80% didn't understand "rare books" → renamed to Books by Independent Publishers.

⭐

Reviews from multiple sources felt redundant → kept only critics' reviews.

👥

Users value connecting with other readers' reviews for less popular titles.

🎁

Readers buying gifts filtered content via Best Selling Books.

Style Guide

Ensuring cohesive design

I created a style guide to maintain consistency and translate the site into a warm, friendly, and aspirational experience.

Early designs were either too monochrome, too close to giant retailers, or too youthful. Through iteration, I refined colors, contrast, and font sizes to balance personality with accessibility.

Visual Style Guide

Final Solution

Refined book exploration and browsing experience

Incorporating user feedback, I refined the prototype into a complete end-to-end experience.

Key improvements include:

  • • Quick book exploration
  • • Personalized user preferences
  • • Streamlined 5-click checkout
Final Solution Image 4
Final Solution Image 3
Final Solution Image 5
Final Solution Image 1
Final Solution Image 2
→

Reflections

This project showed me that design is never "finished" — it requires continuous iteration and improvement. As a concept project, it lacked business input, but it reinforced the importance of using multiple design thinking methods to create inclusive solutions.

Future Updates

  • • Conduct further usability testing with readers to validate the final flow.
  • • Build out the merchandise selection flow, a key part of Books on B's identity.
  • • Add a Book Club feature to make the site more interactive and engaging.

Let's work together

I'm always interested in new opportunities and collaborations.

×