Bookstore E-Commerce for the Busy Buyer

Overhauling City Lights Books' information architecture to streamline online purchases.

At a Glance

2 weeks
Solo concept project

Methods Used

Competitive Analysis
Open Card-Sort
Sitemap
User Flow Diagram
Prototyping (Whimsical, Sketch, Invision)

Project Overview

A literary landmark of alternative culture, City Lights Books was founded during the Beat Generation in 1953. The bookstore takes pride in their unique identity and ambience that draws in tourists from all around the world. In spite of their popularity as a brick-and-mortar bookstore in the SF Bay Area even during the 21st century, City Lights’ online presence needs an update, especially to address the needs of the busy buyer target user. 

The busy buyer is someone who multitasks while they shop and could easily be distracted from and/or drop the task if there is too much information or if the task is taking too long. 

My challenge was to redesign the City Lights website so that the busy buyer can efficiently find and act upon information, specifically to purchase a book online, find an event, and find directions to the store. I had two weeks to deliver a mid-fidelity prototype that demonstrates these user flows.

The Research

Competitive Analysis

I looked to competitor bookstores—indie bookstores in San Francisco and in the United States—for research and design inspiration. I specifically looked at navigation, the online purchase experience, and event lists, among other things.

My main findings were as follows:

  • While City Lights had both a header menu and a side menu for global & primary navigation, all other bookstores had only a simple header menu.
  • Each bookstore had a different “Add to Cart” experience. While some took the user directly to the cart, others allowed the user to stay on the page & make a choice. One bookstore redirected the user back to the homepage every time something was added to the cart.
  • More websites presented their events as lists, rather than calendars.
  • Only one bookstore allowed the user to add events to the user’s calendar as a downloadable ICS file.

A more abstract observation was that bookstore websites had stronger branding when they had large hero images that showcased their brands. While City Lights touts their unique brand as a bookstore, the website lacks such a hero image, as the two-level header navigation and the embedded podcast player (with a blown-up, cut-off logo of City Lights) are the only things the user sees when they land on the homepage when there is no announcement box. Aside from the 1.5 logos on the landing screen, there was little else that reflected City Lights’ character and values. Below are the landing pages for City Lights and three competitors: Chronicle Books (San Francisco, CA), The Last Bookstore (Los Angeles, CA), and Powell's Books (Portland, OR).

The Current Information Architecture

Next, I needed to know what information was on the City Lights website in order to reorganize the global navigation. I mapped out the site (excluding the genre lists in the secondary navigation) and discovered that there were still many redundant pages under different sections. The site map diagram below is on its side because there are too many pages to view upright.

The current site map diagram for City Lights Books.

Within the checkout process were numerous pages that asked for billing information at various different points. I then proposed a simpler user flow and diagrammed it below the current site’s user flow:

To determine the new global & primary navigation, I put most of the site’s content on sticky notes and had five participants sort them in an open card-sort. The main findings were as follows:

  • There was a lot of information that the user didn’t need, and there was confusion about what City Lights Publishing and City Lights Foundation were.
  • Participants tended to have large groups titled “About” or “Info” that included pages from all over the current website.
  • Participants tended to rank pages about the publishing press, the foundation, and the founder lowest in importance.

The Design Solution

Based on my findings from competitive analysis and the card sort, I created a new site map: 

My proposed site map diagram for City Lights Books.

Peer feedback on early sketches helped me further simplify the checkout process by incorporating express checkout methods, based on the assumption that busy buyers would most likely have digital wallets (such as Paypal, Google Pay, and Apple Pay) that allow for this. I scrapped the City Lights user account function, since digital wallets can also track order history and are more secure, especially since I discovered that City Lights accounts save sensitive information but allow for passwords of just one character. The user flow for online purchases was subsequently updated: 

Once I had a much smoother and simpler flow, I put the wireframes together on InVision and conducted a moderated in-lab usability testing with four participants to determine what else needed to be improved for the busy buyer. I followed a script and provided four scenarios & tasks for participants to complete. For online purchases specifically, I provided two tasks to complete—one in which the user knows what they’re looking for, and another in which the user has an idea of the topic but not the exact title. My main findings from the usability testing were as follows:

  • Participants always opted for search and did not use the sections below the hero image on the home page.
  • Participants found the checkout form too long.
  • In the checkout process, participants found the “Review Billing & Shipping Info” page long/unnecessary.
  • On the Events page, participants did not notice the event type distinctions (between “Bookstore” events and “Author Tour” events).
  • Participants wanted a way to share the events.

Refinement

After the usability testing, I looked into digital wallet integration policies and discovered that a redundant step that caused friction could be deleted. I also shrank and shortened the checkout forms for better grouping and faster completion—onsite checkout was cut down from four to two pages. For the Events page, my original concept was a calendar, but lists proved to be more popular and better received, so I used a UI pattern similar to that of Facebook’s event listings, which are grouped by week then month. Social media share buttons were also added to event pages. The prototype that I presented at the end of the two-week sprint can be explored on InVision here.

Since that prototype was of lower fidelity, I was able to add more visual elements and reduce even more friction for the checkout experience after the two-week sprint ended. The mid-fidelity prototype can be seen below:

Results & Reflections

Given more time, I would tweak the lower priority features based on feedback and observations from the past testing. The Events page could more clearly distinguish between bookstore events and author tour events, perhaps through a two-column format with hero images that illustrate what and where these are held, and the event pages could also have RSVP capabilities for the busy buyer's convenience.

— Jan 2020