Navigation Redesign

Importance of Information Architecture for UX.

My Role: UX Designer | Duration: 2 Week | Project Status: Concept

San Francisco Public Library, approached us to redesign their existing website. After research and a series of testing, we began to gain a better understanding. With all the gathered data and validation we ultimately came up with a design and delivered a high fidelity prototype.

Problem Space

How can we better understand SFPL’s, and understand the user needs in order to improve the global navigation for the best experience? Leveraging Kelley, our persona, we designed a site that works for her, keeping clarity and usability in mind.

Scope of Work

Based on research and IA testing: Card Sorting, Tree Testing and Heuristics we came up with a design. Using the analyzed data we will provide SFPL with a better navigation system that will ultimately improve and create and seamless experience for the user.

Research/Discovery

To fully understand our client and users we needed an understanding of what SFPL is, especially, who they are, what they offer, and how they do it we used a Business Model Canvas. We are then able to compare it to our competition to learn from and grow from them.

Tree Testing

During Tree Testing we assess the structure within the website’s navigation. This proved to us that primary navigation categories could be more clear as users were having trouble completing the tasks.

Card Sorting

Card Sorting allowed us to understand how participants create groups based on the existing and proposed categories. With both Open/Closed rounds we validated that the existing was troubling and was improved with the new labeling.

Heuristic Evaluations

As a team of UX designer, we took the opportunity to evaluate the home page and 3 others using the Abby Method (10 usability principles) where we noted it lacked clarity and findability.

Site Maps

Site maps allow us to visualize content in relationship to a system. We created both existing and proposed sitemaps to better grasp the hierarchy between the categories.

User Flows

With Kelley in mind, we created a user flow to understand particular paths users may take through a system in regards ti a task. This allowed us to solve pain points that arose through the sites navigation.

Problem Space Statement

Hypothesis:
Users want to be able to browse for books prior to arriving to SFPL but they have trouble locating where this is done within the site.

Initial Problem Statement:
How might we help users to quickly find books and other information they are looking for?

Current Design

Business Model Canvas

In order to further understand our client and what they bring to the public library industry, we began by analyzing the current site and understanding what the library is and how they differentiate themselves. Once we had a cohesive idea, as a team, we utilized a Business Model Canvas technique to grasp what SFPL offers. We found out that the library consists of more than just book loans and has several other options.

TAKEAWAYS

• It became clear that SFPL does more than just loan books, they are a multi-purpose public space where events, exhibits, learning and investigation takes place.
• SFPL offers varying resources from a catalog of movies, audio, and books to many classes, activities and furthering education opportunities.

Competitive Matrix

Once we had a better understanding about San Francisco Public Library as a business, it was time to take a look at some competitors and comparators. As a group we came up with a list of companies and using a Competitive Matrix, we were able to see the client, SFPL, in comparison to its competitors on an X and Y axis. Looking at our competitors is important, as it helps us understand what different companies are doing and how they might be approaching things similarly or differently. We can leverage this to better redesign the website.

As a team, we brainstormed who our competitors are and who our comparators are. The difference between a competitor and a comparator is that a competitor is a direct competition, while a comparator is a company that has similar features but does not directly sell or do the same thing.

Competitors:

● Barnes & Noble

● Berkeley University of CA

● iBooks (apple book library)

● Amazon Kindle (book library)

● Alexander Book Company

Comparators:

● Google

● YouTube

● Encyclopedia

● Disney+

● TED

We came up with the list above after discussing several other options. Ultimately, we decided that these companies grasped several different features and concepts that SFPL does not have. Whether they are online/remote platforms or in person businesses as well as whether they are for personal or educational purposes, which eventually helped us in defining our axis

TAKEAWAYS

• Our competitors use similar navigation techniques through forms of digital catalogs that are filtered by type.
• Even though we placed our client, SFPL, in the middle of our axis it is still important so see how a wide array of companies relate to the client.
• Sites such as Google and Youtube have similar goals that offer the user the option to navigate through the information and layout for personal or professional purposes through a search engine.
• In the long run, this will be helpful during the design phase if we want to learn more about a specific feature that company thrives with.

