top of page
Logo Orange.png
BookBarn background image.png

BookBarn
Case Study

THE OVERVIEW

Project Timeline

3 weeks

My Role

UX Researcher & UX Designer

Company

BookBarn

Task

Website redesign & e-commerce experience implementation

INTRODUCTION

BookBarn is a truly unique used book store in Niantic, CT. The business started in 1988 as a small shop with three bookcases, 800 books, and a yard sale couch. 
Today BookBarn has grown into three stores, a great collection of over 500,000 of gently used books, to which they are adding every day.

BookBarn is not just a bookstore that you go to to buy a book and leave, it is a wonderful place with gardens to wander in, a place where you can enjoy complimentary coffee & snacks over a good book, spot cats and other animals that live on the property and a friendly team that is ready to help you find your perfect read.

RESEARCH

Existing Website

BookBarn's website does not offer an e-commerce experience, and as a result is losing a good part of their potential customers, especially in times of global pandemic. Also, the store's current website does not fully showcase its unique offline experience. It is quite hard to find full information about the store. Navigation on the website is confusing and information about the store is located on several different pages. Here are two main problems that will be solved in this case study:

1

Currently there is no way to shop at BookBarn online

2

It’s hard to find all of the information about the store, it is lost on many different pages

BookBarn_Current Website Screenshot.png

User Persona

As a part of the brief, I was given an existing user persona. Because of the store's fun concept and uniqueness, a lot of people come there not only for books but also the atmosphere. One of BookBarn's primary target users is an Insta Influencer. This type of customer is especially interested in finding new exciting looking places to visit to create content for social media and share the interesting experience with their audience. Insta Influencers are also very tech-savvy and expect their online experiences to be fast, intuitive, and seamless.

User Persona.png

Competitive Analysis

To discover what the book store industry is doing today I did the competitive analysis. I looked at big companies such as Barnes & Noble and Audible, and smaller book stores with e-commerce websites such as Thrift Books, More Than Words, and Powell's. Even though Audible is not a direct competitor as it only sells audio books, it was helpful to look at it as it has really good navigation and product layout.

Big companies

Big Competitors.png

Smaller businesses selling books online

Smaller competitors.png

Comparative Analysis

For comparative analysis a looked at big brands with seamless e-commerce experiences such as Target, Nordstrom, Uniqlo, and Madewell. I went over the checkout process on each of the four websites and noticed that Nordstrom and Uniqlo have offered the most intuitive experience there. Also, all four websites have a very clean presentation of the products.

Comparative Analysis Logo.png

While looking at Target's website I noticed that the store offers a pick-up option within 2-4 hours after customer places their order. After the order is placed customer receives an email about availability of the items they ordered. This process is organized really nicely, but it has two disadvantages: customer has to pay for the order before it's confirmed and has to manually cancel the order if it is unavailable.

Confirmation feature is really useful for any stores that sell used/vintage limited items. Having a time window to confirm customer's order helps avoid the situation when someone ordered an item online and it has been sold in the offline store 5 minutes earlier, but the website has'n been updated yet. But, to make customers' experience better it would be helpful to still ask users for their payment information, but only charge them after their order is confirmed.

Card Sorting

To design effective and intuitive navigation for BookBarn e-commerce part of the website I did card sorting with 8 participants. Participants were given digital cards with a variety of products sold at the store and the task to sort those cards in groups that make sense to the participants.

Here are my key takeaways from the card sorting:

100% green.png

Defined two main categories for the products: Books & Not books (Gifts/Stationery/Miscellaneous)

50%.png

50% sorted books into fiction/non-fiction, and other categories within and outside those two
50% sorted books into more specific categories without dividing into fiction/non-fiction

100% mustard.png

Grouped books by genre

After analyzing the card sorting results I decided to divide all products into 'Books' and 'Gifts & Stationery' and then break navigation into more specific categories inside two bigger groups. In order to simplify navigation inside of the 'Books' category, I did not divide books into fiction/non-fiction but went straight into more specific genres.

RESEARCH

Site map

To implement e-commerce experience and reorganize information about the store on the website I had redesign and simplify the existing structure. On this stage of the project I designed a new site map of the future project to visually present its informational architecture.

BookBarn_Site Map.png

User Flow: Buying A Book

As one of the goals of the project was to add e-commerce experience to the website, the process of browsing books and other products, adding them to cart and checking out was the main flow I needed to work on. To think this process through and make it simple and logical I created a user flow for buying a book to rely on it during my next steps.

BookBarn_Userflow - Buying a Book.png

Sketches

I started the design process by sketching the main screens I needed to create for the redesigned website.

BookBarn_Sketch 1.jpeg
BookBarn_Sketch 2.jpeg

DESIGN & SOLUTION

Goal 1: Implement and introduce e-commerce website to the users and make experience of buying used books online easy and intuitive

To make the BookBarn website easy to navigate, I created the top menu as a part of the header that remains on the screen at all times. New homepage highlights promotions, deals and news the store wants to share with its customers with the rotating banner right below the header. On the same page users can find suggested categories to browse.

1.Homepage_Mid-Fi.png
1.Homepage_Hi-Fi.png

On the ‘Shop’ page users can choose between two main categories - ‘Books’ and ‘Gifts & Stationery’ that helps make navigation for each of those pages less cluttered and easier to use. Main navigation through the products is on the left side of the page, it gives users an ability to filter books by genre, lists and recommendations, price, format, condition and language. Left bar menu and breadcrumbs on top of the page and the top menu indicate where on the site the user currently is.

2.Shop-Books-Classics_Mid-Fi.png
2.png

Used book stores at times have a certain book available in different formats and conditions. On the product page, I displayed available options in a way that users are able to view and compare books right away.

3.Book Page-Hardback-Very Good_Mid-Fi.png
3.png

One of the things I learned after reading reviews on websites of the stores that sell used books is that a lot of users complain about a book being available when they were completing the order, but then receiving a notification of the same book being out of stock. Small stores have a risk of running into this problem, especially stores like BookBard that might only have one copy of the book available. To solve this problem on the step of choosing delivery method I added a note to let the customer know that the store will confirm the availability of the product within 2 hours, and only after that the user will be charged for it.

4.Checkout-Shipping Info_Mid-Fi.png
4.Checkout-Shipping Info_Hi-Fi.png

Goal 2: Highlight the offline store on the website and showcase it’s uniqueness

BookBarn looks truly unique and during my research, I explored their social media. I found out that people who visited the store are actually already promoting it on Instagram by posting pictures of their visit and tagging the store’s account on them. There is no better way to show your potential customers how great your business is than through the eyes of your existing clients. When people are doing it for the business already for free just because they really like it, it only means one thing - you should use it and encourage them to do it more. 

As a way to do so, I created an Instagram gallery on the homepage with the pictures of the store posted by customers, and the users are tagged on their pictures. By featuring content created by customers on the homepage, the store can motivate visitors to post about the store on social media for a chance for their content to be placed on the company's website.

5.Homepage Full_Mid-Fi.png
5.Homepage Full_Hi-Fi.png

Used book stores at times have a certain book available in different formats and conditions. On the product page, I displayed available options in a way that users are able to view and compare books right away.

6.About Us_Mid-Fi.png
6.About Us_Hi-Fi.png
email (2).png
linkedin (1).png
bottom of page