Enhancing the Centre for Equitable Library Access (CELA) Website
Streamlining processes for CELA patrons to discover new books in their preferred alternative formats
.png)
01 Context
Overview
For my Master’s capstone project, my team and I partnered with the Centre for Equitable Library Access (CELA) — a digital library that provides services to users with print disabilities (users with visual, learning, and/or physical disabilities that impact their ability to read printed materials).
Client's Goal
-
Include accessibility metadata (information about accessible formats of content, such as large print, braille, audio, etc)
-
Create a seamless search experience for patrons so they can access materials in their preferred alternative formats using their assistive technologies
Our Goal
-
Simplify and enhance the existing search and filter systems so patrons can access materials in their preferred alternative formats (e.g. human narration instead of synthetic narration)
-
Consider the interaction of assistive technologies such as NVDA, JAWS, Voice Over, etc throughout the UX process
Problem
Users with print disabilities face challenges when searching and filtering materials on CELA’s website. Without the ability to efficiently search and filter by their preferred alternative formats, they either do not find the materials they want or settle for the materials they have.
Outcome
We delivered screen reader-friendly information architecture (IA) maps, user research and insights, before and after journey maps, usability test insights, and an interactive prototype. Additionally, we ensured that all documents and presentation slides were available in alternative accessible formats.
02 Process
03 Research
As the research lead, I collaborated with CELA's Accessibility Metadata Coordinator, my team and my professor to better understand how accessibility metadata shape user experiences and how assistive technologies (ATs) interact with user interfaces. I also facilitated screen reader training using NVDA and VoiceOver, helping the team approach the research with greater empathy and a user-centered mindset.
To understand the problem space holistically, we used a range of research methods that allowed us to both explore and validate our insights. The research provided us with a deeper understanding of the trends, limitations, and larger technical systems of the accessible publishing industry.
Sector Analysis
We analyzed the accessible publishing industry to understand library services, the role of accessibility metadata in inclusivity, and the web accessibility of digital libraries for users with print disabilities. We found that there is a lack of alternative formats and accessibility metadata in print materials.
Observational Study
We observed the behaviour of our users as they browsed the current CELA website to understand their typical day-to-day use and the interaction with their AT.​ Our study was limited because some users couldn't screenshare through Zoom using their AT. We found some browser-based screen-sharing applications, such as JitBit, as an alternative method to screenshare.
Competitor Analysis
We analyzed 4 competitors – BookShare, Hathi Trust Digital Library, Mississauga Library, and National Network for Equitable Library Service – to understand how they curate collections and provide alternative accessibility formats.
Interviews
We conducted 9 semi-structured interviews on Zoom with 2 stakeholders and 7 end-users (6 patrons with print disabilities and a public librarian). Since we had limited experience with alternative formats and accessibility metadata, we worked with an Accessibility Metadata Coordinator to help contextualize some of the data. This helped us understand the roles and relationships between individuals and their interactions.​
Quotes
03 Analysis
Affinity Diagram
From our research, we organized our data points into groups to provide a high-level understanding of the collaboration efforts, systematic limitations and website issues. We identified 8 themes and several sub-themes, ultimately discovering 3 main insights.
Collaboration and Understanding User Needs
Parties such as the Canadian National Institute for the Blind (CNIB) and BookShare store CELA's metadata but don’t produce accessibility metadata with CELA. CELA lacks the understanding of users, especially non-technical users, to create accessibility metadata
User Support and Empowerment
CELA staff play a vital role in guiding and empowering patrons with print disabilities, especially those who are nervous to access materials online
Accessibility Challenges and Technical Barriers
Users encountered difficulties with the CELA website, including AT compatibility issues during login, inaccurate search results and limitations in applying multiple filters simultaneously
Persona — Meet Una!
To bring our research to life, we created a persona named Una, an older adult with vision loss. Una's story helped us narrow our focus from the broad spectrum of print disabilities to specifically visual disabilities, as many of our participants shared similar experiences. In order to create better experiences for users like Una, we shaped our design decisions to enhance the user interface (UI) and improve the interaction of screen readers with the website's information architecture (IA).
Before Journey Map
To better understand the user's journey, we mapped out Una's current experience of searching for a book in her preferred alternative format. This helped us identify key areas of interaction with the CELA website, uncover pain points she faced during her search, and highlight potential opportunities to improve her overall experience.
04 Ideation
To begin our ideation process, we gathered for a collaborative brainstorming session, aiming to generate ideas to address the various challenges that users faced. One particular issue that stood out was that: the overall information architecture of the CELA website was not always compatible with users’ assistive technologies, often disrupting their navigation experience. This key insight became our main problem statement to focus on when generating ideas to create a breadth of possible solutions to meet the need of our users.
Prioritization Grid
​We then measured our ideas based on impact (how useful it is) and feasibility (how practical it is to implement) using a prioritization grid to define clear project boundaries. Through this process, we identified 5 key solutions that would effect users the most with their CELA experience: onboarding, personalization, browsing, filtering and book cards (cards that displayed information about the books).​
Information Architecture (IA) Maps
To improve accessible navigation, we created screen-reader-friendly IA maps that prioritized users' access to the most relevant and requested links on the website. We also reduced the number of keystrokes so users could complete their tasks quickly. Our before and after IA maps highlight the improvements we made and provides developers a roadmap to implement in the back end.
Home Page
Before IA Map
After IA Map
Search Results Page
Before IA Map
After IA Map
05 Design
We constructed mid-fidelity wireframes and prototypes to visualize and iterate on our UI. Wireframes helped us focus on the structure such as layout and content hierarchy of the UI. While, prototypes helped us focus on the design, interaction and functionality of the UI.
Redesigning CELA’s Homepage
We wanted to guide patrons to commonly used information such as the 'New Titles' page in the primary navigation bar and the first section of the home page for easy access. Lastly, we reduced empty space between sections on the home page to improve users' navigation journey.
Wireframe
Prototype
Improving CELA’s Filtering Section
We modified the filter system so patrons can select preferred filters to have a seamless search and browsing experience. We designed a new section within the filtering sidebar with hyperlinks of ‘Create my search preferences’ and ‘Edit my search preferences’ for easy access.
Wireframe
Prototype
Redesigning CELA’s Book Cards
We created a new feature to the book cards to enhance users' experience during their search and browsing journey. "Listen to a sample" feature allows patrons to listen and compare audio samples of different narration formats.
Wireframe
Prototype
After Journey Map
To demonstrate the improved user journey, we mapped out Una's future experience of searching for a book in her preferred alternative format. Una's search experience is more efficient and user-centric as we included ways for Una to have quick access to the "new titles" tab so she can immediately check out new releases of books, personalize her commonly used filters on her profile, and play audio snippets of books so she can choose the narration of her preference.
.png)
06 Evaluation
Accessibility Audit
Before conducting usability testing with users, our group faced challenges making our Figma prototype accessible due to limited expertise. As the main Accessibility Tester for our team, I ensured that accessibility was prioritized throughout the entire design process. We enabled Figma’s accessibility mode and tested the prototype using both VoiceOver and NVDA screen readers.
We discovered issues like improper frame detection, inconsistent reading orders, and navigation problems. Despite time constraints, our team reordered frames, reduced keystrokes, and deactivated unnecessary buttons to improve accessibility. While we resolved several issues, we anticipated additional challenges during the testing session due to our limited accessibility experience.
Usability Testing
After our accessibility audit, we conducted three usability tests with patrons with disabilities. Despite efforts to prepare, we faced technical and accessibility challenges, such as screen reader incompatibility, user confusion from Figma’s limitations, and cluttered elements.
Three key themes emerged:
1) Orientation Challenges: HTML elements were missing (Figma's limitations), which made it difficult for users to familiarize themselves with the website
2) Navigation Challenges: Users had difficulty finding the search button
3) Excessive White Space: Too much white space made the page feel overwhelming to users
Mid-Fidelity Prototype
Redesigning CELA’s Homepage
Improving CELA’s Filtering Section
Redesigning CELA’s Book Cards
07 Lessons Learned
Value of Users with Disabilities and Accessibility Expert
Our capstone project marked our first experience working directly with users with disabilties, particularly print disabilities, and an accessibility expert. We gained a deeper understanding of accessible library services and the importance of providing access to print materials for promoting independence and equity.
Proactive Brainstorming and Support
Our team faced a challenge where some users experienced screen reader compability issues with Zoom, preventing them from screen sharing during observational studies. To support usability testing, we brainstormed with our professor to prepare alternative browser-based screen-sharing tools, such as JitBit, which uses HTML.
Understanding the Interaction of Screen Readers and Prototype
Our team faced challenges in understanding how different screen readers interacted with our Figma prototype. Throughout the design process, we tested each component individually to ensure all UI elements were accessible. When constructing wireframes, we carefully considered both the reading order for screen readers and how users navigate using browse and focus modes.