Persona

Everyone meet Kelley, our fictional ideal user, who we will be keeping in mind throughout our testing and design process. (This Persona was provided by the client)

Feature Analysis

Once we finalized SFPL’s competition list we began to dig a little deeper. Keeping Kelley in mind, our Persona, we identified around 20 features that are important to her and compared it to what each specific company offers. This will ultimately help us compare the client to other products and learn from their approach.

TAKEAWAYS

• This analysis clarified that SFPL has everything Kelley needs.
• During the design phase we will be able to reference back to our competitors to see exactly how each feature is used and if they are working correctly.
• We gained insights on how certain features like the catalog, and filters can be improved based on who is doing what and how they do it.

Tree Testing

As UX designers we were tasked to learn and gain a better understanding of the efficiency of San Francisco Public Library’s navigation system. To have an in-depth discovery of certain user behaviors we performed Tree Testing. This study allowed us to visualize if the hierarchy of the navigation performed as it should. Overall, we noted that the users were having some trouble completing the task with the current design.

Once the redesign is complete, a second round of Tree Testing will be conducted to see if the new navigation structure will produce a better outcome.

TREE TESTING — Round 1

Finding a book ended up being a difficult task for most, as 91% of the users failed to follow the correct path. Only 1/11 participants was able to successfully complete the task making this a low success rate of 9%.

Looking for an event was an overall success, as 100% of the users located either the calendar view or the events category with ease.

Success in finding how to further your education was also quite a difficult task for the participants, 55% of the users located it correctly whether it took them through a different path. Yet, still a large amount 5/11 users failed to do so correctly.

TAKEAWAYS

• Tree Testing showed us that most failures were direct, therefore users did not have an understanding of the language being used and have a different mental model to achieve their goals.
• All participants’ first clicks were towards the correct path and we believe that familiarity with the task of finding events, contributed to the faster time of completing the task.
• All Users’ success and failures were direct when they were tasked to find information for career help. Thus, we believe it would be useful to have a clear message on the differentiation of the two options of eLearning and career development.

Card Sorting

Card sorting allows us to understand how participants organize information. We utilized Open & Closed card sorting to see how SFPL’s navigation system performed for new users. Open card sorting is used to understand the users mental model while Closed card sorting is used to assess the current architecture. During both of these tasks, we were able to find out how different users placed different labels under an array of categories.

Once the basic redesign is complete, a second round of Closed card sorting will be conducted in order to see if all cards/pages will be grouped correctly under the new primary navigation categories.

OPEN CARD SORTING TAKEAWAYS

• Overall, this method of card sorting is slightly harder to analyze since all participants have their own unique way of labeling the categories. Even though there is a low percentage of agreement in most of the groupings, using the dendrogram analysis helped simplify all the different categories into 1 overarching theme.
• Additionally, we can begin to infer that the existing site has a clear primary navigation, yet the secondary navigation might be a bit off due to how our participants are grouping each section.
• Below we can specifically see how users began to group certain labels and although there is only a 14% agreement for 4 out of the 5 categories there is a consensus that these were ultimately grouped under similar labelings.

This dendrogram categorizes the terms into 5 overarching categories. Although not all participants agree (as we can see with the low percentage), we can begin to see how certain terms were categorized into a specific group.

This dendrogram demonstrates a higher percentage, yet it is based more on an overall assumption. Even though it may be assumed by the software, it begins to directly correlate with the existing primary navigation SFPL uses.

CLOSED CARD SORTING TAKEAWAYS — Round 1

• Overall, the median time to complete the study was 3min and 23sec. The longest time it took to complete the study was 5 minutes and 24 seconds. The shortest time taken to complete the study was 2 minutes and 4 seconds.
• Most participants put the common terms in the same category. The uncommon terms are scattered among the categories. This shows that terms are confusing for the participants.
• The participants had the highest agreement to place certain cards in the Support & Services category. The lowest agreement to place certain cards was in the Research & Learn category.

