Foxtale Bookshop
Updating the branding and UX/UI of a small independent bookstore's existing website.
Project Type
Responsive Website
Role
Solo Product Designer: Research, Branding, UX/UI Design, Testing
Time Frame
Approximately 60 Hours
Tools
Figma, Lyssna, Photoshop
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.
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
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.
1.
Evaluate current site for additional areas of improvement. Where are users struggling to find information or complete tasks?
2.
Create new branding for the store, refreshing the logo and overall tone of the design. Integrate branded merchandise into online store.
3.
Develop and test an updated UI based on the information gathered through market and user research.
In order to determine what features are necessary for optimal user experience, 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?
Methods
Secondary Research about the industry to understand general trends in the market.
Competitive Analysis to see what competitors offer and choose to feature.
Interviews to determine the valued features and pain points on the current site.
Tree testing to evaluate the current site's IA, and card sorting to develop a new one.
Key Findings
Analyzing Research Data
As I pulled important quotes from interviews, surveys, and other research, I used the popular Affinity Mapping to visualize the data. Consider some responses related to how participants select books to read:
Meet the Customers: 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 teacher pain points, it's time to consider some solutions.
Defining the Big Questions…
How might we provide the convenience of a large book retailer while maintaining the spirit and charm of a small, local store?
How might we feature bookstore events to build and support a diverse community of readers?
Sitemap 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 will 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%.
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.
Visualizing the User Flow
With the site map tentatively changed and tested, I created a User Flow to track the user's journey as they search for and purchase a book: one of the most important features of the site.
Branding
As I considered ways to update the store's branding while keeping the main colors and fox motif, I settled on a basic philosophy that I felt had wide appeal to consumers like David and Emily:
"Smart, with a touch of whimsy."
Logo Refresh
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.
Wireframes & Testing
Low Fidelity Wireframes
Because this website is responsive website, the low-fi wireframes included both desktop and mobile versions of the site. These provided a framework for later iterations.
Wireframe Iterations
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.
Low/Mid Fidelity Wireframe Testing
Between the mid and high-fidelity wireframes, I continued to test the new navigation, and also conducted simple A/B testing for colors and typeface.
Changes based on testing:
The store contact (address, phone, email) and hours will be added to the footer.
The orange secondary accent color will be removed from most parts of the site.
Libre Baskerville (the first picture) will serve as both the body and header text.
High Fidelity Wireframes: Desktop
High Fidelity Wireframes: Mobile
Prototype & Testing
User Testing Results
Prototype tests were conducted on the Lyssna platform. Participants were asked to complete a series of basic tasks and provide feedback on their overall experience.
Assure that users are able to complete basic tasks on the prototype.
All tasks were completed at 100%
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.
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.
After these changes were implemented, a final prototype was created (see video below).
Reflection
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.
