McNally Jackson Redesign

Bringing the communal, in-store browsing experience online for indie bookstore customers during COVID-19
Timeline
Jan – Feb 2021
(2 months)
Role
UX / UI Designer
(Solo)
Tools
Figma
OptimalSort
What I did
User Research
IA + Interaction
Prototyping
UI + Visual Design
The Problem →

During COVID-19, indie bookstores struggled to adapt their communal, in-person offerings to an online marketplace.

Indie bookstores operate on precarious margins. While e-commerce giants (i.e. Amazon) provide unmatched convenience rates, indie bookstores offer an in-person, communal experience that mass retailers and algorithms struggle to replicate. Also known as third places, indie bookstores provide avenues for readers to convene together.

McNally Jackson is an indie bookstore in NYC. They are known for their attentive staff, thoughtful book curations, and commitment to enriching the NYC literary scene. Like other local businesses, McNally Jackson was unprepared to go fully online.

Before COVID-19, McNally Jackson had little reason (and bandwidth) to invest in a modern website. So when COVID-19 caused sales to plummet “below 50%,” McNally Jackson scrambled to convert their in-person offerings to serve an online-only audience, vanishing amongst the saturated e-market. (The NY Times)
The Solution →

A website that is user-friendly, retains their loyal, in-person customers, and conveys their distinct curation and charm.

As a local, longtime customer of McNally Jackson, I wanted to help. My research revealed that there was a mismatch between McNally Jackson’s in-store experience and the online store.

To match customer expectations of McNally Jackson’s store, I redesigned their website to improve its usability and navigation and audited their information architecture. I also refreshed their branding to convey McNally Jackson’s character.
Disclaimer❗ I am not affiliated with McNally Jackson. This was an academic project (aka unsolicited redesign) borne out of my passion for the bookstore. Thus, this project is limited by lack of access to McNally Jackson’s internal data, business goals, and success metrics.
Heuristic Evaluation →

The current website is difficult to navigate and fails to communicate McNally Jackson's thoughtful staff curation and customized services.

Screenshots of McNally Jackson's current website, alongside annotations that call-out the website's usability issues
Key pages from the current website
USER INTERVIEWS →

“It’s just a satisfying experience to visit a bookstore and thumb through the pages and see if it’s recommended by staff. It’s just a good feeling.”

To understand McNally Jackson’s values and what the design should communicate, I spoke with real customers who had shopped at McNally Jackson within the past year and frequently shopped at indie bookstores.

My user interviews revealed these key insights:
The Opportunity →

How might we transform McNally Jackson’s website to replicate its in-store experience and showcase book curations that customers will browse and linger for?

In order to encourage customer browsing, I honed in on three design objectives:
Ideation →

Brainstorming and feature prioritization

While I brainstormed some quirky, interesting ideas (a book exchange program!), it didn't make sense to add brand new features when customers valued the offerings that McNally Jackson already had.

Some features I prioritized:

  • A long-form homepage to allow customers to scroll and organically discover books and store offerings
  • Open-book collection catalogs with scannable book covers to increase reading interest
  • An event calendar sidebar that showcased upcoming virtual events and community activity (i.e. book club gatherings)
  • A book availability dropdown reminiscent of e-libraries to showcase in-store book availability across store locations
  • A service bar to highlight previously hidden staff services like “Ask a Bookseller” – had anyone known it existed?
Early explorational sketches
Information Architecture →

Overhauling navigation to match customer expectations

To build an intuitive website framework, I conducted an open card-sorting exercise to understand how customers categorized my prioritized features and McNally Jacksons’ existing services. 

Based on my card-sorting results, I created a sitemap. Some notable changes in the navigation:
  • Added an explicit “Browse” navigation tab, including “By Subject” and “By Collection”
  • Grouped together staff-related services (i.e. Staff Picks, Ask a Bookseller)
  • Created an “About & Services” tab, as customers grouped generalized store services (i.e. Reader Reward Program) with store information 
The sitemap that guided the redesign
Interaction Design →

Pinpointing key user flows in mid-fidelity

To ensure that customers could not only browse, but also purchase a book, I chose to design the entire user journey, from browsing to product availability to check-out. 
Mid-fidelity wireflows that guided usability testing
Prototyping & USER Testing →

Testing the prototype with real customers