• The chart above displays the percentage of participants, that placed each card in the correct category. The key: “inside” and “outside” represent the highest agreement among participants vs. the lowest agreement among the participants.
• Words that included a similar meaning or exact word to the category were placed together.
• The words with dual meanings and 0 context were more troubling to group.
• All the “Featured” elements were generally placed together under “Books and Media”
• Anything that had to do with “Help” was placed correctly under “Support & Services”
• If categories were split and more where added, there would be more guidance.

Heuristic Evaluation & Recommendations

A way to further analyze the usability of SFPL’s existing site and what problems we noted, as the UX designers, is to use a review system called Heuristic Evaluation . This is where we are able to evaluate the site as a whole, using a point system, and define problems that currently live in the site to guide us during the design phase.

TAKEAWAYS

• Overall, the Home, Catalog, Events and Careers page had a major problem in the delightful category since the layout for each page is disorganized, does not exceed user expectation and repeats words.
• The Careers and Events page do not have any major problems, both pages had issues with accessibility because it does not have compliance to be considerate of users with disability.
• The Catalog and Home page have a lot of problems because both have uncommon terms which creates confusion for the users. The navigation is difficult for users too, since there are many ways to navigate through tasks.

Revised Problem Statement

Persona
Kelley wants to be able to easily find books and events that are important to her.

Problem
Kelley has trouble browsing for books and events, and doesn’t have the time to sort through the full collection.

Goal
To improve the navigational hierarchy and overall structure to have users accomplish their task.

Problem Statement
How might we assist Kelley through the navigational process to improve findability and overall user flow within the site?

Sitemaps

We began by creating an existing sitemap of the current site structure. This allows us to break down the hierarchy of the navigational system and visualize it all under one image. After our initial round of testing, we then restructured the sitemap by recategorized and regrouping the page to improve the navigation in a clear and concise manner that allows the user to arrive to the correct page.

TAKEAWAYS

• Looking at the site, as it is currently, we can see how there is a lack of clarity, words have similar meanings and there are multiple ways to arrive to the same page.
• Using two words under the same “button” may confuse the user, therefore simplifying the primary navigation is important.
• Adding a tertiary level under this navigation can also lead the user to more specific pages.

TAKEAWAYS

• After synthesizing the first round of testing, and taking a look at our heuristics it became clear to us that simplifying and adding categories to the primary navigation would be beneficial.
• Open Card Sorting, allowed us to browse for new possible words that could begin to label the pages in a clear and concise manner, that ultimately allows the user to arrive to the correct page.
• Adding tertiary navigation, also gives the user a more direct path.

User Flow

Once we created the existing sitemap, we took a look on how Kelley would approach the site based on a specific task, in this case “reserving a book”. With Kelley in mind, we designed a user flow that showed us her process from start to finish.

TAKEAWAYS

• Kelley, being the book worm that she is, most likely will know what books she is specifically looking for and therefore the search option allows her to do just that.
• However, the site as is, might lack filtering options to allow you to narrow the wide collection SFPL has to offer.
• In this case, the catalog itself can be more tailored to Kelleys wants/needs including her topics of choice and recommendations that are unique to her.

DESIGN PHASE

Design Studio: Concepting

High-fidelity Mockup

Ideally, after our rounds of initial information architecture testing and analysis (Tree Testing, Card Sortings and Heuristic Analysis) we would perform a series of sketches and wireframes to kick off our design, all based on our sitemaps and user flows. Then a series of usability testing would be conducted to make sure we were on the correct path. Eventually the design will be at a point to create a Hi-Fidelity mockup, which is as close to the real thing as we get.

1. Edited header navigation to be more subtle and with consistent hovering techniques.
2. Primary/Global Navigation was changed by the rewording and addition of 2 new categories. This allows the global navigation to be consistent throughout the site.

