Foxtale Bookstore Casestudy
A solo responsive website project, updating the branding and UX/UI of a small independent bookstore's exisiting website.
Project Type
Responsive Website
Role
Solo Poject: Research, Branding, UX/UI Design, Testing
Time Frame
Approximately 60 Hours
Introduction
Background
Foxtale Bookshop is a small, independent bookstore that has been in operation for over fifteen years. While they take great pride in their brick-and-mortar store as a gathering place for book-lovers in the local community, their current website is in need of a refresh. I would like to update the branding and UI/UX to encourage online book sales, provide better information to their customers about store events, and to drive new customers into the store.
The Problem
The current site has been through piecemeal updates and managed by employees with little experience in designing or maintaining websites. As a result, it lacks stylistic cohesion and many customers find it difficult to locate the products or information that they need.
Project Goals
Evaluate current site for areas of improvement. Where are users struggling to find information or complete tasks?
Create new branding for the store, refreshing the logo and overall tone of the design. Integrate branded merchandise into online store.
Develop and test an updated UI based on the information gathered through market and user research.
This project needed to be completed within a sixty-hour time-frame, from initial research to prototypes and user testing.
In order to determine what features are necessary for optimal user experience in an informational and e-commerce bookstore website, I considered these basic questions:
Why do customers choose to shop at an independent bookstore?
How do customers select books to purchase?
What portions of the current site work well for users? What portions don’t?
Why do some users decide to buy books elsewhere?
Research Strategies
Secondary research about the industry to understand general trends in the market.
Competitive analysis to see what competitors offer and choose to feature.
User interviews to determine the valued features and pain points on the current site.
Tree testing to evaluate the current site's IA.
Card sort to develop the updated navigation, if needed.
Key Findings
Competitive Analysis
As I evaluated the sites of prominent independent bookstores, I found that many of them used similar design systems to display their products, lining books horizontally on the page and allowing users to scroll through them, mimicking the experience of browsing a physical bookshelf. Despite the fact that I examined some of the biggest and most well-respected independent bookstores in the US, many of the sites seemed older, cluttered, or confusing, leading me to wonder if this isn't at least partly the independent bookstore "aesthetic," separating them from corporate chains.
Tree Testing
During my initial review of the original site, I speculated that users would struggle to find what they need with the current organization. I wanted to test that out. Therefore, I conducted a Tree Test on the Lyssna platform where I evaluated five different tasks using the original site's navigation: locating the hours of operation, date of next book club, gift card information, books under $10, and the store's address. Of these, the hours of operation and store address were the most difficult for users to locate.
Therefore, it's important to clarify differences between the About and Contact pages (perhaps by including contact information in footer and eliminating it as a navigation option), and include non-book Merchandise in the navigation.
Interviews
Everyone I spoke to self-identified as an avid reader, and would therefore be a likely patron for a small, independent bookstore. My pool of subjects may not reflect the opinions and values of the general population, because they self-selected into the interview and have all achieved some level of higher education.
All subjects rely - to some extent - on reviews, recommendations, and social media to choose books. Recommendations are generally more valuable than reviews, IF the reader trusts the person making the recommendation.
All subjects read books in multiple formats. People tend to pick different formats for different types of books – for example, physical books for something they’d want to reference later.
Most subjects preferred to purchase books rather than borrow them. Large online retailers, such as Amazon, were the most popular place to make their purchase.
All subjects have visited an independent bookstore. How they found out about the store varied, but the most common answer was that they simply walked by it and decided to go inside.
While many subjects appreciate book recommendations when attempting to select a book, several expressed skepticism about “staff picks” at bookstores. (“I don’t know this person’s taste.”)
While only a few subjects said they would be likely to purchase branded merchandise from a bookstore, several remarked that they would consider it if the designs were good.
Analyzing Research Data
As I pulled important quotes from interviews, surveys, and other research, I used the popular method of Affinity Mapping to visualize the data. Consider some responses related to how participants select books to read:
Meet the Customer: User Personas
Using the information and opinions expressed throughout my surveys, interviews, and associated research, I developed two distinct customer personas: David, a socially-conscious nonfiction reader, and Emily, a personable fiction lover.
With a better grasp of where users pain points exist with the current site, I began to consider solutions.
Site Map Update
In order to incorporate some of the site changes suggested during testing and user interviews, I expanded and reorganized the current navigation, including Home, Search, and Merchandise features.
Out with the old…
…and in with the new.
But Does It Work?
To assure that the new sitemap is predictable and user-friendly, I conducted a card sort exercise, with 30 cards and six categories, corresponding to the menu items. Overall, participants placed the majority of cards where predicted. A third of the cards were placed correctly 100% of the time, and no card scored below 63%. Overall, the most difficult-to-sort cards were informational: store hours, address, social links, etc. Those will be added to the footer (along with the About page), reducing the likelihood users will not be able to locate the information they need.
Branding Development
"Smart, with a touch of whimsy."
When I started working on the store logo and branding, "smart, with a touch of whimsy" was the tone that I wanted to strike, as it has a wide appeal to consumers like David and Emily. The original logo included a picture of a fox, which I wanted to keep but simplify, as it's likely to look better on merchandise. I decided on a simple sitting-fox silhouette, and the Libre Baskerville typeface.
Styling
As I considered the rest of the site, I found that incorporating fox silhouettes throughout and a vibrant color palette offered a "whimsical" touch, while the neutral colors and typeface selections brought the "smart" feel. Alluding to book conventions, I decided to use a primary serif typeface and sharp corners on images, cards, fields, and buttons.
Both before and after branding, I designed a series of wireframes for the Home Page, Books Page, Fiction Page, Individual Title Page, and the Check-out Series, each time iterating on feedback from my mentor and peers.
Simple A/B Testing
Between the mid and high-fidelity wireframes, I did some simple A/B Testing for colors and typefaces using the Lyssna platform.
All participants tested preferred green as the primary accent. Orange, the secondary accent color, will be used minimally or not at all.
The overwhelming majority of participants preferred a serif body text. Libre Baskerville (the first picture) will serve as both the body and header text.
In order to test my latest iteration of the design, I put together a Figma prototype with the ability to:
Find Horse by Geraldine Brooks
Add the book to cart
Check out as a guest
User Testing Results
Prototype tests were conducted on the Lyssna platform. Participants were asked to:
Locate the store hours. (First Click)
Locate the place on the menu where you would find information on Writer’s Workshops. (First Click)
Locate the place on the menu you’d look to purchase something for someone else. (First Click)
Find the fiction book Horse by Geraldine Brooks and add it to your cart. (Prototype)
Purchase the items that you have selected. (Prototype)
Evaluate the overall design of the site. (Question)
GOAL: Assure that users are able to complete basic tasks on the prototype.
All tasks were completed at 100%
GOAL: Determine the overall efficiency of prototypes: for example, whether or not users are able to complete tasks with ease, within a reasonable timeframe, and without excessive errors.
All tasks were completed in less than 40 seconds, on average.
All tasks had a misclick rate of less than 20%, on average.
All tasks were completed.
GOAL: Assess user satisfaction with the overall process of performing the tasks.
All users ranked the ease of tasks as “easy” (4) or “very easy” (5)
All users reported high satisfaction with the visual design of the site.
Suggested Changes Based On Testing
Add a prominent Search on the landing page for those who know exactly what they want and prefer not to browse.
Revise check-out process pages and consider graying out checkout steps that have been completed, adding login page, and adding state in address input.
Align prices on cart page.
Add Children’s book categories to footer.
Omit border on small buttons.
Reflecting
I have a soft spot for bookstores, so creating a site for something I’m fond of is a pleasure. Even though the bookstore I selected already had branding, I enjoyed coming up with new logos and color schemes to better appeal to the potential customers represented in the personas, based on my research.
I conducted quite a bit of testing before, during, and after my prototypes. My interviews addressed the habits of likely customers, but I also did Card Sorts and Tree Tests to find problems in the existing navigation/IA and make improvements. I did A/B testing for design elements, along with First Click and Prototype Tests for usability. It won't always be practical to use this many research tools, but it was valuable practice, and I gained a lot of confidence. With each project, I believe that I get more efficient and proficient.