Information architecture redesign to improve website navigation
My Role: UX Designer
Duration: 10 Days
Status: Complete
About the Library:
As one of the nation’s largest public library systems, Brooklyn Public Library system is recognized for its significant and exceptional contributions to the communities in Brooklyn.
Background:
During pandemic, the library system has been providing all services virtually via the Brooklyn Public Library (BPL) website. Through our research, we found that the library patrons were experiencing difficulties with the site's navigation.
Problem:
​
How might we provide BPL patrons accessible information on services and resources via the library website?
Outcome:
-
Redesigned BPL homepage
-
More organized information architecture
-
Improved website heuristics
-
Streamlined BPL branding
Impact:
-
Made library content more effective and sustainable
-
Facilitated circulation information access during quarantine
Facilitate access to
#ForBrooklyn
Slide to See Existing & Proposed Sites
Understanding the Library
In order to fully understand the organization structure and operations of BPL, our team started the research phase to gain insights on its unique value proposition. We leveraged a mission model canvas to map out how BPL serve patrons and gather supports.
Brooklyn Public Library:
an institution that offers everyone the dignity and exhilaration of learning.
Brooklyn Public Library:
a democratic space where everyone can come here to learn & explore regardless of economic standings
Competitive Matrix
A competitive matrix was generated as a visual aid to place the BPL among its competitors in terms of the number of services provided and the cost of the services.
BPL stood out for offering the most varieties of services with little to no cost.
Competitive Feature Analysis
We conducted a competitive feature analysis, where we compared the existing BPL website features to its close competitors.
We discover that BPL offers more features than most competitors. We concluded that the vast number of features and services BPL offers made it difficult to organize and present on a webpage.
Understanding the Website
A First Look
Hover mouse to see annotation of current BPL Home Page
3 cups
Flour
Ambiguous Left-aligned Navigation
Breaks Modern Convention
Color Block Banner
Unrelated to Books below
Large Search Bar
Blocks Hero Image
1½ cups
Butter
Site Map
It is crucial to dissect the existing BPL website before we can pinpoint the problematic design. A site map was produced to provide an understanding of current site's structure.
We learned: The confusion from using the website to navigate roots from the misplacement of navigation items. Furthermore, items with different granularity and hierarchy were placed under the same category.
User Flow
We also generated a user flow diagram to illustrate all the possible pathways a user could take to complete a task (find a new-released non-fiction book to borrow) on the current BPL website.
We learned: Users are unable to tell if a book is available until they click on the book. Furthermore, each book opens to an external page, making the browsing experience very disorganized. A filter for book availability needs to be placed to reduce the browsing time and frustration. However, the primary and secondary navigation items involved (“Borrow” and “New Arrivals”) are clear and functional.
Heuristic Evaluation
We conducted a heuristic evaluation of the home page, New Arrivals, Online Resources and Event Calendar pages. This enabled us to determine main design items that violate best practice. Specifically, we used Abby’s Method of heuristic evaluation.
Recommendations were provided for each heuristic on the full evaluation document.
We learned: Some pages open into new browser tabs, while others remain in the current tab. Inconsistencies such as this provide the user with less perceived control in how the site works. Additionally, error messaging is not specific enough to help the user correct the issue, and some filtering options within the catalog search do not function as intended, leaving the user frustrated and not in control.
Understanding the Patrons
In order to understand BPL patrons' mental model, we studied the client website extensively and conducted tree testing and card sorting. We created three scenarios and tasks for one round of tree testing on the existing primary and secondary navigation items of the BPL website.
Tree Tests
It allowed us to understand the effectiveness of the site’s current labeling taxonomy and it’s reflection on the site’s information architecture. Three tasks were chosen to examine participants ability, directness and time on task.
19%
of users were able to borrow a new non-fiction ebook
81%
of users were able to find a virtual book club
94%
of users were able to make a donation of $35
We learned: though "borrow a book" had a significantly lower success rate, first-click data indicates that 75% of first clicks began directly, implying a breakdown in secondary navigation. This is supported by the observation that this task had a significantly higher failure rate compared to other two tasks.
Card Sort
In the closed card sort, we used the existing primary navigation of the BPL website. Participants were asked to place the 60 secondary navigation items with each of these primary categories.
For the open card sort, we allowed users to create their own primary navigation categories as they saw fit. The mean number of categories used was 8.
36%
cards were placed inside the current primary navigation
64%
cards were placed outside the current primary navigation
We learned: Participants want items categorized into more than the existing 5 categories to break down the numerous services and products provided by the BPL into more manageable and understandable categories.
Proposing a Redesign
Taking what we learned from the potential users and our own analysis, I proposed a redesign focusing on reconstructing the primary navigation and the borrowing feature.
Proposed
Site Map
A proposed site map was produced to illustrate the changes I made on the original website's primary and secondary navigation items.
What Changed?
3
1
2
Original
-
4 primary navigation items that are ambiguous
​
-
10 secondary navigations that links to external pages
​
-
16+ secondary navigation items under "Learn"
Proposed
-
6 primary navigation items named after the types of services provided
​
-
4 secondary navigations that links to external pages
​
-
< 9 secondary navigations under each primary navigation item
1
2
3
Proposed Home Page
A proposed home page focusing on the primary navigation and the borrowing feature of the BPL site. A dark mode was designed to take account of patrons' prolonged computer usage while browsing.
Clear Local Navigation
Hero Image Clear and Center
Expanded Primary Navigations
Search Bar Reduced in Size
What Changed?
3
1
2
The original secondary navigation items were grouped by age, occupation, and nationality. During the first round of open card sorting, all users did not place indicated items under the same category. Users created 3-4 categories to further separate these secondary items.
The proposed secondary navigation items are grouped by the content of the program with clear language. A short summary and a featured content of the section are also provided to enhance users' comprehension of this navigation category.
​
​
​
​
Indicated items were placed under other primary categories by majority of users in the first round of closed card sorting.
The proposed navigation removed the ambiguous primary navigation item "learn", and re-distributed these indicated items appropriately throughout 3 other primary navigation categories.
1
2
.png)
1
2
Card Sort
A second round of closed card sort was conducted to validate the structure and verbiage of proposed primary and secondary items. There are 36 cards in total and 6 categories for participants to put cards into.
​
The result showed a significant improvement in cards sorted inside of the categories.
70.6%
cards were placed inside the current primary navigation
29.4%
cards were placed outside the current primary navigation
We learned: The second round of closed card sorting showed an improvement in time and accuracy compared to the first round. Users were able to sort faster due to the decrease in cards. However, we noticed that all of the participants placed the age category such as “Kids”, “Teens”, etc in the “Books + Media” category. This is correct without context and should be addressed with future iterations and more rounds of closed card sorts with label descriptions.
Key Takeaways
From research:
​
-
BPL provides a free space where patrons of all economic standings can avail themselves and their children of cultural and educational programs.
-
during pandemic, when the physical space is not available, the BPL website has become a barrier for its patrons to access the broad range of online services.
​
From testing:
​
-
users of different age and background categorize items differently
​
From project:
​
-
website navigation should be a guide not a roadmap
-
never assume everyone has the same mental model without testing
Future Steps
We plan to take in account of the results and explore the possibilities of expanding the primary navigations. This could help with the misplacement of “Support Us”, and the secondary navigation item “Donate”.
​
Heuristics such as user’s control and delight could be further improved on. More deliberate addition of micro-interactions will increase the rewarding feeling that encourages users to visit and browse the library site more often.
We also would like to explore the possibilities of adding hover states on each book or media item to minimize the external page opened when browsing library contents.