Antigone Books
Redesigning the website of a beloved
women-owned local book store
Project Overview
Role: UX Researcher, UX Designer | Duration: 2 Weeks | Tools: Figma, Miro, Optimal Sort
Problem
-
Browsing for books is difficult and unintuitive
-
There is no visible shopping cart to use for check out
-
Lengthy check out flow
-
Gifts cannot be purchased online.
Goals
-
Redesign site navigation to maximize intuitive design and organization
-
Create a more user-centered check out flow
-
Decrease cart abandonment
-
Design gift purchasing option
Results
-
Ease of use in browsing for items and book suggestions from lists
-
Redesigned check out flow
-
0% to 100% ability to buy gifts
-
Access to cart and account at all times
-
6 clicks from homepage to purchase
The Process
Antigone Books is an independent book store in Tucson, Arizona's unique 4th Avenue Shopping District.
In 1973, three women opened the store and named it after the Greek mythological character who stood her ground against male authority figures.
The store is a local gem, but its online store does not have the same impact as its physical store and needs to be redesigned.
Discover
I conducted my research in 3 phases:
1. Heuristic Evaluation
2. Contextual Inquiries
3. Competitive Analysis
Heuristic Evaluation
A heuristic evaluation of the website showed several important problems with using the site.
Here are some main takeaways:
1. No shopping cart, proceed to check out, or other status check for shopping items selected.
2. Gifts cannot be added to the cart and purchased.
3. Browsing books and gifts tabs are at bottom of the homepage and not visible to most users unless they scroll down.
4. Checkout is one long page without showing any real-time validation
5. Information is organized randomly and without structure.
6. Availability of items is not revealed to the user.
In order to validate my finding from the heuristic evaluation, I decided to test the site on users
Contextual Inquiries
I performed 5 contextual inquiry interviews, instructing interviewees to perform two main tasks:
1. Browse for a best-selling contemporary book and add it to the cart.
2. Find a non-book gift of your choice and add that to the cart.
Results:
-
4 out of 5 users (80%), could not find the browse books feature and had to think of a book title to search in the search tab.
-
Only one user (20%) was able to find the Browse Gift section.
-
0% of users were able to purchase gifts.
-
No one (0%) was able to find their shopping cart and proceed to check out after this and all abandoned task.
"Where is the shopping cart? How do I check out??!!"
"I can't buy gifts? Why is it even there??"
Competitive Analysis
I now turned to competitors in order to compare features and see how quickly tasks were achieved in other online bookshop websites.
I analyzed 5 other sites and compared their features to Antigone Books. Most other book stores had the following on their site:
-
User-friendly navigation
-
Better organizing features
-
Easy access to book categories
-
A shopping cart on view
-
Ability to buy gifts
Task accomplishment also took less time in the other website and was more efficient.
_Page_1_edited.jpg)
Define
The next phase in the process was to define the problem based off of the research I had conducted:
1. Persona
2. Problem and Solution Statements
3. Card Sorting
4. Site Map
Persona
In order to better understand the users, I developed a persona based off of my research that reflected a typical online book shopper. The needs of the users I had interviewed were combined to create a representative of my target users.
Anny, a young book lover, who is an avid gift giver and prefers gifting books to her friends and family. She loves browsing lists to find interesting new books and also likes to shop local.
Goals:
-
Buy books and gifts from local store
-
Likes easy and hassle-free shopping
-
Wants to look through book lists
-
Wants items shipped to home
Pain points:
-
Frustrated by a long check-out process
-
Dislikes not being able to filter items
-
Not being able to update the shopping cart is problematic
-
Not knowing the availability of items on the site is a challenge
.png)
From the research I had done and the information I had gathered from users, I could now define the main problem.
Problem Statement
Anny needs a way to find and order books and gifts online from Antigone Books because she wants to shop from local businesses quickly and easily.
Solution Statement
By redesigning Antigone Books' website to feature a user-friendly global navigation with easy access to book categories and the shopping cart, and the option to purchase gifts online, users like Anny can shop happily at their favorite local book store without leaving their homes.
In order to redesign the global navigation, I turned to users again for card sorting.
Card Sorting
11 Participants completed an open card sorting exercise in which they were tasked with categorizing 30 different products from the website into groups.
After synthesizing the data, there emerged some clear filters for organizing Books and Gifts. Books were categorized into groups such as:
-
Bestselling,
-
New Releases,
-
Kids,
-
Audio and Ebooks
-
Fiction
-
Nonfiction.
This table shows categories formed by users, with the blue boxes highlighting the top categories made.
Site Map
Using the data from the card sorting method as well as information architecture best practices and data from my competitive analysis, I created a new site map for the website that allowed for a more intuitive and user-friendly navigation.
Develop
All the data from my research and information architecture helped me begin the design phase.
Sketches
Sketches helped me visualize the website and determine the best flow for the site.
I cut out pieces of paper and laid them on top of various sketches as a form of ideation and to work through the different parts of the site.
I designed a global navigation with drop-down menus that listed categories for books and filters to narrow down searches.
Design & Test
The sketches were then turned into medium-fidelity wireframes in Figma. These wireframes went through two rounds of usability testing, which greatly improved the user flow for the site.
Mid-Fid Wireframes & Usability Testing
Once the wireframes were created, I begin testing on 5 users.
Users were instructed to perform two main tasks in two rounds of testing.
Task 1: Go to the website, browse for a popular romance novel and add it to the cart.
Task 2: Browse for a 1000-piece puzzle, add it to the cart and check out.
Iteration 1
In the first usability test, it became clear that users had a hard time navigating the filters in the Category section. They did not realize there are clickable items under the main category to narrow down their search.
Users also found the Add to Wish List button difficult to see.
Changes:
Added (+) next to each line in the filter section
Made the Buttons more pronounced.
.png)
Additionally, in the checkout section, some of the text was too small, and the checkout process had too much text.
Changes:
Removed text in checkout Status Process
Made some of the text larger
Iteration 2
.png)
In the second usability test, 3 out of 5 users were able to accomplish the tasks, but 2 users thought the addition of a (+) button next to the filters was still not enough to divert their attention to the filters.
Changes:
Added animation so that the color of the filters change to indicate clickability.
Some elements were not aligned properly and breadcrumb navigation was missing in some of the pages.
Changes:
Aligned elements
Added breadcrumb navigation