boswell book company

Bringing an independent bookseller’s eclectic in-store experience online.

BACKGROUND AND PROBLEM

A pandemic and big box retailers prevail

For 12 years, Boswell Book Company has been delighting its customers, providing a little something for everyone. Its history dates farther back to a defunct bookseller, Henry W. Schwartz, beginning in 1927. With its long-rooted literary pedigree and historical connection to the neighborhood, Boswell has become a staple in the neighborhood and the city of Milwaukee.

As the COVID-19 pandemic puts a strain on physical book sales and big box retailers prevail, Boswell lacks with its outdated website. They want to expand their online sales and promote the various author events they host.

Scope: Responsive website design
Type: Speculative work
Role: UX Researcher, UX/UI Designer
Project Duration: 4 weeks (80 hours)
Tools: Figma, FigJam, Otter.ai, Whimsical

Link to Full Project Brief here.

How might we bring the unique physical in-store experience into an online environment?

SOLUTION

A responsive website redesign that optimizes the search and checkout flow to encourage online orders, explore the bookstore’s events and improve ease of navigation throughout the site.

EmpathizeDefineIdeatePrototype & TestWrap-up

1. EMPATHIZE

MARKET RESEARCH

Reading up on the book industry

Link to Full Research Plan here.

I began with getting up to speed on the book market space and analyzing competitor sites to determine what might sway a potential customer to a big box retailer (i.e. Amazon, Barnes & Noble), and also what key patterns are necessary in order to facilitate the ease of navigation and increase overall usability to the existing website. As Boswell Books continues to compete with the likes of Amazon, it was important to establish the value proposition they are offering in order to differentiate the business and encourage supporting the independent bookseller.

20%

of bookstores across the U.S. are in danger of closing due to the pandemic

123%

The ecommerce conversion rate is 123% higher than in 2019

0

Book shopping online builds no memories of the store's unique texture

Boswell has an opportunity as a local business to strengthen its online presence, particularly their online ordering and events promotion to maximize profits and increase event registrants.

Link to Full Secondary Research here.

COMPETITIVE ANALYSIS

Studying the competition

As an independent bookseller in Milwaukee, there’s not much for direct competition. The unfair competition is Amazon. In any case, I took a look at some well-known bookstores in the United States, taking note of a typical book checkout flow.

Competitive analysis

See full Competitive Analysis→

KEY TAKEAWAYS

1

Categories in navigation vary across stores, likely based on key audiences’ needs, mental models and unique categories included in store

2

Utilize strong hierarchy and streamlined checkout process to make purchasing a book seamless with zero frustration

3

Community feeling of being in a bookstore isn’t replicated in the digital space – there's an opportunity to explore this more

HEURISTIC ANALYSIS

Examining the current state of Boswell’s website

Link to Full Heuristic Analysis here.

I also conducted a heuristic evaluation of the current website’s usability. While the current website is outdated in its design, requiring a complete overhaul, it was still helpful to uncover glaring usability issues to correct in the redesign.

Heuristic evaluation

USER INTERVIEWS

Hearing from Boswell's bibliophiles

Link to Full Research Debrief here.

I conducted interviews with 5 participants who have visited Boswell Book Company to uncover what the online ordering as well as in in-store experience is currently like for them. Since Boswell already has an existing website, the interviews were meant to identify existing pain points in order to optimize the Boswell experience, and eliminate any barriers that users face when ordering books and registering for events.

Book icon

01.
When purchasing books in-person, all participants (5/5) preferred it for exploring and browsing without any specific book(s) in mind. However, when purchasing books online, users are typically searching for a specific book and want the process to be as smooth and quick as possible, with some curation.

Book icon

02.
All participants (5/5) spoke of Boswell and the physical store fondly–they appreciate the unique and welcoming atmosphere, staff recommendation cards, the selection (even with gifts, merch) and the feeling of warmth and welcome when they’re there. They all feel the current website doesn’t match these elements and could be better integrated somehow.

Book icon

03.
During the interview questions and usability tests of the current website, most users expressed confusion in the site architecture and hierarchy. 3 participants had a hard time locating the search bar. 2 participants got lost trying to locate a book via browsing categories.

“The current website feels like it’s stuck in the 90s.”

“The staff recommendations are the best part of visiting the store!”

“I like the way independent bookstores display books.”

What do users need?

