The Last Bookstore :
An E-Commerce Website Redesign
Client Background
The Last Bookstore, California’s largest used and new bookstore, opened in 2005 in a downtown loft. It has grown since then to 22,000 square feet, a softly lit labyrinthine collection of books and records, with space for literary, musical, and theatrical events.
Project Overview
Business Challenge
The highest priority has always been given to face-to-face contact with this popular quirky bookstore but to keep up with the times and adapt to the changes forced by the pandemic, The Last Bookstore decided that their online store needs an overhaul. Through an improved e-commerce website, they want to showcase their products while maintaining their brand image: “small shop” appeal and great customer service
“A reader lives a thousand lives before he dies. The man who never reads lives only one.”
— George R. R. Martin
Project Scope
Website redesign
Design Sprint
2 weeks (80 Hours)
My Role
UX Researcher & UX Designer (Research, Visual Design, Interaction Design, Usability Testing)
Platform
Figma, Canva, Google Workspace, Paper App
Key Skills
Qualitative Research, Research Synthesis, Collaboration, Ideation, User Experience Design, Figma, Presentation
Research Methods
Heuristics Evaluation, User Interviews, Market Research, Affinity Mapping, Persona Creation, Design Ideation, Usability Test
Curious Space
What sparked my curiosity in this project is:
The Last Bookstore is California’s largest used and new book store and is truly a Disneyland for book lovers. In their desire for their personality to shine through, their website ended up becoming overwhelming.
So, I thought to myself,
How do I keep the personality of this company alive through my redesign?
Give the users a great experience to give this amazing store justice?
What is it about the wonder of books that draws people in?
How can I translate that into features for this product?
Heuristics Evaluation
Key Takeaways:
Based on this evaluation, I have determined that the current site’s efficiency, learnability, and memorability are the immediate concerns.
It looks like there are 2 websites, an online store, and the actual bookstore.
Global navigation is not intuitive and confusing.
The website looks so cluttered and busy, which poses a huge problem for accessibility as well.
No contextual navigation, which makes the website a challenge to navigate.
There is no autofill on the Search tab.
No option to filter or sort search results.
Market Research
Competitive Analysis: Feature Inventory
Discovery
I discovered that all of these websites had very convenient ways that users can discover books to purchase seamlessly and easy.
Product Page
My main takeaway is that these companies have devised features to mirror the tactile feeling of inspecting the books and reading through them before purchasing just like users would when they’re in an actual store.
Check-Out Process
All these websites had in common is they made the checkout process quick and easy for their users.
Competitive Analysis Key Takeaways:
To get a good gauge of what the industry-standard good practices are, I did a competitive analysis of the best in class of online bookstores. I did my Features Inventory on 3 direct competitor websites, ThriftBooks, Amazon Books, and Barnes and Noble. I divided my findings into discovery, product page, and check-out process.
Comparative Analysis: Feature Inventory
I did my comparative analysis on The RealReal and StockX, two companies that are known for reselling preloved items. I did a feature inventory on these indirect competitors to get a good grasp on industry standards on displaying preloved items.
Key Takeaway:
The main insight that I gathered from the comparative analysis is that these companies wanted to show transparency and establish trust through detailed descriptions and actual pictures of the preloved items.
User Interviews
I wanted to dive deeper into getting to know the users. I wanted to gather data on two things, first, what do the users associate books with and what is it about actual bookstores they find pleasant and unpleasant? By gathering data on these points, I can learn about their needs, goals, behaviors, and pain points.
Overview:
Participants: I gathered 4 interview participants, who love to read books to learn about their relationship with books and their purchasing behavior.
Goals:
Find out the participants’ relationship with books.
How do they decide what book to get and what are the things they consider
Why do they like shopping in bookstores
How do they find the book they want
Expectations and frustrations when going to an actual/ online bookstore
When was the last time they went to an actual bookstore and how was their experience?
Describe the perfect bookstore
“I’m really wild, I did a blind-date-with-a-book where you don’t know what you’re buying, they wrap it up and there’s just a teaser.”
“If there are about 2000 people saying the same thing, it’s probably worth buying.”
“I check on other titles that are similar to what I am looking for or I purchase the author’s other books”
“It plays a factor in my decision-making if other people are reading it too.”
“If I was buying a used book online I would want to see actual pictures, to see the condition the book is in. ”
Affinity Mapping
Through an in-depth synthesis of our user interviews, I got a hefty amount of usable insights. I found that all of our participants expressed the following collective insights which prove to be compelling and useful.
Collective Insight:
“I want to know what other people are reading”
All participants consider popularity an important factor in their decision-making on what book to purchase.
This trend led me to validate the influence of social proof which states that people tend to like what other people like.
Collective Insight:
“I need to know if the book is worth my time”
All participants also think that user reviews and ratings are important factors in their decision making
This finding proves that users lean on other people’s comments to confirm if the purchase will be worthwhile.
Collective Insight:
“I want to know to see the book’s condition before purchasing it”
All participants also expressed that the condition of the books is an important deciding factor when buying used books.
This confirms the users’ need to validate the worth of their purchase, they want to know if they are getting their money’s worth.
Break in the trend…
I based my personas on these last findings. This is where the users had a split of trends in their preference.
Collective Insight:
“I stick to my preference when it comes to book selection”
2 out of 4 participants expressed that they like consistency in their choices, they tend to stick to their preferred genres,
This trend convinced me that these participants find comfort in sticking to what they’re accustomed to.
Collective Insight:
“I like variation and discovering new genres”
The other trend is about the more adventurous users, they like to browse and find books that grab their attention or books that "speak to them".
Surprisingly, this trend is the total opposite of the first one.
2 out of 4 participants expressed that they like variety in their choices and are more open to exploring other genres.
Personas
To help the team focus to ideate user-centric solutions, I created two personas developed from all the data collected from our user research.
User Persona Takeaways:
The most notable difference between the two personas is the way they discover what books to purchase and how they would inspect before purchasing.
Discovery: Particular Patty would go straight to search for the book she wants, while Daring Darla will browse the categories to find the book she wants.
Inspection: Particular Patty will go into the details before purchasing the book, this is where it leads her to her unhappy path because Particular Patty wants to read user comments before purchasing the book which the current site does not have. Daring Darla on the other hand will just skim through the product page details when she finds the book that looks interesting to her and then start the check-out process.
Problem Statement
In order to create effective solutions and clarify what problem I am trying to solve, I formulated this problem statement based on the user’s needs and insights.
Users need to find books that are interesting and worthwhile because the user does not want to waste time and money.
How Might We
Based on the synthesized research, I drafted a “How Might We” Statement to guide me in the ideation of possible solutions for the problem I have formulated.
How might we make the search for interesting books worth the users' time?
Ideation
Based on all the gathered data from my competitive and comparative analysis combined with the user research findings while keeping the user problem and user persona at heart, I drafted some sketches on how I can solve the users’ problem.
To inform my design for the new site map I conducted a series of card sorting activities. I wanted to find out what the users would intuitively group together. I instructed the participants that they can use the cards to label the classifications or they can come up with their own labels.
Overview:
Participants: 6
Kind of Card Sort: Combination of Closed & Open Card Sort
Cards to Sort: Features and information offered by the current website
Information Architecture
Card Sorting Takeaways:
Account Tab
All of the participants grouped cards that seemed to be about one’s account, such as My account, Track Order, Cart, Wishlist, and My Orders in one tab, which led me to the conclusion that the users think that they should find all personal actions and settings in their account tab.
Merch
4 out of 6 users grouped cards that are about merchandise such as Gift cards, T-shirts, Mugs, Totes, and Hoodies under the tab and labeled it as shop/ merch which led me to believe that the users think that all of the merchandise or all other items outside of books should be in one place.
Events
4 out of 6 users put all venue-related items such as Events, Wedding, Film/Photoshoot, Venue rental, and Private events in one tab, this determined that the users think all venue-related venue-related services should be found in one category.
Books
4 out of 6 users grouped all book-related items such as Books, New Books, Used Books, Collectible Books, Coffee, Table Books, New Releases, Bestseller and Book Bundles under one tab labeled as books, this trend identified the logic of the users that all book-related items and categories are best suited to be under one tab.
Site Map
I used the findings from my card sorting to develop a new site map for the web site
I decided to sum up the global navigation into 4 menus, to have these options consistently one click away for the users.
Books - which has all the book categories and genres
Merch - which has all the non-book items for sale
Events - where users will have access to venue related information, like pictures and booking/reservation options
Services - this is where all the services that the bookstores are offering can be found
Account- account-related options are on the global navigation as well, so the users have access to their account at all times.
Footer - the footer has all the information about the company so as not to be intrusive but continually available for the users.
Mid- Fidelity Prototype
Scrollable Landing Page
Fixed Global Navigation - The global navigation will be fixed on top and will have all accessible menus and buttons for the users. The 4 main tabs are Books, Merch, Events, and Services. The users will also have access to the search bar, account page, and their cart on the global navigation.
High Definition Image of The Last Bookstore - the users will be greeted with a high-definition image of the store on the landing page, to provide familiarity with what they know as the "Last Bookstore".
Search Bar with autofill - to make searching for products more efficient, the search bar will have an autofill function and the users will have access to the product details from the search results.
Drop Down Menu - for added efficiency, the users will have access to the different product categories on the drop-down menu on the global navigation.
“Shop Books” button - I designed a shopping button on the landing page so the users can jump-start their task of shopping for books.
Suggested Purchases - when users scroll down they will have access to suggested books like New Releases, Best Sellers and Staff picks to help them find a book to purchase.
Add To Wishlist- the users can add books they like to their wishlist while deciding which books to purchase or save for a later time.
Customer Ratings - an overview of the book details will be shown with customer ratings, so the users know if the book is well-rated by other customers, which can help in the users’ decision-making of which books to purchase.
Quick Add To Cart - for a more efficient check-out process, I designed a “quick add to cart” button.
Product Page
Selected Book Panel - the users’ selection will be reflected on the side panel, so they have the option to review the details before adding them to their cart.
Book Details- details of the book such as title, author, stocks available, and rating will be visible. The users can also choose the format and the condition of the book.
Book Preview - the users can look at a preview of the book, which gives them the feeling of skimming through a book before purchasing it.
Pictures of the book - since The Last Bookstore also sells used books, there will be pictures of the actual books so the users can see the book’s condition before purchasing it.
More Book Details - when they scroll down, they can see the book overview, edition details, and professional reviews, to give the users more details on the product and help them in their decision-making.
Similar Suggestions - to help the users in their search, I designed a section for book recommendations of similar books and books by the same author.
Check-Out Process
Check-Out Options - for a more efficient check-out process, users are given the option to sign in to check or check out as a guest, in the latter part of the check-out process the users also have the option to use the information they provided to create an account.
Feedback and Confirmation- after adding an item to their cart, or submitting their order, a pop-up will give a confirmation of the tasks done.
Mid-Fidelity Prototype Usability Test
A series of usability tests were conducted on the mid-fidelity prototype to test its functionality, intuitiveness of navigation, and ease of task completion,
Overview:
Participants: 3
Tasks:
Find the popular books
Search for a specific book
Find the description of the book
Purchase a book
Browse a similar book from what you have selected.
Key Takeaways:
Scrollable Landing Page - All of the participants did not scroll at the landing page, it was not intuitive for them.
Search Bar Autofill - One of the participants noticed that the gap between the search bar and the drop-down menu is confusing and there is no distinction between what you are searching for and search suggestions.
Feedback On Order - One of the participants thinks that it's also good to mention that a confirmation of the order has been sent to their email.
Order Review - One of the participants mentioned that "editing" their order should be done in the cart, not on the checkout
“There’s no distinction between what I’m
searching for and the search
suggestions.”
“I would like to see is that they also sent an
email confirmation of my order”
“The landing page is
too long.”
“You should be able to edit your order in the cart, not on checkout”
Style Guide
Before designing the high-fidelity prototype, I went back to my user interviews to help me decide on what the vibe of my aesthetics would be, and all of the participants expressed that they like the warmth and familiarity that books and actual bookstores bring.
I also made a word cloud with the insights that the participants used to describe their relationship with books and how they would describe their perfect bookstore to inform my design.
Logo - keeping the existing logo that they used on their e-commerce website, to keep the warm, nostalgic feel.
Font - for an old book aesthetic feel, I decided to use Cormorant and Lato for the typography.
Color Palette- since the users used the words: warm, nostalgic, and fuzzy to describe bookstores, and two of the participants also mentioned that the perfect bookstore would have a cafe in it, I used warm tones for the overall look and palette of the web site.
High Fidelity Prototype Iterations
Based on the usability tests conducted, here are the prototype iterations that I designed based on the findings:
Since the all of the participants did not scroll down the landing page and one of them went as far as mentioning that “the landing page was too long”, I decided to make it simpler and gave the option for the users to go to other pages to explore the book categories through the call to action button, global navigation or the drop-down menu.
I edited the feedback confirmation and added the statement that an email has been sent as a confirmation of their order.
I moved the autofill menu closer to the search bar, to avoid confusion for the users. I also, put thumbnails of recommended book search suggestions to make a clear distinction between the result and keyword searched for.
I removed the “X” icon on the order review page to take out the option of being able to edit the order on check out page to avoid confusion with the users.
Next Steps
As for the further development of the product here are some of my recommended next steps:
Explore the benefits of creating a virtual tour of The Last Bookstore for the users.
Since The Last Bookstore currently holds its online auctions for its used and rare books on Ebay, explore having this feature integrated into the website for added efficiency so the users don’t have to go to an external site to bid on books.
Having a feature for booking events on the website is also a good next step, so all services of the store are streamlined on the website.
Impact:
The redesign of the store’s website gave it an overhaul, improving not only the aesthetic but also the overall user experience. It now reflects the store’s unique personality and lets the users go through their tasks efficiently.