.png)
The Tattered Cover
Website Redesign
A thoughtful website redesign for a beloved local bookstore chain.
About the Project
The Tattered Cover is a beloved bookstore chain in Denver, Colorado, and it's been around since the '70's. Their stores have a quintessential cozy atmosphere that speaks to book-lovers everywhere. Their website was another matter entirely. The outdated and confusing navigational structure inspired me to redesign the website.
My Role + Tools Used
UX & UI designer
Figma, Pen + Paper, lots of coffee
Client
Project Type
Project Timeline
Case Study Coming Soon!
Discover
The Challenge
The Tattered Cover Bookstore is everything you want as a booklover. It's a quaint brick and mortar store that houses thousands of physical books. No giving in to e-readers like a Kindle or Sony Reader. While I stand firmly on the side of a true page-turner (literally and figuratively), I also happen to be a typical millennial who relies heavily on the convenience of websites, online ordering, and quick-browsing. This put me in a unique position when tasked to redesign the website for this particular bookstore and I kept asking myself the same question:
How do I bring the magic of a bookstore to a website?
The Problem
• Information Architecture/Consistency - the global navigation is full of unnecessary items like the Privacy Policy and these need to be removed from this space. Only the most relevant categories should be in the nav bar. Additionally, when any category is selected the user is taken to a new page, but each one of these pages is wildly different. Large, random, clunky buttons with no consistency throughout the site create overall confusing navigation.
I started this project with some personal research and a feature inventory of the Tattered Cover site. As you can see in the video, the site lacks some important UX and UI basics, making the overall experience frustrating. A quick heuristic evaluation results in a fail, with some of the main offenders being:
• Accessibility - as you watch the mouse rollover some subcategories, the contrast completely fails and it's extremely difficult to read the options until you hover over the text. This would be a nightmare for any person who is colorblind (and if they're not).
• Efficiency - not shown in the video is the checkout process. Individual input fields span the screen's width, each being on a new line. To get to the bottom of the checkout page, the user needs to scroll several page lengths. Not a great user experience.
Define
Objectives
1. Update the navigation UI for an inclusive shopping experience.
The original navigation color contrast fails and can be difficult for those with color blindness to clearly read what is being highlighted and/or selected.
2. Create consistency across pages and product display/shopping elements.
Pages vary in layout and CTA buttons change from page to page. Where one subject or genre will have books as clickable elements for that subject, another genre will have stylized buttons.
3. Simplify checkout process for a more efficient user experience.
During the checkout process, each input field spans the width of the entire screen, requiring a new row for every input field. This causes the user to scroll endlessly before finally filling out all the required information.
4. Offer suggestions for similar and related products.
Currently, there are no suggestions for similar products on the site. Without recommended content, the user engagement can be lowered significantly.
User Interviews
What is the process for purchasing a book? What thoughts and emotions are involved? How does one decide? What are users looking for during this experience?
These were just some of the things I wanted to find out when conducting my user research for this project. I ended up interviewing five book lovers to gain insight into the ritual of book buying and what I discovered was eye-opening and ended up being one of my favorite parts of this project!
After hours of interviews and affinity mapping the responses, I was able to understand that the book buying process was just that, a process. An almost sacred ritual of wandering through a bookstore to touch, feel, and smell the books. Perusing aisles to see what cover or spine catches the eye. Almost 80% of users that were interviewed confirmed that they generally do not go into a bookstore with a book in mind. Perhaps they have a favorite genre or author(s) that they tend to migrate to, but not a specific book.
I also learned that if users are going to an online bookstore, it usually is for something specific. Browsing online for books is seldom done, if at all. So what did I learn from this research? I actually got the answer to my original question: How do I bring the magic of a bookstore to a website?
The answer is..... You don't.
The research told me that people do not use brick and mortar bookstores for the same reason they use a bookstore site, even if it's the same company. This revelation allowed me to understand that the site and the store serve different functions for users, and therefore should not copy each other but compliment each other.
100%
stated they represent quality products
and an honest business.
50%
run a farm that has been passed down from
family and/or is family operated.
50%
said they needed help navigating
governmental resources.
75%
were self educated or family educated
in farming.
Defining the User
The user interviews were crucial as they helped me to understand the goals, pain points, and motivations of The Tattered Cover's target market. With the information I had gathered, I created a persona named Zoya based on those findings.
- Zoya loves to learn and books are her go-to tool.
- She loves to read, but can be overwhelmed with options if she doesn't already have a direction in mind.
- As a busy student, Zoya is always looking for a certain level of convenience when shopping.
- Zoya is clever and curious, she needs to enjoy the shopping experience and not be bored by online bookstores.
.png)
Results and Iterations
The usability tests consisted of 6 users from the target market of the Tattered Cover. I gave each of them 3 tasks, instructed them to talk through their thought process, and observed as they navigated the site. While all 6 users had no trouble using the navigation to complete the first task, 4 users commented aloud that the subcategory font was small and difficult to read. Luckily, as easy fix.
Next, when the users browsed the items and eventually added something to their cart, I observed 50% of users click the cart icon, taking them to their shopping cart, then clicking back to browse more items. This extra step took time and effort for the user and created an unnecessary deviation from the task. My next iteration would include a feedback overlay indicating what has been added to their cart, so users wouldn't need to navigate back and forth.
The checkout page has three options - Sign In, Guest Checkout, and Create an Account - all in equally prominent buttons. Although there was not much commentary on this step, I did observe all 6 users took a few extra seconds deciding between the options. Ultimately, the final choices were mixed, but it seemed as though a decision could be made faster with fewer options or two options being displayed as primary and the third as secondary.
Lastly (and unsurprisingly), I received a lot of feedback regarding the decorative font used. I can admit I got carried away with the quaint bookstore aesthetic. However, this was further validation that users were not looking for the same bookstore experience they received in person.
• Information Architecture/Consistency - the global navigation is full of unnecessary items like the Privacy Policy and these need to be removed from this space. Only the most relevant categories should be in the nav bar. Additionally, when any category is selected the user is taken to a new page, but each one of these pages is wildly different. Large, random, clunky buttons with no consistency throughout the site create overall confusing navigation.
Problem Statement
Design
A Design Direction
My initial research revealed the original Tattered Cover website offers a poor and confusing experience. My focus for the redesign is consistency, a better check-out process, inclusive navigation, and suggested content. The user research told me that the customers just want a simple and easy-to-navigate website to purchase their books. Equipped with the original objectives and the research findings from the user interviews, I had a great starting point to begin the design phase. Starting with a simple user flow and some low-fi sketches of the website foundation, I began my own rough draft of the redesign.
Designing with Intention
.png)
For the next step in creating my mid-fidelity wireflows and usability testing, my primary goal was to implement the original objectives and find out what pain points and frustrations were still being encountered and continue iterating based on the user feedback. The changes I made from the original Tattered Cover website were taken directly from the original objectives:
1. Information Architecture - I condensed the existing navigation and created a global navigation for the focal points of the Tattered Cover. These now consist of Programs, Books, Shop, and Events. Keeping only the essentials in the navigation declutters this first step in the user experience. Before this change, the navigation included things like Privacy Policy, Terms & Conditions, and the Refund Policy - all things that I moved to the footer.
2. Accessibility - Changing the contrast of the subcategories was an instant facelift to the interface. Allowing users to actually be able to see what they were clicking on was a game-changer!
3. Efficiency - The checkout page was made more efficient by removing the full-page spanning input fields and using more appropriate sizes for users to add their information. This helped not only save time, but also space by keeping the scrolling to a minimum.
4. Suggested Content - Underneath a selected product, I added a carousel of related products to ramp up engagement and help the user find a direction if needed.
For the Course-specific page, we added a CTA button for users to start the course. We also added smaller details such as length of each course and improved spacing between elements.
The Community page brought the most changes, giving it a familiar social network style in the feed, with less clutter but more relevant information for users.
We cleaned up the Resources page, making improvements to the overall UI. We kept this page simple and straightforward, as there were little issues navigating it from round 1 of testing.
Mid-Fidelity Wireframes
Results and Iterations
The usability tests consisted of 6 users from the target market of the Tattered Cover. I gave each of them 3 tasks, instructed them to talk through their thought process, and observed as they navigated the site. While all 6 users had no trouble using the navigation to complete the first task, 4 users commented aloud that the subcategory font was small and difficult to read. Luckily, as easy fix.
Next, when the users browsed the items and eventually added something to their cart, I observed 50% of users click the cart icon, taking them to their shopping cart, then clicking back to browse more items. This extra step took time and effort for the user and created an unnecessary deviation from the task. My next iteration would include a feedback overlay indicating what has been added to their cart, so users wouldn't need to navigate back and forth.
The checkout page has three options - Sign In, Guest Checkout, and Create an Account - all in equally prominent buttons. Although there was not much commentary on this step, I did observe all 6 users took a few extra seconds deciding between the options. Ultimately, the final choices were mixed, but it seemed as though a decision could be made faster with fewer options or two options being displayed as primary and the third as secondary.
Lastly (and unsurprisingly), I received a lot of feedback regarding the decorative font used. I can admit I got carried away with the quaint bookstore aesthetic. However, this was further validation that users were not looking for the same bookstore experience they received in person.
Deliver
The Prototype
Takeaways & Next Steps
If I had more time to work on this project, I would definitely include a detailed site-map and implement card sorting to structure the categories in much more detail. I would also love to expand on my research to test the experience of other aspects of the site, including diving deeper into the Events and Programs pages, how they would function, and what the user engagement would look like.
I learned so much from this project, but I think the biggest lesson being it was a reminder that I am not my user. In the beginning of this project, I made an assumption that users would want the same experience from a website that they did from a brick and mortar store. What I learned was that these are two very different experiences for users, and that they should compliment each other instead of copy each other.