capitol hill books
project overview
details
Scope — Revise e-commerce and product discovery functionality on desktop and mobile websites
My Roles — Lead Researcher and Designer
Team Size — 1
Duration — 2 weeks
tl;dr
This project involved redesigning the existing website for Capitol Hill Books, a used and collectible bookseller located in Washington, DC. The redesign centered around revising product discovery and e-commerce functionality to better meet business and user goals. By utilizing a target user profile, conducting competitive/comparative research, and exploring information architecture options, I designed solutions for users to quickly discern and interpret an item’s quality online while also meeting the business’s goals to maintain their “small shop” brand image and allow users to efficiently and enjoyably purchase products online.
My approach to this project was to leave the store’s branding intact as an integral piece of their identity in the Capitol Hill community. Instead, I focused on adding features at the intersection of user and business goals: simplified navigation/information architecture, the ability to filter and sort by quality, a quality indicator key, quality guarantee badges, and the ability to request photos. I also streamlined the e-commerce functionality to increase efficiency and comply with industry best practices. After usability testing, I adjusted the sizing and prominence of quality indicators, re-ordered call-to-action buttons and created a secondary button color, added a breadcrumb trail when browsing categories, and added section headers on the home page.
Recommended next steps are to further refine Capitol Hill Books’ 162 original categories into subcategories, integrate of TrustPilot reviews, add a “browse similar items” feature, incorporate an onboarding experience to introduce the new quality indicators, and to continue building out the mobile version of the website currently at mid-fidelity.
research
brand research
Capitol Hill Books (CHB) has been a Washington, DC staple since it first opened in 1991. Known for its floor-to-ceiling shelves, some stacked two or three books deep, it has developed a decades-old reputation amongst local bibliophiles and tourists alike. Since inception, CHB has delivered on its goal to provide only the highest-quality used books to its local community. Their in-person shopping experience is not to be missed, complete with cheeky signage, books towered so high they appear to defy gravity, and the feeling that you might find buried treasure at any moment.
Recently, CHB decided they would like to expand their online presence to better serve their local community. While in-person shoppers have a sensory experience where they can touch and evaluate the many treasures within the store, this experience is harder to replicate online. It became evident that we would need to put supports in place for online shoppers to easily find what they’re interested in and evaluate what CHB prides itself on the most: item quality. We also wanted to be sure to translate their small business brand image and excellent customer service into the online experience.
In addition to direct brand research, I also wanted to evaluate CHB’s competitors (ThriftBooks, AbeBooks, Alibris) to discover potential areas of opportunity. I decided to conduct a feature inventory, which compares features present on a company’s webpage/product. I focused on features present from the point of product discovery through to checkout: search/browse functions, product pages, checkout, responsive design, and user assurance.
My key insights from the feature inventory were:
Additional search functions and filters, particularly those that aid in assessing an item's quality, would reduce friction for our user
Most competitors use sectioned item descriptions, which will help our user more easily digest quality indicators within them
Competitors have various means of assuring customers of item quality, e.g. general tips on collecting rare books, third party ratings of the business as a whole, quality guarantee badges, and keys to help decipher item condition
Photo Source: Accidentally Wes Anderson
After evaluating their existing website, I emerged with some valuable takeaways and assumptions for further validation:
They appear to cater to an audience of collectors that are not necessarily on a budget
Their red, white, and blue branding is directly tied to their location on Capitol Hill
They do have e-commerce functionality, but the site does not immediately read as an e-commerce site (you have to click on a book to see that you can purchase it online), and some payment methods are antiquated
They have multiple ways to browse products (featured items, new arrivals, catalogues, direct search, advanced search) that might leave users not knowing where to start
They have a whopping 162 book categories listed on the website
Their product pages have copious details that could be better standardized across products
Their Contact Us, Ask a Question, Terms of Sale, Purchase Policy, and Accessibility Statement all signal high-level customer service
direct competitors
indirect competitors
Next, I looked at CHB’s indirect competitors (Chairish, Mercari, Amazon) to see how "best in class” e-commerce/resale companies approach the product discovery process, product descriptions, and the checkout process. I conducted a plus/delta analysis to see what each company was doing well, and where there were areas for improvement. My key takeaways were as follows:
Product Discovery: Capitol Hill Books could refine their categorization down from 162 categories, utilize nested navigation for browsing categories, introduce filters for searching within results, and use a more captivating homepage with a headline describing what their business does
Product Listings: Capitol Hill Books could benefit from adding photos for items that don't yet have them, sectioning their product descriptions to make them easier, having a key to standardize and help users interpret item condition, and implementing buyer protection guarantees to put users' mind at ease
Checkout Process: Less-commonly-used payment options could be removed in favor of express pay options, and checkout steps could be better sectioned to show users where they are in the process
categories upon categories
One insight that came up during my initial site evaluation and again in the plus-delta analysis was that CHB has a staggering 162 book categories listed on their website, some only containing a few books. I knew I had some work to do in order for users to be able to efficiently find books related to their interests.
I started with a card sorting exercise, where 15 participants sorted books into categories based on their own logic and preferences. 12 out of 15 participants sorted the books by genre rather than other categories like new/used or hardcover/paperback. It was clear that I’d stick to sorting books by genre, but I still needed to do something to reduce the number of categories overall.
I decided to conduct an element inventory for the same 3 competitors used during the feature inventory. The element I examined was the number of top-level book categories.
I created an affinity map where I grouped identical/similar competitor categories together. Then, I made a list of the groupings and the number of competitor categories that appeared under each group. I considered categories that appeared two or more times as "common categories." The categories that only appeared once were considered outliers. I then checked each grouping against Capitol Hill Books' categories to see if they appeared. If a common category did not appear under Capitol Hill Books' categories, I eliminated it. If an outlier category appeared under Capitol Hill Books' categories, I kept it.
Ultimately, I was able to substantially reduce CHB’s categories:
synthesis
meet robert
The scope of work for this project called for utilizing a predefined target user profile in lieu of conducting user interviews. Based on the target user’s primary concern, item quality, I returned to the existing website to evaluate it from the user’s perspective. I combined data from the target user profile with findings from the website to create a user persona, which helps summarize the target user’s needs, frustrations, and behaviors.
robert’s journey
To get a closer look at how Robert would interact with the current version of the CHB website, I prepared a retrospective journey map that shows his actions, thoughts, and feelings while browsing for and purchasing a book.
Although Robert ends on an alright note, I wanted to figure out how to alleviate his initial hesitation about shopping online, his confusion about the many search methods and categories, and his frustration that he can’t easily determine an item’s quality. So, how could I go about improving Robert’s experience?
To guide my design direction, I defined a problem statement that captures the main insights gathered through research:
problem statement and how might we’s
Then, from a longer list of “how might we” questions designed to get me thinking about potential solutions, I focused on a few that aligned best with the target user’s needs:
How might we make item quality more evident to the user while browsing?
How might we better describe an item’s quality?
How might we promote our brand as only offering quality products?
proposed solutions
Utilizing insights from brand research, competitive and comparative analysis, the target user profile, and my categorization research, I defined my proposed solutions. The following chart represents the intersection of research and design and how insights about user needs begin to take shape as features.
“Capitol Hill Books customers need a better way to browse for, identify, and purchase high-quality items through the Capitol Hill Books website because it currently has limited quality filters/indicators and e-commerce functionality.”
ideation
sketches
With proposed solutions in mind, it was time to begin sketching what they might look like. My sketches focused on different layout options for the home page, navigation, sorting and filtering, product pages, and checkout. My final designs ended up melding different elements from each option, so it was helpful to have several options to choose from.
wireframing and prototyping
Next, I transformed my rough ideas and sketches into mid-fi wireframes and prototypes for both the mobile and desktop experiences. I focused on how product discovery and checkout functionality would work. The prototyped mobile version presented here demonstrates the following flows:
Product Discovery - Browsing for an item of interest by selecting a category, filtering by quality, and sorting by highest quality. The product page displays options to submit a photo request and review the item’s quality rating using the quality key.
Checkout - Completing the checkout process with condensed, refined, individual screens for shipping, billing, and review. The check-out pages display new express checkout options and the option to create an account and saving shipping/billing information for the future.
information architecture
At this stage, I also needed to draft up how the site’s new information architecture would look. I moved the pre-existing browse-by-category functionality from its own page to the top-level website navigation. The highlight of this new structure is that the categories section is now nested under “browse.” I also consolidated other pre-existing pages into more logical groupings, e.g. “book requests” (leave a want, order new books, new arrival notices) and “connect” (events, blog, contact). These changes are demonstrated in the following site map.
testing
usability test plan
To evaluate the usability and learnability of new features introduced in the CHB redesign, I conducted one round of remote, moderated usability tests with 5 participants. Participants were presented with a scenario in which their biggest concern is item quality, they want to browse books related to their interests, and they want to make an online purchase through CHB for the first time.
Due to the high quantity of new features introduced, I decided to ask users to complete specific tasks in the form of prompts. This ensured that I could gauge the usability of all new functionality introduced.
insights and iterations
-
You don’t have a specific book in mind, but want to casually look for options related to your interests. Show me where you would go.
Based on the categories you see, you’ve decided you want to browse books on California. Where would you go?
Show me how you would narrow down the results so you’re only seeing books about California.
Show me how you would narrow down the results so you’re only seeing books of the top two quality categories.
Show me how you would learn more about the quality categories.
Show me how you would apply the filters.
Show me how you would sort these results to ensure you are looking at the highest quality items first.
Select the book named “California.”
Show me the places on the page you would look at to learn about or be assured about an item’s quality.
Show me what you would do if an item didn’t have any pictures.
Show me how you would complete the checkout process as if this is the first time you have shopped on the website, but you are interested in shopping here again.
Show me how you can check which step of the process you’re currently on.
Show me how you could save your information to make checkout quicker and easier next time.
After conducting the usability tests, I compiled my quantitative data (success and error rates) and qualitative data (subjective satisfaction questions) into a synthesis spreadsheet to identify key insights and iteration ideas.
#1
40% of users had difficulty locating the question mark icon that displays the item quality key/tooltips. I made the icon more prominent by increasing its size and using CHB’s secondary palette color, a dark red, to draw attention to it.
#2
20% of users erroneously clicked the incorrect button when attempting to view their cart. This is because two buttons with the same color scheme were competing for attention. I created primary and secondary button styles to help draw attention to the option that will usher them through the checkout flow.
#3
60% of users requested a breadcrumb trail to see the path they have taken from browsing to selecting a category. I added a breadcrumb trail to the top of the search results screen to help users remember the path they have taken.
#4
40% of users requested header text at the top of home page sections so they immediately can recognize what is being displayed. Previously, the sections were only labeled by their call-to-action buttons (e.g., shop featured items), so I added a separate heading at the top of each section.
successes
Among the subjective satisfaction questions I asked during usability testing, users were asked to rate 1) their overall experience from least to most enjoyable, and 2) the process of finding and purchasing an item from difficult to easy to follow. Overall, the revised functionality was received favorably by users!
The following user quotes also supported the new navigational structure and information architecture.
“Flowed very easily, made a lot of sense, and didn’t have to use the search bar.”
“Clear hierarchy, very clearly organized, not overwhelming”
delivery
next steps
Due to time constraints with this project, most of my efforts were focused on the site’s basic information architecture as well as product discovery functionality with an eye toward discerning item quality. With more time, I would like to:
Conduct additional research to see how users would sort all 162 of CHB’s original categories into subcategories to continue building out subcategory filtering. This will ensure subcategories are assigned to top-level categories that are intuitive to users.
Integrate TrustPilot reviews, testimonials, or general business reviews into the shopping experience. The target user profile included the desire to read reviews before purchasing, and this desire was reiterated by one of the usability testers. Since CHB’s products are one-of-a-kind and not subject to repeat purchase, reputational reviews could help build rapport with customers.
Introduce a “browse similar items” feature on product pages to facilitate quicker browsing and help drive additional product discovery and purchases
Design an onboarding experience to introduce users to the new quality key/indicators
Continue building out the mobile version of the website to better serve the 50%+ of users who shop on their mobile devices
For now, I hope you enjoy the latest prototype!