01. Enhanced search
With the goal of shopping for a book online to find a specific book, the search function needs to be built out further. There is currently no filter function within searching.
02. Optimized ordering
Simple checkout process for ease of ordering.
03. Brand consistencyBring the warm, cozy and inviting feel of the store to the site, but also modernize the look with better usability overall.

What frustrates users?

01. Content and information organization
Overload of information with no clear hierarchy resulted in user error.
02. Outdated aesthetic
Mistrusts website with outdated designs because they’re unsure if order will go through
03. Poor navigation
The current navigation menu and lack of breadcrumbs resulted in confusion from users.

KEY TAKEAWAY

100% of users buy books online when they have a specific book in mind versus browsing, which is preferred in-store.

When designing the experience for users, Boswell’s website can be mindful of the user’s motivation when ordering books by aiming to make the process as clear and efficient as possible, complementing the in-store experience.

By using this as a guideline for design decisions, Boswell can increase online sales as users who have positive experience are more likely to return to order books again.

2. DEFINE

USER PERSONA

Personifying the Boswellian

In order to keep focus on the bibliophiles that frequent Boswell both in-store and online, I created a persona to easily visualize Boswell’s customers and how they may feel during the book order process. The persona’s needs were kept in mind when ideating solutions for the website. Meet Carter!

User Persona

SITEMAP & CARD SORTING

Finding my way through the digital shelves

After identifying who my user is and what their needs are, it was time to address the current navigation of the website. To get a better idea of how users would organize the information architecture, I did a hybrid card sort exercise using some pre-existing menu items and some new items added. Along with prioritizing ease of use for users, keeping navigation simple will allow Boswell to expand online sales and prompt a more positive experience than what is currently being used.

Sitemap

See full sitemap→

TASK FLOWS & USER FLOW

Letting the words on the page flow

Using the sitemap as a reference, I created task flows for the two main tasks users might use the website for, buying books and registering for events.

The user flow was then created to show the possible journeys users would take when navigating the website. While events are important to the business, I focused my efforts more on the online ordering process as it’s assumed as the primary user task.

See full task flows→

See full user flow →

3. IDEATE

SKETCHES & MID-FIDELITY WIREFRAMES

From manuscript to published look

With a sense of how the user would navigate throughout the website, I sketched out some ideas for the series of screens, keeping in mind simplicity to decrease cognitive load for the user. Bringing the paper sketches onto Figma, I recreated them at a mid-fidelity level, keeping it basic to get an idea of the layout without user interface design added.

Wireframe Sketches

See all wireframe sketches→

BRAND IDENTITY

A brand for the bookworms

With no clear brand presence on the website, I conducted an exploration into how to improve the branding in order to ensure that Boswell’s message was clearly coming across to users, especially in regard to how it complements their value proposition.

Before going further, I performed a brand strategy exercise, outlining the elements that make up the brand (Brand Heart, Brand Essence and Brand Voice) to build a good baseline for the accompanying visual elements.

When users think of the brand, I want to evoke an ethos of cozy, intellectual, curious, quirky, inviting and eclectic. As a business rooted in history, I wanted to honor the past while bringing forth modernity in the brand elements.

This ethos came about during my user interviews when I asked them to describe Boswell’s personality. The answers were unique and revealing:

Moodboard
Moodboard
Logo Sketches & Rough Concepts
Logo sketches
Digital logo concepts
Digital Logo Concepts
Digital Logo Sketches
UI Kit
UI Kit

See full UI Kit→

HIGH-FIDELITY WIREFRAMES & USER INTERFACE DESIGN

Fulfilling the order

The high-fidelity was finally ready to go, keeping in mind Carter (our user persona) in order to achieve user goals. What resulted was an updated look for Boswell Book Company that more closely followed design and usability principles while also bringing the physical store experience into the digital space. See the before and after comparison as well as page through high-fidelity wireframes.

Before Homepage screenAfter homepage screen

See all high-fidelity wireframes →

4. PROTOTYPE + TEST

HIGH-FIDELITY PROTOTYPE & USABILITY TESTING

Testing 1, 2, 3

Link to Full Usability Test Plan here.

To test these designs, I created a high fidelity prototype using Figma and conducted usability tests using Maze. I tested the ordering task as well as locating a specific event. 7 participants participated in this test.

Test Objectives

PRIORITY REVISIONS

Catching errors and making amends

After I conducted my usability testing, I compiled insights into an affinity map to distinguish points of confusion and successes of the designs to better understand what revisions are needed.

KEY TAKEAWAYS

noted inconsistencies with the product listing page views and spacing feeling tight.

