Bringing an Independent Bookstore’s In-Person Warmth Online
Literati Bookstore Redesign
Role
UX Researcher & Designer
Team
One of two
Client
Literati Bookstore
Timeline
January – March 2026
Methods
Survey, n=14
Competitive analysis, 7 sites
Secondary research
Deliverables
Information architecture
Responsive design
High-fidelity prototype
In short
I led the research behind a website redesign meant to bring an independent bookstore’s in-person discovery online.
Of 14 people we surveyed, 13 had visited Literati and one had used its website. The brief called for design only; I led research beyond it. Shoppers remembered the handwritten shelf talkers, browsed by genre, and found the homepage overwhelming. We split the design evenly and delivered a responsive prototype with digital shelf talkers, genre-first navigation, and a homepage cut from nine sections to three.
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, handwritten shelf talkers, curated displays, and a space designed for browsing.
None of that comes through on the website.
13 of 14
survey respondents 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.
For a bookstore whose identity is built entirely on in-person discovery, a website almost no one used 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.
Seven bookstore sites scored across home page and product page criteria. Click or tap to enlarge.
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.
Constraints
Five weeks, and a brand identity we couldn’t touch.
01
Timeline. This was a five-week course project. Every research method, design decision, and screen had to fit inside that window.
02
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.
03
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.
04
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.
All four were shared decisions: ideation and execution split evenly between us.
Responds to finding F2
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 on.
The site adapts across desktop, tablet and mobile, so browsing, buying and finding store information all hold up on any screen.
Responds to finding F4
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 organization makes browsing more intuitive and gives exploratory discovery somewhere to start.
Responds to finding F1
Digital shelf talkers. Handwritten 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 handwritten shelf talkers become digital recommendations, carrying Literati’s curated identity onto the site.
Responds to finding F3
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 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. This is the goal we could not answer. Reduced density and genre-first browsing are grounded in what people told us about how they use the store, but engagement is a behavioral outcome, and behavior is the one thing a five-week project with no live site and no usability testing cannot measure. If this went further, the test would be time on the book-detail page and whether shelf-talker cards get read before a purchase.
“There’s more emphasis on events and staff input than I’ve seen with other bookstores.”
Survey respondent
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.
I also learned a lot from my design partner. Watching how she thought through layout and hierarchy decisions shaped how I approached the checkout 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.
Appendix
The deck and the working file behind this case study.
Figma deck
The slide deck behind this case study: research findings, the four design decisions, and walkthroughs of the redesigned screens.
View the presentation
Figma file
The working file: the component library, the high-fidelity screens, and the prototype the deck walks through.
Open the Figma file