Homepage Redesign
Brooklyn Public Library is the nation’s 6th largest public library system, serving Brooklyn’s 2.6 million residents. It is a leader in cultural offerings, literacy, and out-of-school-time services.
Opportunity
I assessed the information architecture of the Brooklyn Public Library's current website since it needed better navigation to make users' searches more effective. I found other areas for improvement throughout the audit process.
Outcome
I redesigned the navigation structure of the website, to improve the way users are guided to their desired pages. I also increased the accessibility of the website to people with color-blindness, by improving the color contrast and using a cohesive color system throughout the website.
Navigation restructure
Horizontal navigation with drop-down menu.
Sub-navigation side bar
To optimize search that gets you to the right page.
New categories
Each page goes in a category that makes sense to users.
The process
I will walk through what types of research determined how we redesigned the information architecture of the website. On the left is a list of research methods we used to understand, assess, discover and learn about the website and the users. On the right is a list of what we executed to get to the final prototype.
DISCOVER + RESEARCH
Usability Test + Qualitative Interview
Competitive/Comparative Analysis
Mission Model Canvas
Mobile View Audit
Heuristic Evaluation
Open Card Sort
Closed Card Sort
Sitemap
DEFINE + DESIGN
Design Studio
Proposed Sitemap
Wireflow
Mid-Fi Wireframes
Usability Test II
Iteration
Hi-Fi Wireframes
Final Prototype
Archetype
To discover the behavior in using the website, we created an archetype that we referred to throughout the research. It was used to validate interactive elements and user flows at a macro level.
“I need to keep my son busy every summer, and I have to sign up for camps before they get full.”
- April, mom of a 7 year-old
Understanding the existing website
User interviews
I conducted user interviews to find out if users could navigate the website intuitively.
I asked 5 parents on their first impression of the website, here are some of their comments:
I asked 5 parents on their first impression of the website, here are some of their comments:
"The navigation bar on the left is not noticeable."
"There are too many links within a category, it looks crowded."
"It's very colorful, the bold colors on every page seems busy."
Usability test
To find out how the users interacted with the website, I asked the same 5 parents to use the current website and complete tasks that were related to summer planning for their kids.
Insights from the parents
Navigation features to incorporate
With the user research insight we mind, I did a Competitive Analysis to research on the organizations that are similar to BPL, I compared their websites by the type of navigation they use and which ones organize their content intuitively to users.
Is it user-friendly?
I evaluated 5 kid-related event/class pages in 10 Heuristic categories, the chart below shows average rating for each one. It was rated by how the website performed compared to the best practices. On the right below are the four areas that had the lowest rating with the most opportunity to improve.
click on image for a larger view
Get the content in the right place
I conducted Open Card Sort with 5 users to see how they grouped the website's navigation content into main categories that made sense to them.
Users did not realize that "Borrow", "Learn", "Attend", and "More" were the current website’s main navigation categories. The blue cards below are the categories suggested by users that I added to the navigation.
Defining the problems
Most users had trouble finding the content they were looking for through the navigation. Most of them resorted to using the search function. If users were unsure what to look for, it would have taken them a longer time to look around to find the result.
Here are our main research insights (problems) and the solutions that I incorporated into the redesign.
Understanding the structure
To further understand the structure and why users had trouble using the website's navigation,
I created a sitemap of the current website.
I created a sitemap of the current website.
FINDINGS
• Two of the navigation categories have more than 20 links, causing the sub-navigation window to look crowded and confusing.
• Some of sub-categories can be removed because they are redundant. (blue boxes)
• More acts as a miscellaneous category.
• There are no links for some of the pages within the website.
click on image for a larger view
Sitemap
I redesigned the site map to address some of the problems we noticed in the current version.
SOLUTIONS
• Reduced the number of sub-categories significantly, from 21 to a maximum of 11.
• Less duplicated pages in multiple categories.
• Based on the learning from Open Card Sort, we added new categories to redistribute the content.
• All the miscellaneous sub-categories are reorganized and moved to their respected categories.
click on image for a larger view
Mid-fidelity design
I converted the existing website pages to grayscale for the purpose of the before and after comparison.
HOMEPAGE
I changed the navigation bar to a horizontal format with a drop-down menu, to solve the problem of the left main navigation being not noticeable.
EVENTS
By adding a sub-menu on the left, users can get a better navigation control within the category. A sub-page within the category helps direct users to the right page faster.
FOOTER
To streamline the sub-menu, I moved some general info about the library to the footer.
How our redesign performed
I conducted usability tests for the existing and the redesign website,
There were 10 participants, 5 for each round, to complete the same tasks.
The test results below show that the success rates for all three tasks went up significantly.
There were 10 participants, 5 for each round, to complete the same tasks.
The test results below show that the success rates for all three tasks went up significantly.
User's feedback
• Clean and straight-forward layout.
• Organized navigation.
• Still confusion on where to find Culture Pass.
• Summer Camp is a seasonal program, it should be a
"Featured Event" instead of a sub-category.
"Featured Event" instead of a sub-category.
The Redesign shows an overall average of
47% improvement from the current website!
47% improvement from the current website!
Phase 2- simplifying the color system
According to user tests, color was an issue for participants. I continued my exploration of the website's user interface by making the prototype fully colored.
Current website
Users expressed that the website was looking inconsistent due to the different color theme on each page, and the white text over color back-grounds failed the color contrast test, making the website unsuitable for people with color-blindness.
Proposed Redesign
I created a cohesive color system throughout the website. All the UI elements are in shades of blue. Users responded well to the hero image on the homepage, so we added a hero image to every section to create a delightful experience for users.
Wireflows
Here is a look at the user flows of three scenarios showing
how parents can plan for their kids' summer activities.
how parents can plan for their kids' summer activities.
Protoype
View the video of the prototype, or click HERE for the InVision prototype.
Next steps
Conduct Usability Tests on the high-fi prototype, to get feedback on the color of the proposed website.
Additional round of closed card sorting with goal to further increase the success rate, to prove that
users can navigate the website intuitively.
users can navigate the website intuitively.
Ensure the website meets all the ADA compliance requirements.