Revision: Increased spacing and made the grid and list views more consistent.

found the hierarchy confusing on the product detail page with sections below the scroll.

Revision: Added average review ratings below the book title for quick reading.

users struggled to navigate through the checkout process screens.

Revision: – Made the guest checkout and create account selections into buttons
– Added information input and reduced number buttons to click

BEFORE
Before Search Results Page List View High Fidelity Wireframe
AFTER
After Search Results Page List View High Fidelity Wireframe

Consistent spacing between views

I added more spacing between the filter section and product cards to stay consistent with the grid view, another view you can toggle between. Also added more spacing in between product cards.

BEFORE
Before Product Detail Page High Fidelity Wireframe
AFTER
After Product Detail Page High Fidelity Wireframe

“Other versions” tooltip addition

With confusion on what other versions are available, adding a hover tooltip provided a concise solution instead of listing out every single format/version.

Average review rating addition

For ease of skimming the page, I added an average review rating to help persuade users to buy the book.

“Read more” button placement change

I moved the collapse and expand button to the bottom of each section as it made more logical sense as would users reading a section and wanting read more.

BEFORE
Before Pre-checkout Modal High Fidelity Wireframe
AFTER
After Pre-checkout Modal High Fidelity Wireframe

Create account/checkout as guest prompts

For clearer CTAs, I made both prompts into buttons since the radio buttons were confused as bullet points or non-clickable elements.

BEFORE
Before Checkout Page High Fidelity Wireframe
AFTER
After Checkout Page High Fidelity Wireframe
ACTIVE FIELDS
Active fields active Checkout Page High Fidelity Wireframe

Buttons removed

I removed the buttons through the checkout process to reduce the number of clicks. Once a section is complete, user can scroll or it will autoscroll to the next section for you.

Form field labels

When users begin to type in the fields, the labels will appear above so they can remember what information they’re providing.

5. WRAP-UP

A new chapter

Homepage

As the first point users see when visiting the website, the homepage is crucial for making a positive first impression and gaining users’ trust.

Search results

With such an excess of information for each book, it was imperative to provide two different views.

STAFF RECOMMENDATIONS

Bringing the iconic in-store cards online in a more visual manner.

ALL INFO PRESENT ON HOMEPAGE

Placing all key information on the homepage minimizes any excessive navigation for users.

NEW & NOTEWORTHY

The wooden bookshelf design element mimics the store’s bookshelves and makes this section stand out

Product detail

Showing the most important product details to help make buying decisions.

GRID VIEW

For a paired down view of the results, a grid view minimizes the cognitive load on this screen and allows users to browse through results quicker.

LIST VIEW

For the users wanting more information at this level, a list view provides some additional product information.

COLLAPSIBLE DETAIL SECTIONS

Collapsible product information with previews.

CONSOLIDATION OF FORMATS

Consolidated formats of books with availability shown. The current website has separate product pages for various formats being sold.

FEATURED REVIEWS & STAFF RECOMMENDATIONS

Highlighted customer reviews and staff recommendations to help users make buying decisions

SIMPLIFIED LAYOUT & DESIGN

One page design with the necessary information present with one click to confirm the order with a final order confirmation screen

Checkout

As the last step that users go through before finalizing the order, the checkout page was designed with an emphasis on simplifying the information input process.

SO, WHAT'S NEXT?

Although this was a conceptual project using their website as an example, I would like to pitch this to the business to gauge if there’s any interest in working together to redesign their website. This would allow me to potentially partner with a developer to build the website and make an impact for a business I love to support.

What did I learn?

01. USER INTERPRETATION CAN MAKE OR BREAK TESTING

There’s an art to interacting with users, be it for research or testing. If you give them too much direction, the result is biased. But if you don’t provide enough clarity, you won’t get any useful data to use. Setting yourself up for success and preparing what you want to gain from these sessions is key.

02. THE IMPORTANCE OF BRANDING

I was genuinely surprised that aside from a logo, there really wasn’t any brand presence on their website (and quite frankly, in the store, too). However, this presented a unique challenge to create a brand from scratch  that I felt complemented the value proposition and the store’s personality.

03. ASSUMING BUSINESS DECISIONS

Since this was a conceptual project without any stakeholder involvement from the business, I did have to assume business goals and the value proposition to help make certain design decisions. If a stakeholder was involved, there would be more accurate goals to work off, but I did keep it general to increase sales and event attendees.

THANKS FOR READING!

Take a look at my other case studies. 👀