Bringing an Independent Bookstore’s In-Person Warmth Online

Literati Bookstore Redesign

Redesigned Literati’s navigation, homepage structure, and product experience to reflect the in-person discovery and staff curation that define the store.

Role

UX Researcher & Designer

Team

One of two

Client

Literati Bookstore

Timeline

January – March 2026

Context & Problem

Literati’s story is told in person, not online.

Literati is an independent bookstore in Ann Arbor, founded in 2013 to bring people together through books. The store is built around discovery: staff recommendations, hand-written shelf talkers, curated displays, and a space designed for browsing.

None of that comes through on the website.

13 of 14

people we surveyed had visited the store. Only one had used the website.

This project was scoped around design, not research. We wanted a more comprehensive understanding before redesigning around it, so we surveyed 14 people about their experience with Literati, in person and online: work beyond what the brief called for.

Thirteen had visited the physical store. One had used the website. For a bookstore whose identity is built entirely on in-person discovery, that gap was the problem we set out to close. We wanted to figure out what made the in-store experience worth bringing online in the first place, rather than building a generic e-commerce site.

Our question: how might we bring Literati’s in-person discovery and staff curation online, so browsing the website felt like browsing the shelves rather than shopping a catalog of books?

Our task: redesign Literati’s website so it could:

Bring the in-store experience online
Improve responsiveness across devices
Simplify navigation and usability
Increase customer engagement

Research & Insights

The handwritten staff notes tucked next to books are memorable to shoppers at Literati.

Research design. I led three research methods to understand the gap between Literati’s in-person and online experience:

Competitive analysis of seven bookstore websites (The Dawn Traders, Booksweet, Motte & Bailey Booksellers, Vault of Midnight, Schuler Books, Barnes & Noble, and Bookshop.org), benchmarked on how clearly each communicated store information, promoted books and events, and supported shopping and purchasing.
A 14-person survey, recruited through Slack channels and run after the competitive and secondary research, to ground design decisions in actual shopping behavior rather than assumptions about it.
Secondary research reviewing Literati’s existing website alongside its Google and Yelp reviews, to understand what customers already valued about the in-person experience, so the redesign could preserve it, not just modernize around it.

Competitive analysis of seven bookstore websites, scored across home page and product page criteria.

Seven bookstore sites scored across home page and product page criteria. Click or tap to enlarge.

Key findings.

Shelf talkers left the strongest impression on shoppers. Several respondents named the hand-written recommendation cards directly as what made Literati feel different from any other bookstore, digital or physical.
People browse the store differently than they browse the website, because they use each one in a different context: checking availability or browsing recommendations while still in the store, and coming back afterward to search for something they’d seen or check events.
The current homepage structure overwhelms shoppers with too much competing for attention. Long, undifferentiated text blocks and stacked book lists made browsing online feel like work, not discovery.
Genre is how people already navigate Literati’s shelves in-store, an established habit worth carrying directly into the redesign.

Insights. Every one of these ties back to the same idea: the website needed to bring back the parts of the store that made people want to be there.

Synthesis. The four findings above were derived once competitive, survey, and secondary research were synthesized together.

Constraints

Five weeks, and a brand identity we couldn’t touch.

Timeline. This was a five-week course project. Every research method, design decision, and screen had to fit inside that window.

Brand identity. Literati’s brand identity, such as its green-and-parchment palette and its handwritten-note aesthetic, was already well established. Solving real usability and engagement problems meant doing it inside that identity, without touching what already made the brand feel like Literati.

Research sample. All 14 survey respondents came through Slack channels, a convenience sample of whoever had access and chose to respond. That’s a significant limitation on how far these findings generalize across Literati’s full customer base.

Validation. We didn’t run usability testing on the redesigned site. The four decisions in Process & Key Decisions are grounded in research, but none of them were tested with people actually using the interface. That’s the most important next step for this work going forward.

Process & Key Decisions

Four decisions, shaped by what we heard.

Every decision below traces back to a specific research finding. All four were shared decisions: ideation and execution split evenly between us.