1. While hovering, the text of the header bar will shift to blue and if selected the color will remain blue to show what is being displayed.
2. If “Aa” is clicked it will display the accessibility screen with options to augment text and improve color contrast for any and all with disabilities. And it can be closed the same way one enters.
3. The “Log In” section that was previously placed within the header bar moved down, for easier access as well as a more prominent location for users to note.

4. The search bar is very important for a user who knows what they are looking for, however can take up space and not many users use it. The team thought to minimize it and have it appear once the magnifying icon is clicked and changes to blue while hovering.

5. The search bar will drop down moving the global navigation down with it. This provides the user with a supplemental navigation tool if needed.

1. The primary navigation is activated by hovering over the categories, once it is hovered it will turn blue with white text (for visibility purposes) to show what is currently being shown. A drop down navigation panel will appear simultaneously with all the secondary navigation categories.
2. As soon as the cursor is moved down it will begin to activate the individual secondary navigation turning it bolder, underlined and blue for contrast (shown in “Featured”). Additionally, if there is a tertiary navigation a drop down will appear displaying what categories fall within.

Tree Testing

Tree Testing — Round 2

The success rate of finding a book increase from 9% to now 73%, that is full 711% increase from the first round. This is a huge change as 8/11 participants where able to successfully complete the task.

As expected, looking for an event was still a success. 100% of the users located either the calendar view or the events category with ease.

• We thought that changing the primary navigation to “Education” would facilitate the users path. While it did, they still weren’t clear on where exactly they would find this task. The success rate decrease from 55% to 18%, making it a 67% decrease from our initial round.
• Participants still are having trouble selecting “Jobs & Careers Resources” as only 2/11 selected it, the other 8/11 selected “eLearning”. This might be because the task is indirect and might be guiding them down the incorrect path.
• Ultimately, we still need to provide more clarity and would have to perform either another round of Tree Testing, with new labels, or run a Usability Test to see if performance increased.

TAKEAWAYS

• Our second round of testing improved, yet not as much as we were expecting it to. We had broken up the primary into a total of 6 sections that improved the directness, however there are still some inconsistency within the paths participants are taking.
• Word choice and clarity, is still a concern especially in task number 3 where participants are selecting the incorrect page.

Card Sorting

CLOSED CARD SORTING TAKEAWAYS — Round 2

• During our second round of card sorting, we changed and added to categories, in hopes that this would help and guide the participant to correctly sort the information they were viewing. Although most of it improved we did have a hiccup.
• “Books & Media” now called “Browse Collection” was had a 24% increase of card correctly sorted in.
• “Events” which was simplified from “Events & Exhibits” didn’t work as planned as it had a small decrease of 7%. This was due to people placing “Online Exhibit” under the “Browse Collection” category.
• “Research & Learn” was renamed to “Education” to provide more context to the user, this was beneficial as it provided a 4% increase of correctly sorted cards.
• The following 3 categories “Research, Help, and Quick Actions” were added as a way to break up “Support & Services” and at the same time include more context for other scattered cards. “Resources” didn’t work as planned with only a 13% correctly sorted cards, however. “Help and Quick Actions” was a great success with 70%+.

Final Recommendations

• Ideally, it would be beneficial to conduct another round of Tree Testing, even though we were highly successful with our new primary navigation categories, some where still not clear to the participants.
• Finding correct word choices to describe secondary navigation elements is also important as it can facilitate the sorting process under the new categories.
• Once, we had a concrete labeling system, sitemap would need to be updated and more user flows would help guide us on other paths.
• It is also important to run Usability Testing to note if the changes are working as planned and if users are able to seamlessly use the new navigation system.
• Designing out the rest of the navigation (including faceted and contextual navigational elements) and how they may look throughout the different pages of the site.
• It is important to also note how the sign in system would work and to know if the information would be tailored to that specific person, as that maybe the most important aspect when it comes to creating a unique experience.

WRITTEN BY

Clara Perez