Anarchist UI:

Re-designing Left Bank Books for Consistency and Style

Duration:

2 week sprint

Project Type:

Concept

Team:

Solo Project

My Roles:

User Flows
Visual Design
Interaction Design
Usability Testing
High-fidelity prototyping

Left Bank Books’ Goal

Left Bank Books is an anarchist collective located in Pike Place Market in Seattle, Washington that focuses on educating the populace about anarchist, communist, and other “radical” ideologies. Left Bank Books was facing a decrease in sales because they were forced to close their storefront due to COVID-19 restrictions. All their sales had to shift to their web site, and people were bouncing from the site before completing purchases.

Problem: Difficult Browsing

Left Bank Books’ primary customer persona was a spontaneous buyer who likes to browse, becomes emotionally attached to products, and quickly purchases after finding product they like. Left Bank Books’ web site lacked consistency and standards, making it exceptionally difficult to browse, so they primary customer type was unable to find products to which they could become attached (and then purchase).

Solution: Make it Exciting!

I aimed to improve the browsing experience with better information architecture, delightful interactions, and a “cutty” but aesthetic UI style:

Information Architecture

Delightful Interactions

Aesthetic UI

Research

What’s out there?

I looked at prominent bookstores ranging from local chains, such as Copperfield’s Books in the San Francisco Bay Area and Powell’s Books In Portland, to major retailers such as Half Price Books and Barnes & Noble to understand what users will expect from a bookstore website.

The big takeaways were that Left Bank Books needs to:

create a messaging feature in their work dashboard
allow clients to upload references during purchasing
streamline the designer’s process for creating a custom plan
decrease the amount of forced negotiation during transactions

Who is the Customer?

The Spontaneous Selector

Traits:

Becomes attached to a product quickly
After becoming attached to a product, wants to purchase it immediately
Loves chance discoveries
Purchasing not influenced by trends or popularity
Purchasing not influenced by discounts

Needs:

Easy browsing
Excitement from the web site (UI)
Fast checkout

Design

Poorly Organized Navigation

Left Bank Books’ site navigation made it extremely difficult for the Spontaneous Selector to browse and discover products that they would enjoy.

The issues to note are:

False indication of your location in the site: the “store” box is always marked red, even when the user is in a different section of the site.
Lacks consistency and standards: users do not expect the navigation to be in blocks, but rather in a single row at the top of the page.
Extremely space-consuming: the navigation & header of the site takes up almost an entire page, yet offers little valuable information to the customer.
Navigation options don’t match the customer’s mental model: the navigation by book category does not match users’ expectations and includes several categories that do not even contain books.

Improved Navigation

I used the results of the card sort to re-organize the navigation, improving the ease of browsing and the overall look and feel of the store:

Improved navigation and categories: book categories match users’ mental model using data gathered in the card sort.
Consistent and standardized: browsing methods, including global navigation and homepage browsing area conform to industry standards from other bookstores across the web.
Space-efficient: the global navigation only takes up a fraction of the screen.

Making Browsing Exciting