Responsive design. Survey responses showed people using the site in two different contexts: on mobile while physically browsing in the store, and on desktop later, checking events or searching for a book they remembered seeing. We designed every screen to be fully responsive, so the experience held up no matter what device someone picked it back up.

The site adapts across desktop, tablet and mobile, so browsing, buying and finding store information all hold up on any screen.

Genre-first navigation. The current site groups “Books” by content type: staff picks, bestsellers, subscriptions, blog posts, with no genre structure at all. In the physical store, genre signage tops the shelves, and it’s how people actually find what they’re looking for, an element worth carrying online. We restructured the site’s book navigation around genre as the primary browsing path, and reorganized the homepage from nine loosely-labeled, flat sections down to a small number of purpose-driven ones: New Releases, Staff Recommended, Local Authors, each with a clear reason to exist.

Genre-based organisation makes browsing more intuitive and gives exploratory discovery somewhere to start.

Digital shelf talkers. Hand-written shelf talkers were the single most memorable part of the in-store experience for the people we surveyed. We built a digital equivalent directly into the product cards, preserving the personal, curated feel that sets Literati apart from a standard online bookstore.

The hand-written shelf talkers become digital recommendations, carrying Literati’s curated identity onto the site.

Reducing what competed for attention. The current site’s homepage stacks nine separate book-list carousels, six promotional tiles, a dismissible alert banner, and a cluttered header with a two-part search selector, login, wishlist, and cart, all competing for attention before a visitor has browsed a single shelf. This made browsing the site feel like a chore, and we proposed cutting it down to a single, clear path: a highlighted primary call-to-action, three purpose-driven homepage sections instead of nine, and a simplified nav bar with a cleaner wordmark treatment, so the logo and primary navigation read clearly.

Less clutter, one clear call to action, and key content first: a calmer homepage that reads as deliberate rather than crowded.

Outcome & Impact

A high-fidelity prototype, ready to walk through.

The project’s deliverable was a complete high-fidelity prototype: homepage, book detail, cart and checkout, and a full responsive design system, presented to the class alongside the underlying research. There’s no live traffic or sales data to report, since this was a five-week course project. What follows is how the final design answers the four goals we set out with.

Bring the in-store experience online. Digital shelf talkers carry staff curation into the browsing experience. Genre-first navigation mirrors how people already move through the physical shelves.

Improve responsiveness. Every screen was built to be fully responsive, matching how people actually returned to the site: checking things in-store, then coming back later to search or check events from home.

Simplify navigation and usability. The homepage went from nine flat, loosely-labeled sections to three purpose-driven ones. The nav bar was tightened, and genre replaced a mixed, content-type-based structure as the primary way to browse books.

9 → 3

Homepage sections, before and after

Increase customer engagement. Reduced density and clearer structure turn browsing back into discovery. That’s the same experience that keeps people coming back to the physical store.

One response from our survey captured what we were designing toward better than any research finding could:

“There’s more emphasis on events and staff input than I’ve seen with other bookstores.”

Reflection

Design work inside real constraints taught me more than a blank slate would have.

Literati’s brand system, its palette, typography, and handwritten-note aesthetic, was already established. Working inside it clarified what design work actually looks like outside a classroom: most of it happens inside constraints like this, an established identity, a team’s prior decisions, a business whose customers already expect consistency. Solving real usability problems while protecting what already made Literati feel like Literati was the closest this project came to real practice.

My neuroscience background gave me a useful lens throughout the research, too. A lot of the decisions we made trace back to well-established psychology principles: recognition over recall, cognitive load, chunking information into digestible groups. Having studied the actual mechanisms behind those principles, beyond the design heuristics built on top of them, changed how I evaluated our findings. When the survey data pointed toward reducing homepage density or building recognition cues into shelf-talker cards, I understood why those patterns hold up cognitively, beyond recognizing them as good UX practice, which made it easier to defend the reasoning behind each decision.

I also learned a lot from my design partner. Watching how she thought through layout and hierarchy decisions shaped how I approached the check out restructuring, which I led independently from research through execution.

If I did this again, I’d want to test the genre-first navigation directly with real usage data. Right now, it rests on an inference from in-store behavior, something we never tested against actual website use.