Brooklyn Public Library’s Website Navigation Redesign
My Role: UX Researcher | Duration: 2 Weeks | Project Status: Ongoing
Project Overview
In this case study, we examined how users hunt for information and entertainment on the internet. We looked at the Brooklyn Public Library’s business structure, services, features, and users to better understand the user's problems. Once enough research was done we took these ideas and brought them to life!
Scope of Work
BPL has asked us to assist them in redesigning their website's navigation.
Process
We kicked this UX journey off by conducting business research. Once we had a good idea of BPL’s business model, services, competitors, and comparators we moved into our user research. BPL handed us a persona of their target audience that previous research had uncovered. We leveraged this to focus our scientific approach when conducting things such as Tree Studies, Card Sorts, and a Heuristic Evaluation. Finally, we moved into design and created sitemaps, user flow
Problem Space & Statement
Reviewing and culminating the takeaways from each study gives us a good idea of the problem space existing in the navigational features of BPL.
Persona
BPL has done previous research on its target audience and created a persona. We focused all of our research on Priya to make sure we didn’t just design things right but designed the right thing.
Problem Statement
“How might we change the site's main navigational system to create a user journey that is tailored to address our user's problems and needs?”
RESEARCH PHASE
Goal of Research
We knew starting that we need to do some research before jumping into feature changes or layout redesign. To get a good sense of direction we need to answer three questions:
• “What are we doing and how do we conduct our business?”
• “What are our competitors doing?”
• “What are our users doing?”
Methodology
To dive into exactly how we went about discovering this information we implemented many business and user research tactics. For business research, we created a Business Model Canvas, Competitive Matrix, Competitive & Comparative Analysis, and a Heuristic Evaluation. For user research, we conducted Tree Studies and Open and Closed Card Sorts.
BUSINESS RESEARCH
Business Research Overview
Business research is our chance to get to know BPL intimately. We accomplished this by conducting different studies of BPLs internal structure, and its competitors.
Business Model Canvas
Overview
We took a closer look at the BPL's internal operations and services by creating a Business Model Canvas.
Methodology
We conducted a study by mapping out their business into the Business Model Canvas. We took a look at their partners, activities, resources, and propositions. We also took into factor things like budget and revenue streams, channels through which they are reaching users, and their relationships with users.
Reasoning
Business Model Canvases are vital to understanding how an organization or company operates. When mapped out, we can see the guiding principles behind the actions and decisions organizations make in their day-to-day operations.
What We Learned
• The Canvas showed that the Brooklyn Public Library seeks to provide educational and professional library services to the community in Brooklyn.
• Offer programs for varying age groups and online resources for research.
• Partner with other companies and organizations in the area to help in their involvement with the community.
Competitive Matrix
Methodology
We conducted a study of BPL by mapping out their competitors into something called a Competitive Matrix.
Reasoning
Competitive Matrices visually represent businesses and organizations with similar services to our clients. From this, we can take note of what features of the company work and figure out what is missing overall in the industry marketplace.
What We Learned
• Podcasting companies and museums also offer research opportunities and virtual content for education and entertainment.
• Libraries are not the only organizations or companies that offer certain services.
Competitive & Comparative Analysis
Methodology
We conducted a study of BPL by mapping out their competitors and comparators into a Comparative Analysis.
Reasoning
Comparative Analysis’ visually represents organizations features side by side so we can see what we offer that other organizations don’t and what features they offer that BPL doesn’t.
Competitive Feature Analysis Chart
Competitive Feature Analysis Chart
What We Learned
• Podcasting companies and museums also offer research opportunities and virtual content for education and entertainment.
• Libraries are not the only organizations or companies that offer certain services.
Heuristic Evaluation
Methodology
Heuristics are a set of guidelines for evaluating the usability of a site. They describe common properties a user interface should possess. We utilized the Abby Method. The Abby Method specifies ten specific criteria to evaluate.
Reasoning
We utilized heuristics to get a good mental idea of what things are already being done right or wrong. It helps to go into user research with a general idea of a user's journey to better empathize with them.
Recommendations
Findable- Broaden the results per keyword, and consolidating the two separate catalog pages into one universal search function.
Accessible- Fix the sizing and page organization when translating pages into the mobile site, add more keyboard shortcuts, add live text to all buttons, and change the color schemes of pages to accommodate colorblindness.
Usable- Make processes more prominent, search results more accurate, and the catalog more browsable.
Controllable- Make scrollable list scroll in both directions.
Learnable- Make buttons/links to pages throughout the entire site, and add a clickable path that represents the page hierarchy.
Delightful- Add more pop to features and buttons
USER RESEARCH
Tree Testing
Overview
We created and conducted 2 rounds of Tree Tests.
Methodology
Tree testing is a common practice used to measure navigation on a website. Participants in these studies are given tasks and are asked which steps they would follow within the established website hierarchy to complete the tasks. We tested 10 participants.
Reasoning
Tree Testing helps us understand how users flow through a task. We can see if they can locate a task, how fast they were able to, and how direct they were in finding the feature. We are also able to see if users think something exists where it doesn’t and the trends across multiple users.
Tree Testing: Round 1
Task 1
Task & Results
“One of your favorite authors just released their latest novel. Go to where you would find it.”
Average time on task: 15 seconds
Success rate: 53%
Directness: 87%
Task 2
Task & Results
“There’s an art exhibit happening at the library. Go to where you can find more information about it.”
Average time on task: 17 seconds
Success rate: 67%
Directness: 60%
Task 3
Task & Results
“You’re researching the history of Brooklyn for an art exhibit. Locate this information on your library’s website.”
Average time on task: 18 seconds
Success rate: 80%
Directness: 67%
Tree Testing: Round 2
Task 1
Task & Results
“One of your favorite authors just released their latest novel. Go to where you would find it.”
Average time on task: 15 seconds >> Down 6 seconds
Success rate: 53% >> Up 29%
Directness: 87% >> Up 4%
Task 2
Task, Results & Differences
“There’s an art exhibit happening at the library. Go to where you can find more information about it.”
Average time on task: 17 seconds >> Went up by 2 seconds
Success rate: 67% >> Down 3%
Directness: 60% >> Down 5%
Task 3
Task, Results & Differences
“You’re researching the history of Brooklyn for an art exhibit. Locate this information on your library’s website.”
Average time on task: 25 seconds >> Went up by 7 seconds
Success rate: 64% >> Down 16%
Directness: 27% >> Down 40%
Takeaways
• Negative Results in task 2 & 3
• Needs reiteration
• Third round of tree testing should be done to improve direct successes
Card Sort Studies
Overview
The next step was to conduct open and closed card sorts.
Methodology
Card sorting shows how a user would organize and categorize a website to make a hierarchy that is catered to the user. Closed card sorts have predetermined categories for the organization, and open card sorts allow the users to create their own.
Reasoning
Open card sort gives the ability to see how our users think information is categorized. The first round of closed card sorting lets us see if the way the information is currently displayed is where users would put it. The second round of card sorting is to compare our redesign to the first card sort.
Open Card Sort
Results
Below groups of the data gathered from the open card sort.
Participant #1
Insight
• This participant chose to create an entire category for kids, unlike the existing hierarchy that does not have one.
Participant #3
Insight
• One out of five participants organized the cards into two age groups.
Participant #5
Insight
This participant was focused on specific divisions of content into unique categories, such as “search by demographic” and the merged “borrow” and “shop”.
From Research Insights to Design Features
- Insight >> Feature- Related elements need a menu so we moved all digital media into a new category
- Insight >> Feature- BPL thrives off of donations so we made the button big and red to call attention
- Insight>> Feature- Cluttered primary navigation so we moved all tertiary elements to a dropdown
DESIGN PHASE
Current and Proposed Sitemaps
Insight
There are a ton of Tertiary elements just sitting in the same place as the secondary navigation. Also many names are actually a demographic for a category.
High-fidelity Iterations
Overview
Below are my High Fidelity Mockups for the redesigned navigation of the BPL’s website.
Home Page
Borrow Page
Discover Page
Attend Page
More Page
Prototype Link
https://www.figma.com/proto/CJSROyrRieqYVpFwE5hrYP/Brooklyn-Public-Library-Redesign?node-id=10%3A186&viewport=227%2C96%2C0.11460662633180618&scaling=min-zoom
Summary, Insights, & Recommendations
From our research and redesign, we have drawn some insights. Our research showed decreases in the ability to complete tasks in the second rounds of Tree and Card Sort studies. Our information consolidation showed success in eliminating unnecessary items from the user's eyes.
Recommendations
• Conduct another round of tree studies and card sorts with a new categorization
• Conduct Usability Testing on the new site prototype
• Keeping the new secondary navigations in all studies