Capitol Hill Books
CASE STUDY
MY ROLE: UX Researcher, UX Designer, UI Designer | DURATION: 2 Weeks STATUS: Complete
BACKGROUND
Capitol Hill Books is a local neighborhood book store based in Washington, DC with a small online presence. Unfortunately, it’s not driving as much revenue as it should because of the unclear navigation on its website.
Users are unable to complete their desired tasks because the current website is hard to navigate. This is a problem because it causes frustration and users will leave the website, causing Capitol Hill Books to lose revenue and users without their desired products.
01 DISCOVER
This is the stage where it is vital to get a grasp on where users are coming from. In order to fully understand users, I completed a C + C analysis to see what competitors offered. I looked through the current website and asked myself a few questions to keep in mind throughout the project.
1. Are users able to access the products they would like?
2. Is it easy to navigate the website?
3. Can users complete their desired tasks in a timely manner?
4. What is currently working, and what is not?
COMPETITIVE ANALYSIS
COMPARATIVE ANALYSIS
These are good comparators because Evelyn could easily use these websites to buy gifts for her grandson, as they produce search results in a much more streamlined manner that is much easier to understand and navigate.
After comparing and contrasting Capitol Hill Books to its competitors, I saw why those websites brought in a lot more traffic. They offered features that were not in Capitol Hill, especially the most important option for Evelyn. The ability to order a book as a gift and having clear shipping estimates.
Overall, Capitol Hill’s website was pretty easy to use, but the gross amount of book categories made it extremely hard to navigate. Additionally, it was missing out on a huge demographic of users, because it limited itself to historical literature. From my competitive and comparative analyses, I was able to surmise that other competitive companies were driving over one thousand more customers because of their product variety. Therefore, Capitol Hill Books should open up its product base to include newer releases and popular books on the market, rather than just historical pieces.
02 DEFINE
This stage helped define problems and areas of opportunity. I took into consideration the given archetype of 'Gift Giver' when developing a persona which led to finding pain points and users needs, leading up to a problem to focus the project on.
PERSONA
Part of the project included a given archetype of 'Gift Giver,' so I based my persona on that. The persona was extremely helpful to look back on throughout the design process because it reminded me of the why. It turned the problem statement and “how might we statements” into an empathetic approach to finding ways to answer the question. It was vital in reminding me to focus on what would best benefit the user.
Evelyn Edwards
“I am looking to order books for my grandchildren's varying milestones.”
Age
Evelyn is 65, and recently retired from owning a successful floral shop.
Behaviors
Evelyn has five grandchildren, and loves to gift them with books appropriate for their age.
Frustrations
Evelyn is not tech savvy, and has difficulty navigating the internet as a whole. She was frustrated that she could not filter the selection by price and age range, causing her to spend longer time than necessary on the website. This is especially frustrating for Evelyn, because she likes to purchase her gifts quickly without too much thought.
USER NEEDS
-
Affordable pricing
-
Sort through age appropriate material
-
Navigate quickly through the website
-
'Gift' option when ordering
PAIN POINTS
-
Information overload
-
Hard categories to navigate
-
Unclear shipping status
PROBLEM STATEMENT
“Users are unable to complete their desired tasks because the current website is hard to navigate. This is a problem because it causes frustration and users will leave the website, causing Capitol Hill Books to lose revenue and users without their desired products.”
HOW MIGHT WE STATEMENTS
How might we organize Capitol Hill Books in an orderly fashion where users can find desired products?
How might we edit and recategorize titles to better fit the book content?
How might we provide a smoother checkout process for users?
How might we browse best-sellers and see what is popular amongst other users?
How might we filter products by price range, age, and similar demographics?
CARD SORT
For the open card sort, I was pleasantly surprised. Overall, there were many variations of common threads for categories used to title the products. Most users categorized mostly the same TV and movies together, coming up with similar names to categorize the products. Titles such as “cooking,” “history,” “kids” or “children,” “games,” and “travel” were very popular. Overall, it was very interesting to pick a part the card sort to see what different users associate groupings with.
For the closed card sort, I thought that the titles were simple enough for users to categorize the products into. It was interesting to see my own bias involved, and how it didn’t exactly play out that way. Instead, 67-100% products were placed under the correct category. I think for the future, conducting more open card sorts to obtain more robust data would translate better into a stronger closed card sort. I also did only have three users for the closed card sort, so that may have limited my data too.
03 DESIGN
Early ideation was to create a visually appealing website (for both desktop and mobile) where users could browse through books to purchase. Additionally, each book would have reviews available, price clear, and easy shipping information available. Having all of that on the product page of each book (and multiple listings together) would make finding and purchasing a book easier and quicker.
SKETCHES
Sketches helped me ideate many ways to approach the site redesign and decide which direction to go in.
MID-FI WIREFRAMES
Wireframes were helpful as a stepping point to the clickable prototypes, and bridged the gap from the sketches into the prototype.
USABILITY TESTS
Initial User Testing: First Round
I tested if users would be able to:
-
Browse all categories, select ‘Children,’ and view You Can’t Take an Elephant on the Bus.
-
Add You Can’t Take an Elephant on the Bus to cart and checkout.
60% of users completed task 1 with no errors.
50% of users completed task 2 with no errors.
This spoke volumes to me about how my design was not as effective as I'd liked and needed to be iterated upon.
Design Iterations: First Round
I played with more color variety for ease of spotting CTA’s, etc. It was hard for users to navigate smoothly with just the blue as an accent color.
04 DELIVER
The addition of applying Gestalt's Laws and making sure color, spacing, font, etc. were clear and consistent made all the difference in how easy the website was to navigate. This is of utmost importance because we want our target user, Evelyn, to feel comfortable finding and purchasing books to gift. Now, the website is more inviting for users of all ages, helping to make sure that the Capitol Hill Books' website will attract more users with diverse age demographics.
NEXT STEPS
Continuing this project, I would add the ability to look at past orders and recommend books off of that. The whole point of Capitol Hill Books’ redesign was for user functionality and as Evelyn is our predominant user, this would be extremely helpful for her to quickly purchase a new gift.
More Projects
Spark
Research and design validation for an up and coming networking app encouraging in-person connection.
Venmo
Feature redesign for one of the most popular transfer payment apps on the market today.