NO SLEEP TILL BROOKLYN public library’s website homepage is redesigned!
My Role: UX Researcher | Duration: 2 weeks| Project Status: Ongoing
BPL came to Bortech looking for some professional help redesigning the information architecture of their website. So we dove right in!
To begin our process of redesigning the homepage of the Brooklyn Public Library, or BPL, our team of experts conducted a business model canvas to analyze what the BPL has to offer in terms of services, items and events. Business model canvasing allows us to collate what makes our product unique and valuable to users, what to focus on enhancing, and how our company operates.
Our team got together, extensively investigated the BPL website, and then used the Business Model Canvas method to break down what key services the library offers based on our observations.
Our key takeaway from our business canvas can be summed up as
“Lots of services for lots of people”.
BPL offers a multitude of resources to its community. Extending beyond the realm of “standard library services” The amount of services offered to a wide-range of people aligns with BPL’s mission of being a public service.
After completing our Business Canvas and gathering key takeaways, we moved on to a Competitive Matrix. Competitive matrices allow us to see differences, similarities, and weaknesses within the services the library offers compared to competitors.
We found BPL to lie in the first-quadrant, being in the General-Education section. This was due to the wide-variety of services BPL offers to its community with a majority being considered educational. Although BPL does offer options for entertainment, we found this to be in the minority compared to the educational services BPL offers.
We did encounter frustrations and difficulties during our research. This was due to BPL being a community organization that offers media as a service. While competitors offer media as a product. An example being Barnes & Noble offering similar services to BPL (books, eBooks, movies, and events) but at a cost.
To further assess the strengths and weaknesses of BPL vis-à-vi other multimedia services, we conducted analyses of both competitors and comparators to BPL. That means, services that offer the same features as BPL, and services that offer similar but unrelated features, respectively.
Comparative and competitive analyses allow us to see which service’s features most completely satisfies our Persona’s goals and needs, and which features, if missing, we should prioritize adding to our service. Luckily, for these particular analyses, we found that the available resources offered by public libraries are second to none, although the majority are offered on a lending basis.
These analyses really just demonstrated the wealth of resources offered by public libraries. Other commercial multimedia services specialize in the monetization of specific media, and are able to operate in a distributive rather than a lending/borrowing capacity, but that’s really the difference between public and private services.
User Research Phase 1
We then studied the Persona given to us by BPL, Priya. A persona is an amalgam of the research a company has done of their target demographics, created to help focus the design process on our users.
Initially, we created our Problem statement:
How can we help Priya better navigate the BPL website?
Using Priya’s goals, needs, and pain points, we plotted out a series of tasks for volunteers to navigate in the form of a tree study, a navigational test that would evaluate the information architecture of the existing site. How easily could users achieve Priya’s goals using the website?
We constructed our Tree Study from the current BPL navbar, and created each task based on the goals of our persona.
The tasks were:
- Task one: You are finding a new book to read over the summer, find a fiction novel.
- Task two: You are researching for your current sleep study, find a journal on the BPL website.
- Task three: You recently moved to Brooklyn and are interested in getting a library card, find out how to sign-up for one on the BPL website.
We had gathered 11 users to complete our Tree Study.
Tree studies are effective at testing Information Architecture because they directly imitate its essential structure, focusing directly on how users interact with the vocabulary of the architecture. Something it also does is divorce the architecture from the visual design of the website; this may clarify if the architecture itself is confusing, or if the design is more to blame.
The overall success rate of task 1 was 55%, with an average completion time of 22.57/s. There were 6 direct successes, and 4 direct failures (1 indirect failure). Although the majority of subjects were successful, there is still much room for improvement.
Based on our findings, it seemed that our users had a difficult time completing the second task. Only 2 out of 11 users found the journal successfully. We had 45% of users fail the test on directness, and 36% fail on indirectness.
Lastly, we discovered our final task for our users to be the most successful in comparison to our other two studies. 5 out of our 11 users were able to find a library card. 45% of the users had a direct path, while 18% were indirect.
One user said:
“I just felt like this was the only thing well-categorized”.
This might explain why Task 3 had a higher success rate.
Next, to examine the effectiveness of our existing information architecture, we conducted an open card sort.
One method of examining the information architecture of our service is an Open card sort. This lets volunteers generate what they believe to be intuitive information architecture for the features we offer. We then compare popular trends in the results to our existing architecture to see if improvements or alterations can be made.
Open card sorts are an effective method of architecture evaluation because they allow us to check in with the mental processes of our users. How do they naturally group the information we offer? Are there intuitive trends to follow that will allow us to better anticipate our users’ instincts?
Based on our findings we discovered that this study gave us the most data out of all of our research methods.
The matrix above shows how often (percentage) certain cards were grouped together. Some significant (done for the purpose of brevity) pairs include:
- Movies and Music & Recordings were grouped together 100% of the time
- Cards beginning with “For — age group” were grouped together nearly 100% of the time.
- How to Use the library and Get a Library Card were grouped together 88% of the time.
- Contact Us and Location & Hours were grouped together 88% of the time
We would suggest a change to the age-groups listed to have more specificity when navigating categories.
Finally, To evaluate the effectiveness of our existing information architecture, we conducted a closed card sort. This asks volunteers to order the elements of our existing site map into groups most intuitive to them. We then analyze the trends in these results to determine if our architecture is doing a good enough job at delivering features to our customers.
Closed card sorts determine if our current navigation follows the intuitive logic of our users. It allows us to examine one-to-one the efficiency of our architecture to the behavior of users.
Out of 29 items, 17 were categorized correctly by a majority of the participants, which is a 59% success rate overall. Considering the number of elements, a 59% success rate is decent, but could definitely be improved. Many elements were redundant, particularly the age groups, which only made sense in the context of their parent categories, and didn’t translate well at all to a decontextualized sorting activity. Culture Pass, a somewhat enigmatic element, should perhaps be categorized differently, as it is not an immediately recognizable item.
Full results for our tests run can be found here:
The last step of our preliminary research phase was the heuristic evaluation. To evaluate the usability of various aspects of a service, we ourselves examined the Heuristics of several pages on the BPL website, combined our findings, and gave the page accumulated heuristics scores based on its performance according to GA’s Abby Heuristics method criteria.
A widely used method of determining the usability of various features of a product is evaluating its heuristics. Using GA’s signature Abby Heuristics method, we evaluated the usability of the home page and several other pages on the BPL website according to 10 key criteria:
- Findable, the quality of the site’s navigation
- Accessible, the quality of the site’s accessibility to people with disabilities
- Clear, the transparency of the site’s vocabulary and attention to the reading level of its target demographics
- Communicative, the cohesivity of the conversation the site establishes with the user
- Usable, the ease with which users can complete tasks on the site
- Credibility, the trust the site inspires in the user in regards to privacy or PII
- Controllable, the ease with which users can correct mistakes or re-orient themselves if lost
- Valuable, the quality of what our features offer the user
- Learnable, the ease with which users can recall our architecture and move through the site more quickly upon repeat visits
- Delightful, the ability of our site to excite and please the user in unexpected ways
Heuristics evaluations let us assess where a site needs most work, as any changes done will cost valuable resources. By conducting evaluative tests on a site’s features, we determine how, by the numbers, our client will get the most bang for their buck.
We found no major problems within the website (Home/page, Events Page, Learn Page, and Books Page). All problems we found within the website can be considered minor issues.
The website showed good practice within the heuristics of: Accessibility, Controllable, Valuable. Earning a perfect score in every page we evaluated.
Areas with minor problems were under the heuristics labeled: Findable, Clear, Usable, Credibility, Learnable, and Delightful.
With Usability and Clarity having minor problems across all pages evaluated.
Most minor problems stemmed from the categories within the navbar. We would most focus on the navbar to adjust the category names within them, to ease user’s confusion.
So, what do we think should be changed?
We noticed that the areas needing most improvement were the site’s findability, clarity, usability, and learnability, even though they only presented minor problems.
For improvements to findability, we recommended diversifying the vocabulary of the drop down menus, as there was a lot of redundancy.
For improvements to clarity, we recommended more clarification on what a “culture pass” was.
For improvements to usability, we recommended increasing the visibility of the close window option on the pull-out menus.
For improvements to learnability, we recommended universalizing age groups; some sections featured only particular age groups, which dissuades learning the site’s architecture.
Overall, the main navigation dropdowns from the “Borrow” tab direct you to a selection of different parts of the catalogue, automatically setting filters to specific values and opening the catalogue page of the site with those values selected. While this might have been convenient for users looking for the listed items, it proved frustrating for users searching for items not listed in the dropdown. So we suggest just compiling the filter applying buttons, or “books,” “movies,” and “music and recordings” to a single button: physical catalogue, which will open the catalogue page, with the filter list at the top (in place of the giant, empty pink color block) redesigned and front-and-center below the current search window (during a future step in the redesign). The other button will be the Online Catalogue, which will navigate to what is now the digital collection. “Digital” is an outdated phrase- users expect everything digital to be part of the internet, and have forgotten (or never learned) the difference between analogue and digital. These changes will streamline the user’s path towards the powerful filter program, which will include Journals on the main filter options, rather than exclude it from the present list of options. Get a Library Card will have its own place on the main nav bar (because of its importance), whereas now it is located in two places, with “borrow” being a confusing grouping (you don’t ‘borrow’ a library card) Additionally, the Culture Pass will receive its own element listed with the Library Card application, explaining that you use the library card as a culture pass, whereas currently, it’s an eponymous enigma. These changes were all made in response to our user research.
Based on the observations and recommendations we had made to this point in our research, we sketched out our proposition of a new architectural model. The current architecture was heavy with secondary options that only slightly varied the navigation process to the Catalogue page.
Below is the current architecture of BPL’s homepage in the form of a site map.
Our proposed navigation changes opted to reduce the number of secondary options where appropriate, and add a primary option for library cards and culture passes, reflecting our data on task 1 of our tree studies.
Below are our proposed navigation changes in the sitemap.
Next, it was time to evaluate our proposed changes to the sitemap. We conducted another tree study of the same tasks using our new navigation.
User Research Phase 2
Task 1 (study 2)
Success rate went from 50% to 90%, a 50% increase in performance. Directness remained around 90%. Those results speak for themselves; directing the user to the catalogue itself, rather than asking them to choose from several options, proved far more effective at helping the user toward their goal.
Task 2 (Study 2)
Here, the success rate went from a lousy 20% to a whopping 80%, an increase of 400%. Directing the user to the comprehensive catalogue filters was indeed far more effective than listing out some suggested filter features on the homepage.
Task 3 (Study 2)
This one was a bit of a gimme, as the library card icon and option was made its own element; needless to say, it worked. Success rate went from 50% to 100%, a 100% increase in performance.
Finally, our second closed card sort: How intuitive was our proposed site architecture in comparison to the existing architecture? Below results were out of 5 participants.
Closed Card Sort (Study 2)
Last closed sort, 59% of cards were sorted correctly by a majority of the participants. This time, 94% of cards were sorted correctly by a majority of participants, with far fewer outliers. That’s around an 80% increase in performance.
So, is it worth it?
Overall, our second round of testing boasted substantial increases in performance of the website, along the guidelines of Priya’s needs. A more direct path to the catalogue filter allows the site to retain its splendid design and exciting graphics, while letting the catalogue do its own work in directing the user to the resources they seek. Based on these successes, we are very confident that if these changes are implemented on the BPL’s homepage, users like Priya will have a much easier time navigating their beautiful website.
How does it work?
To give a comprehensive demonstration of our proposed changes to the homepage of the BPL, we created an interactive prototype of the new homepage using Figma. We documented the overall prototype with annotations below; click on the picture to access the prototype online.
Next Steps: Completing the Path
For our next steps in streamlining Priya’s user experience at the BPL, we had to examine her journey beyond her successful navigation through the homepage, towards her end goal. For this, we constructed a User flow based on one of Priya’s tasks using the existing site architecture.
The homepage ends about here;
This is the next area for redesign. We noted that this page features a powerful and descriptive filter component, but it’s poorly implemented and weirdly hidden on the catalogue page in favor of an oversized search bar and large graphics of suggested items. To unite our work on the homepage to the completion of Priya’s task in the catalogue page, we are now formulating how best to redesign the catalogue page to feature and refine the Filter interface.