Wading Through the Brooklyn Public Library Website
“Design is like a mom, nobody notices when she’s around, but everybody misses her when she’s not.” — Santiago Borray
Introduction to Information Architecture
General Assembly UXDI Galápagos, Project 2
My Role: UX Researcher with Kat Banas and Odelia Hoey
Duration: 1.5 Weeks | Project Status: Complete
Project Overview
The goal of this project was to understand the Information Architecture of a website and how this underlying structure relates to the navigation.
The Project introduced us to the following Business analytic tools and UX methodologies;
- Mission/Business model canvas
- Competitive Matrix
- Competitive and Comparative Feature Analysis
- Tree Studies
- Card sorting
- Heuristic Evaluation
- Site Mapping
- User Flows
Scope of Work
The Problem Space was the existing Brooklyn Public Library website: www.bklynlibrary.org. The re-design was limited to the primary and secondary navigation.
Problem Space Statement
We hypothesised that the confusion reported by the users of the Brooklyn Public Library website was due to a poorly designed navigation.
Process
We followed the Double Diamond framework of UX development.
First Diamond: Design the Right Thing:
Discover: Research based on our initial hypothesis.
Define: Take the research findings and determine what problem needed to be solved.
Second Diamond: Design Things Right.
Design: Design a solution, test it and refine it.
Deliver: We are not yet at the point of delivering a final product.
DESIGN THE RIGHT THING
Discover
We set out to test our Hypothesis that users have trouble navigating the Brooklyn Public Library website.
Business Research
Mission Model Canvas & Competitive Matrix
The Mission Model Canvas, a version of the Business Model Canvas provides an overview of a non-profit organization. The Competitive Matix places the organization and its competitors on a two dimensional grid. We mapped the BPL against Internally or Externally produced content and the whether that content was general or targeted. Goal of Research We set out to test our Hypothesis that users have trouble navigating the Brooklyn Public Library website.
Both methods were used to ground our understanding of the Brooklyn Public Library.
Competitive & Comparative Feature Analysis
We analysed the homepages of 5 Competitors and 5 Comparators websites and compared the features to that of the Brooklyn Public Library. This Methodology can reveal:
- Must have features, common to all businesses
- Innovative features which could be applied to the BPL site
- Opportunities for innovation
- Places where we wouldn’t want to ‘Reinvent the Wheel’
The 5 competitors were competing in the space of providing informative content and community-service programming:
Four of the 5 comparators were NYC non-profits operating in different spaces, but they were also competitors in the large institutional non-profit sector:
Key Takeaways:
- BPL website was consistent with Industry Standards
- BPL was unique in having a shop and a focus on Teen content
- BPL lacked a blog to communicate with users
- BPL labeling was sometimes opaque: “Let’s Do the Work” masked the content of a Black Lives Matter section.
- The Lincoln Center at Home stood out as a homepage fully redesigned for the pandemic realities.
User Research
Persona
The Brooklyn Public Library provided us with the Persona of Kelley who represents the typical library user. Design requires empathy with the user. A persona gives a designer a user they can relate to. Usually a persona is the result of research, here the tasks posed during the research were set from the perspective of Kelley.
Tree Test Study
This study asked 5 users to navigate a simulation of the current website to complete 3 tasks a library user might undertake, and measures the direct or indirect success or failure rate. This can give insights into how intuitive the navigation is
- Borrowing Something: You live in the Gravesend neighbourhood. You want find out which movies are available at your local branch.
- Researching Something: You have been working in the USA for five years on a Green Card and are now eligible to become an American. Find the study guide that will help you prepare for the test.
- Buying Something: Find yourself a “Emotionally Attached to Fictional Characters” T-Shirt to purchase.
Results:
- The break points of the first task were the concept of Borrowing a Movie from the library and the labelling of Branches as Collections on the faceted navigation on the results page.
- The “Learn” primary navigation category is not aligned with the idea of browsing for information.
Key Takeaways:
The labeling of categories at all levels of the navigation is problematic.
Open and Closed Card Sorting
Card Sorting is used to see how users group information. Users were given 58 cards representing the categories in the secondary navigation of the current site and asked to sort them into groups of their own design (Open Card Sort) or under the 10 Primary Navigation Categories the library currently uses (Closed Card Sort)
Results:
- Open Card Sort: Users created 33 categories, none were named the same but 6 common clusters under various synonyms were obvious.
- Closed Card Sort: Only 37% of the categories were sorted into the right category.
Key Takeaways:
- Users have many mental models they use to organize information. In a large complex site this leads to a low rate of agreement on categories
- No users clustered items in any group that resembled the Learn category used by the library.
- Classes were associated with events and aligned with the Attend category the library currently uses.
- The cluster of Ages was associated with the Content that can be Borrowed category, not the Classes for different age groups that the library uses.
- The “Learn” category is confusing. Classes are associated with attending, not learning.
- Users think of Borrowing in terms of what can be borrowed, not the logistics of borrowing an item.
Heuristic Evaluation
A Heuristic Evaluation measures a website against industry standards. We looked at the homepage and 3 pages associated with browsing for a book using the ABBY Method which outlines 10 criteria for a good website
Results:
None of the mean scores for all 10 criteria across the 4 pages met industry standards.
Key Takeaways:
- Navigation and information architecture are top priority for improvements.
- Use of organization specific language should be replaced with common words to improve clarity.
- Improvement of communication and user orientation within the website> The use of color to place a user in different sections is inconsistent.
Site Mapping
In order to understand the information architecture of the website we analyzed the URLs of many pages to tease out the hierarchy of the site.
Results:
17 Primary Level Categories rooted to the bklynlibrary.org domain and 4 subdomains for shop, donate, catalog and get a library card
The existing structure of the site is divorced from the existing navigation.
- Primary Navigation Categories with no corresponding Category in the Information Architecture: example “Attend”
- Primary IA categories grouped under a single Primary Navigation: example: Borrow Menu has borrow.bklynlibrary.org, disc.bklynlibrary.org, Digital Collections under it.
- IA categories not at same hierarchy level as the logically similar categories: Example: Strategic Plan and About are IA primary, Other About categories like Leadership, Publications and Media are IA secondary.
- IA categories not named consistently with navigation categories.Example: Tech is displayed as Computers and Internet.
Key Takeaways:
Insights: Information Architecture needs to be realigned with Navigation scheme
User Flow
A User Flow analyses the routes a user can take to get to a destination on a website, the Happy Path is the easiest and most intuitive route. We assigned the persona Kelley the task of browsing newly arrived e-books in the Arts & Entertainment Genre. The first decision point leads her down Searching the Catalog or Navigating through the Borrow Menu paths. Link to User Flow
- Search Choice leads page with 1 result.
- Navigate Choice leads page with 57 results.
- All paths require steps that fail Heuristic Standards of clarity, findability and utility.
Key Takeaways:
Reflects a major issue with underlying information architecture.
Define
The hypothesis we started with was validated, buy the research. We were able to define the following areas that need to be addressed.
The Navigation often bears no resemblance to the underlying information architecture of the site
The hierarchy within the navigation is neither clear nor consistent, and it violates well established web design norms that users are conditioned to.
The labels within the Navigation are either confusing: Learn, Attend or inaccessible jargon Collections in place of Branches.
People use many mental models to organize information. In a large complex site like the library this means a single organizing solution is hard to define.
To return to the persona of a regular library user we might frame the issues like this
Kelley loves to read, both fiction and non-fiction and she is hungry to learn new things. As struggling twenty-something in Brooklyn she can’t afford to buy books so she is a regular at her local library where she enjoys browsing the shelves for new books. During the coronavirus pandemic the library has shut.
As a result Kelley has to access the library through the website, but she cannot figure out how to replicate an in-person visit. She misses stumbling across new things.
How might we redesign the virtual library experience so Kelley can wander the aisles in search of that unexpected gem.
DESIGN THINGS RIGHT
Design
Proposed Site Map
The redesign started with a new site map.
We reduced the number of primary navigation categories from nearly 20 to 8.
Borrow Catalog search is divided into categories by format type and new and recommended categories
Events & Classes (was Attend) with secondary navigation organized by category of the event/class. The previous navigation label Attend ignored that many people associate classes with learning rather than attending.
Resourses (was Learn) As in information you might search for, with secondary navigation organized by information category.
Services New Category for non-group in-person services provided by the library, draws on related categories from 4 branches of the existing tree.
Join the Library New Category draws on related categories from 2 branches of existing tree.
About Combines 3 Primary categories in the existing tree.
Support: Existing category with Donate moved under it.
Shop: Existing category.
Redesigning the Navigation
Once we had determined the new navigation structure the next step was to integrate it into the existing site. We did this rather than develop a whole new look as it was cheaper. Below are images of the proposed homepage with discussion following.
We believe the current bright color scheme is appealing to the younger audience that the library must capture, but our Heuristic evaluation of the site noted the use of color to identify the different sections of the site is inconsistent. We took the existing colors, assigned new colors and developed a horizontal primary navigation with a drop down secondary menu resembling a library index card.
The card sorting research suggested that people categorize information in a variety of ways and some logical groupings such as by topic and age could apply to several navigation categories. To cater for the different mental models we proposed the library didn’t try and force users into a box, but endeavor to cater to common mental models when it came to the display of the secondary navigation.
Therefore we introduced a shaded section on the secondary navigation index card to call out other information. Most users thought that borrow meant borrowing something from the library, but what if someone went to borrow looking for information about how to borrow something? So we added that in.
The redesign also fixed some other issues we had discovered, and the same navigation was used on subdomain sites to make the experience seamless.
High-Fidelity Prototype
A high fidelity prototype of the proposed navigation was built in the prototyping program Invision.
Invision was unable to have the dropdown remain if the user moved off the hotspot over the drop down as if they wanted to click an item on the menu, but disappear if the user moved off the hotspot onto another part of the page, as if there was nothing on the menu they needed and they wanted to explore the other menus. We hacked this by making the hotspot larger, but it can only cover the part of the menu directly below the navigation tab, not the whole of the menu card.
Testing the Proposed Navigation
We repeated a Closed Card sort with our new navigation categories. We don’t believe this test was well suited to the proposed navigation as he Resources category has 26 topical categories that could easily be confused with genres of book or an event or class, and were often sorted that way.
Also the Test did not allow for duplication of categories among the Resources and Events and Classes navigation categories.
We repeated the tree study with the proposed navigation replacing the shop task with a task requiring users to find an author event. There were issues caused by repeating the other two tasks as the new navigation offered competing options that were not obvious in the existing navigation. The results were not strictly comparable, but first click data suggested that the Resources and Classes Events labels are more effective than the old Learn and Attend ones.
Deliver
Next Steps
The project ended at this point, were we to recommend next steps they would be:
- More Tree Studies and A/B testing of the new navigation. As this is the foundation of the site it needs to be better validated.
- Dealing with other issues that have been flagged:
- Jargon on pages lower in the hierarchy
- Consistent use of alt tags to ensure accessibility
- Ensuring 1 search doesn’t produce different results depending on whether it followed a Search or Navigate path.
What I Learned
This was a challenging project with several new techniques introduced. As with all things in the UXDI course at General Assembly time was limited. I am discovering I can’t do all the work and have it be perfect, but this helps the learning process. As I write this case study a week later I can see how we could have done this differently or better.