Most friction existed when customers were browsing for books. While they successfully gravitated towards the new “Browse” navigation tab, they found the labels “Collections” and “Subjects” vague, preferring clearer labels such as “Curations” and “Genres”. 

Curiously, my assumption that customers wanted a rougher brand was wrong. Despite their dislike of Amazon and corporate retail, customers still expected to see somewhat Amazon-esque patterns. This fell in line with the younger customer group I was designing for.

Some high-level improvements:
Mid-fidelity prototype revisions
Branding & UI →

Modernizing the “newspaper” layout

The original website has a newspaper-inspired design. I wanted to stay true to its grassroots feel, while adding a modern twist. 
An abridged brand kit
Since McNally Jackson's logo was already very recognizable, I only replaced the logo’s serif subtext with a san-serif to improve legibility. I also created a simple monogram to use at smaller sizes, which could also be used for branding purposes.
A few illustrations that I drew
I sourced an illustration kit from Icons8, but it didn't have all the necessary graphics for my design. To fill in the gaps (and for a bit of extra fun!), I drew a few of my own matching illustrations!
The Final Solution →

Introducing McNally Jackson's redesigned website

1. Longform Home Page

The home page encourages exploratory browsing, providing a comprehensive overview of McNally's offerings (i.e. the added service bar). Like scanning book spines in-store, I showcased individual book covers. Therefore, as the customer scrolls down, they can preview specific books within each collection.

2. Centralized Search

The reconfigured navigation features an expanded, centralized search bar. Customers need easy access to search throughout the site, without it being hidden in an icon or pushed to the side (as it was in the original website).

3. Upcoming Events Sidebar

Customers can view upcoming events from the homepage. I bucketed them in a neutral gray container to differentiate it and improve scannability. Customers can also instantly view event details (i.e. date, weekday, time, whether it was virtual).

4. Collection Pages

Explains curation rationale and features mini-blurbs and availability to provide quick product snapshots. At this level, direct options to "Add to Bag" or "Wishlist" mirror how customers tentatively pick-up and consider books in-store. If the books don’t spark interest, I added a "More Genres" section as an alternate browsing path.

5. Book Product Page

Inspired by e-libraries, I added a dropdown that conveys book availability and quantity per store location. I included the book’s section call number to aid in-person shoppers as well. I re-organized editorial reviews to reduce real estate and added mini-author profiles to introduce the authors’ other books.

6. Refined Check-Out Flow

Guides the customer step-by-step through purchase. Delivery and pick-up options are shown first, and the following flow is conditional, dependent on the customer's chosen delivery method. It was important to be upfront with pricing and address info so customers felt confident about their choices.
You can also check out the full prototype below.
Final thoughts →

What comes next?

Phew! This was my first UX redesign project, and it was rewarding to bring one of my favorite bookstores to life. While project deadlines were strict, it gave me an excuse to squeeze in a visit.

If I had more time, I would:
  • User test the high-fidelity designs —  if implemented, I would track the time customers spent browsing the website and how often it led to a purchase.
  • Explore entry points such as the virtual events flow. How might I add access points for book discovery and keep customers engaged with the store's day-to-day offerings?
  • Add details to highlight the staff! For example, adding notes alongside staff picks could add an enriching narrative to the website.

What I learned –

⏳ Time constraints & trade-offs

As designers, we want to fine-tune our pixels (sometimes to an unhealthy amount). Testing in mid-fidelity taught me that it’s okay to work with rough sketches in a rapid, deadline-focused environment. Trade-offs are important!

🧩 Visual design is a balancing act

How might I modernize a traditional, compact newspaper? It felt in bad-taste to use sleek, neumorphic UI, as customers’ fierce loyalty was due to McNally’s down-to-earth nature. I spent hours researching modern magazines (i.e. Politico, The New Yorker, Granta). After making countless card iterations, more than ever, I learned how grouping and visual hierarchy organizes the most cluttered of content.

⚙️ Prioritizing UX over visuals

Don’t get too attached to an idea! I originally wanted to imitate a newspaper-inspired layout by centering McNally Jackson’s logo in bold, impactful type (like this). However, McNally Jackson's search bar took precedence over visual direction.

Selected Work

You can find more of my work below.

Case Study →

Letterboxd: Film Club

Internship →

Discovery, Inc.