Open Source Digitized Object Viewer
My Role
UX Designer, Front End Developer
Related Skills
Figma, Maze, Digital Ocean, Node.js, React, Vite
The Brief
As part of a mandate of adopting and contributing to open-source, community developed, software, CRKN is switching to the International Image Interoperability Framework (IIIF) as our central data model for our holdings. IIIF is a central to our plan of simplifying our infrastructure, leading to features for better supporting alternative access methods. The switch to a IIIF data model for our access objects allows CRKN to take advantage of existing software to replace in-house developed solutions. As part of this transition, we elected to replace their custom image viewing solution used on our Canadiana access platform with an open-source community developed solution, Mirador Viewer. In the context of GLAM (Galleries, Libraries, Archives, and Museums) websites, an item viewer is a key tool for providing access to digitized historical collections and archival materials. The accessibility and usability of an item viewer are crucial for ensuring inclusive access and enabling all users, including those with disabilities, to effectively interact with and utilize the valuable digital resources. To ensure that users of Mirador had both an intuitive and accessible experience when browsing our items, we decided to run comprehensive accessibility and usability tests on the software, and help develop the solutions, too!
The Solution
So, what did I do?
Recruit test users
Part of the reason I was selected to join the project was my experience in Design Thinking and user centred design from IBM. The Canadiana collection has been accessible via their website for ten years, but they had no idea who was accessing the collection or why. There were assumptions, such as historians and genealogists, but they had no way of knowing the percentage make up of their user base. To solve this problem I recommended a pop up survey to collect some stats on who was using the website and why. I also recommended we ask for people to enter their emails if they would be willing to participate in UX testing. Many end users ended up filling out the survey, and we received over 100 emails for our test user pool.
Run accessibility user testing
I partnered with Access Changes Everything Inc. (ACE) to recruit a panel of test users with different accessibility needs, including persons with both cognitive and physical disabilities. To get a correct judgement of what work needed to be done to the Mirador base-code for improving accessibility, we set up an instance that was as close as possible to the Mirador 3 default settings for a single window.
Analyze accessibility user test findings
Raw feedback from each auditor was captured and grouped into clusters representing the specific area of the user interface it pertained to. This was an activity which would help me develop specific actionable tasks to address accessibility concerns.
​
I sorted the clusters into issues that could be fixed through Mirador configuration settings, and ones that would require changes to the base code.
Iterate on design
I changed the configuration options to solve the issues that could be remediated through Mirador configuration options and settings. These changes resulted in the following design for a 'more accessible' version of Mirador. You can see the configuration options for the Mirador 3 viewer used in the test here.
Perform usability testing
With my more accessible version of mirador in hand, it was time to gauge the overall experience users would have when engaging with our items online through Mirador. To do so, I designed a usability test ran through the Maze usability software. I spun up a web-app on Digital Ocean which would serve one of our items in Mirador. Test users from our candidate pool performed a list of common tasks with the app. They were screen recorded, and were instructed to speak aloud as they performed each task.
Analyze usability tests
Using the data captured by Maze, the screen recordings, and the comments made by the test users, I organized the data into eight insights, marking their severity level measured by the importance of the feature, and the overall performance of the users when completing a related task.
Create recommendations
With these insights, I created actionable recommendations that could then translated into technical tickets.
Share findings with the open source community
Since Mirador is an open source project, I shared my report (accessible here) on the community forum. The findings were met with much enthusiasm - so much so that I presented the report at the 2024 IIIF Conference in Los Angeles!
Create UX and accessibility project plan
I then volunteered to organize the community efforts on everything usability and accessibility related for Mirador. The first step to do this was to create a Accessibility and UX GitHub Project, which you can see here.
​
I then did an analysis on the existing GitHub tickets, determining what tickets could be closed, and what tickets should be added to the new project. Additionally, I created new tickets based on the studies I had done.
Help implement solutions
Finally, I helped implement the usability and accessibility fixes, and am an active participant in the Mirador development community to this day!
