BOSTON PUBLIC LIBRARY SPECIAL COLLECTIONS' WEBPAGES REDESIGN
PROJECT OVERVIEW
For my UX capstone project, I was placed in a team tasked with evaluating the Boston Public Library (BPL) Special Collections' "Search & Discover" webpage and coming up with a redesign that will better help guide users through the department's multiple tools used for searching their materials. Additionally, they wanted us to provide a report of our evaluations, including recommendations and usability findings regarding the webpage and its efficiency in leading users through the various discovery platforms.
As a member of the team, I've contributed significantly to the work that we have produced thus far.
Initial Special Collections' Search & Discover webpage
PLANNING
Over the course of the first semester of my UX capstone course (Sept 2022 - Dec 2022), my team repeatedly met with Special Collections staff members, including Kathleen Monahan and Eve Neiger, to discuss and understand our problem space as well as develop a plan for our design process.
TASKS
Completed with other team members
-
Conducted virtual meetings with Special Collections staff to project scope
-
Learned about BPL's tools or systems and special collections/archival research from staff members
-
Developed project goals and objectives
-
Identified project constraints and assumptions
-
Recognized relevant stakeholders and necessary resources and skills
-
My roles: editor/formatting lead, research analysis lead, and prototyping lead
-
-
Created a detailed project plan and assigned team roles
-
Made a project report containing all of the above information to share with Special Collections staff
RESEARCH & UX REQUIREMENTS
My team conducted our initial user research to use in the development of our user archetypes/personas and UX requirements. We decided to perform surveys in addition to usability tests combined with interview questions. We also conducted a heuristic evaluation over the current Special Collections pages.
For our surveys, we wanted to focus on understanding what users who are already familiar with BPL's Special Collections think of the current website. On the other hand, we used usability tests/interviews to evaluate how those who are not familiar with the library navigate and behave on the website and their impressions of it. One team member, Jason, created the script for the survey and implemented it through Qualtrics. Meanwhile, I worked with another team member to create the usability test/interview script via a Google Doc.
ANALYSIS & FINDINGS
Completed individually and with other team members
For both of our research methods, my team used Google Sheets and affinity diagramming (through the use of FigJam) to condense and analyze our individual findings (since each of us was responsible for two conducting two usability tests). We also created user personas that we felt matched the individuals we were designing for, which would help aid our design progress later.
We communicated our research methodologies, analysis, findings, personas, value propositions, and more into a single project report that can be viewed here. Links to our survey and usability test designs can also be found within the document.
First round usability test/interview affinity diagram
First round survey affinity diagram
My team's persona for a familiar BPL patron
My team's persona for a unfamiliar BPL patron
My team's persona for a BPL staff member
My team's persona for a familiar BPL patron
User personas for BPL Special Collections webpages
DESIGN/UX REQUIREMENTS
From my team's initial research, we developed some design/UX requirements that we would use in guiding our design choices. They involve (as written in our project research report):
-
Discovery tool navigation
-
Issues involving clarity and navigation using the "Search & Discover" webpage discovery platforms (which are the main way for users to find specific Special Collections' content), such as discerning differences between the tools and figuring out which ones to access for their needs
-
-
Requesting Special Collections materials
-
Issues relating to the lack of clarity and intuitiveness in the online system for finding and requesting to view desired Special Collections' materials in-person in BPL's Reading Room
-
-
Aesthetic and emotional
-
Issues regarding organization and overall aesthetic preferences, such as image sizing and clarity, descriptions, and organization on the "Search & Discover" webpage and any other adjustments with the intention of making Special Collections information more appealing to its users
-
-
General Special Collections webpage navigation
-
Issues of finding the Special Collections' webpages, looking for information about making an in-person Reading Room appointment (to view Special Collections' items), and scrolling through the content of the "Search & Discover" webpage
-
IDEATION & WIREFRAMING/
PROTOTYPING
After completing our research analysis, my team began the process of design ideation and wireframing/prototyping. This process occurred through four stages (which are all documented in a project design report we created): unfiltered design ideation and sketching, low/mid fidelity wireframing/prototyping, testing of low/mid fidelity wireframes/prototype, and initial high fidelity wireframing/prototyping. Although we mainly focused on the Special Collections' "Search & Discover" webpage, our research prompted us to create redesigns for multiple Special Collections' pages.
UNFILTERED IDEATION & SKETCHING
Completed individually and with other team members
For this stage, we first reviewed the design/UX requirements that we developed and the user findings we obtained so that we could come up with some design ideas and solutions. Using FigJam, each team member contributed to a board of ideas that related to our established requirements, which we condensed later into a table. Next, we individually created sketches that implemented our design ideas and came together to discuss what we liked or didn't like about each design sketch.
The team's unfiltered ideation and sketches can be found here.
FigJam board of unfiltered design ideas/solutions
Table of design ideas related to design/UX requirements
Individual sketches of design ideas/solutions
LOW/MID-FI WIREFRAMES/
PROTOTYPE
Completed with other team members
Based on our unfiltered ideation and sketches, my team began creating low/mid fidelity wireframes and an interactive prototype via Figma. We made a high level user flow to help focus our designs, and we did various screen iterations of Special Collections' webpages.
The low/mid fidelity wireframes/prototype can be viewed here.
BPL Special Collelctions webpages user flow
Figma low/mid-fi wireframes
Completed individually
TESTING OF MID-FI WIREFRAMES/
PROTOTYPE
For my team's second phase of research, we used qualitative assessments to see how users felt about our designs in comparison to the original or current Special Collections' website pages. We also wanted to determine which type of images would be the best for representing to users what the purpose of each discovery tool is on the BPL's Special Collections "Search & Discover" webpage. Due to certain constraints, my team used convenience sampling with each member conducting a single assessment.
The team's assessment notes can be found here.
Portion of qualitiative assessment findings
HIGH-FI WIREFRAMES/
PROTOTYPE
Completed with other team members
My team used findings that we obtained from our low/mid-fi wireframe/prototype testing as well as BPL's website style
guidelines and information to help in the development of our initial high fidelity wireframes/prototype which we continued to iterate on.
We made several decisions for each of the main Special Collections webpages we focused on in our redesigns (as written in our project's final report):
-
Special Collections' home page
-
Reorganized the hierarchy and order of information to better convey to patrons what Special Collections is, its purpose, and who the department serves
-
-
"Search & Discover" page (related to the discovery tool navigation UX requirement)
-
Reorganized the page's "Search By" section based on discovery tools and departments using a tab system and filters to make finding specific materials more clear for users
-
-
"Plan Your Research Visit" page (related to the requesting materials UX requirement)
-
Separated the steps for making an in-person Reading Room appointment with larger numbers, headers, and annotated images to clarify the find and request process and allow for easier readability
-
-
General changes
-
Incorporated more representative visuals and iconography for increased ease of navigation and added a table of contents as a way for users to preview the information on each page
-
EVALUATION & FINAL WIREFRAMES/
PROTOTYPE
While my team iterated on our high fidelity wireframes/prototype, we conducted a third round of research to evaluate whether our designs were effective or not. Over a two week period, team members conducted both qualitative assessments and usability tests. Participants consisted of individuals that were unfamiliar with BPL's Special Collections webpages, and they had varying ages, technological experience, and knowledge of library and Special Collections systems.
ANALYSIS & FINDINGS
Completed individually and with other team members
Similar to our first round of research, my team used Google Sheets and affinity diagramming on FigJam to note and analyze our findings.
Each member was responsible for collecting data from two usability tests and one qualitative assessment.
We also conveyed our research methods and analysis, findings, and potential final design adjustments into a single project report that can be seen here. The link to our qualitative assessment and usability test designs is within the document.
Second round usability test affinity diagram
Second round qualitative assessment affinity diagram
ADJUSTMENTS TO FINAL DESIGN
Using our evaluation results, my team made some adjustments to our final designs. They include (as written in our project evaluation research report):
-
Add headers on the "Plan Your Research Visit" page to make the step by step directions for creating a Reading Room appointment easier to follow and scan as well as make content hierarchy more intuitive
-
Make a collection of suggested images for BPL to use for better representing their discovery tools and departments on the "Search & Discover" page
-
Edit webpage images to exhibit consistent warmth, saturation, sharpness, and more to improve visual appeal
-
Alter the table of contents on each webpage to better reflect page content and structure
-
Add functionality for the “apply” button for the tag filter so that filtered results can be exhibited
-
Improve the aesthetics of the navigation bar with wider margins, consistent spacing, and more
-
Add breadcrumbs on the Special Collections' home page for consistency among the webpages
My team's final Figma wireframes and prototype can be seen here.
Figma high-fi wireframes
FINAL PROJECT STEPS
Once my team made our final design changes to our wireframes and prototype via Figma, we had steps to complete to wrap up our project. These steps included creating a final report and UX specification, making and presenting a project exposition poster, and handing our project materials to our client, the Boston Public Library.
FINAL REPORT & UX SPECIFICATION
Completed with other team members
For the final report, my team had to condense our entire project development and milestone progress (including research, wireframing, and more) into a comprehensive document that we could hand over to our client. This document can be viewed here.
My team was also responsible for making a UX specification that would detail how our design's interactive experience would work. The components of this specification are a high-level interaction map/diagram, interaction flows, and detailed page/screen specifications. I made this document via Google Slides with another team member, Jason. It can be seen here.
Design interaction flows
EXPOSITION
The University of Michigan School of Information hosts an annual showcase in which students can exhibit the work they have done through their courses, student organizations, and more. My team along with other undergraduate School of Information students were responsible for creating posters to display our capstone projects in-person at the exposition this year. Unfortunately, our client could not attend, but it was a great experience for my team and I to present our work to others who were interested to learn about our project.
UMSI exposition project poster
My team's printed exposition poster
My team and I standing next to our exposition poster
The exposition as it's taking place
My team's printed exposition poster
In-person UMSI exposition experience
CLIENT HANDOVER
The last component of my team's capstone project was presenting and handing over our materials to the Boston Public Library. To do so, we met up virtually with Special Collections staff members, Kathleen Monahan and Eve Neiger, as well as BPL's web services specialist, Meia Geddes, to discuss.
My team had met up with Kathleen and Eve various times throughout the course of our project. We would often communicate and provide updates through email and Slack. Working with them was a great experience as they were extremely helpful and communicative over the course of our project.
For our handover, we walked Kathleen, Eve, and Meia through our design choices and reasoning. They liked our redesigns. Unfortunately, as of now, some changes can not be implemented given the constraints of BPL's current website systems. However, our client strongly appreciated our findings, recommendations, and redesigns, and they hope to reference them for the future when making changes to BPL's Special Collections webpages. They also noted later that they were already able to implement one of our redesign suggestions, which involved rearranging information on the Special Collections home page. One of my team members also has plans to visit the library to help them take pictures for the "Search & Discover" page.