Princeton Geniza Project
Project Impact
Since launching in 2022, the multilingual site has doubled its global user base, reaching researchers in 10+ countries and saving them an average of 30 hours per month in their workflows.
The database now hosts over 33,000 medieval documents, with 20+ more active researchers who can collaborate with the research team and make contributions to its ongoing expansion directly on the site.
Between 2022 and 2023 the success rate of user searches rose by ~35%, meaning more visitors were finding what they were looking for.
Duration
2 years
Design Expertise
UX research, Information architecture, User interface design, Visual Design
Tools
Figma, Adobe Photoshop, Adobe Illustrator, Github
For whom and why?
1
Enable the project team to conduct research more efficiently on the site, and maintain and expand the database in the long term.
2
Enable other Geniza researchers to conduct research on the site and take advantage of the updates in the database.
3
Empower non-specialists, including students and researchers in adjacent fields to learn about and engage with the data.
Background
The Princeton Geniza Project (PGP) is a research database comprised of more than 33,000 medieval documents found in the Ben Ezra Synagogue in Cairo. PGP documents consist of literary texts, letters, legal deeds, lists, accounts, and state documents. For the past forty years, scholars at Princeton university have been digitizing descriptions and transcriptions of the documents.
UX Research
Key Insights
1
100% of researchers relied on keyword searches but struggled with inconsistent metadata, leading to incomplete or inaccurate results, indicating a need for a robust relational database with a rich search experience.
2
100% of users are in need of visual exploration (browsing images), indicating a need for a more intuitive image-based navigation system.
3
Researchers spent an average of 3-5 hours per session manually cross-referencing a document's metadata across multiple platforms, highlighting the need for an integrated viewer.
Research Objectives
-
Understand the data landscape.
-
Learn about team’s mental model of the data.
-
Learn about researchers’ goals, processes and interactions with the data, needs and pain points, what they liked about their experience with the site and/or the data.
Number of participants
8 Geniza researchers
Key Findings
-
All participants used multiple sites (that require login) in addition to the Princeton Geniza site to gather the data they needed, taking an average of 3-5 hours per session per document.
-
All participants organized and analyzed the data manually and on their own spreadsheets locally, taking an average of three hours per session per document.
-
To find the right documents and be able to analyze them all participants heavily rely on the ability to zoom into document images, access document shelfmark numbers, and access scholar's publications related to documents.
Highlights
Co-creating an image/transcription/translation viewer
As part of researchers’ workflows we needed a way to display a document image along with its transcription and translation text. After months of investigation on existing tools and having no luck on finding what satisfied our requirements with minimal to zero customization we decided to design and build our own version. I created sketches of the image-transcription viewer based on the requirements. Together with the dev lead/project Co-PI we discussed the sketches and whiteboard the details. It was a fascinating process and way of collaborating to co-create this feature. I created a first version of the designs which were reviewed by the team and slightly revised in order of content and visual design to meet the needs of the team.
Wireframing (a joggling process)
Goal
Reach agreements on the order of content on each page, a rough visual format for components such as the form, and the overall page layouts.
Process
The sitemap, in fragments, was used as the reference.
-
Each section and/or page of the sitemap that was wireframed went through a design review process, and revision. Each review meeting was carefully facilitated to ensure we stayed focused on the specific design issue at hand in order to make explicit decisions and move forward to other sections.
-
Sometimes, due to associations between some of the sitemap sections the wireframes were reviewed together so we wouldn't lose the big picture view when making some decisions.
-
I wireframed some of the more complex pages (e.g. search and document details) for Hebrew and Arabic content to help identify unanticipated constraints and to ensure that order of content and the overall layout were going to be practical across all versions of the site.
-
I frequently looked into our existing data and tried to identify whether new decisions on data structure were going to imply inaccuracies in the designs, often on how and where on the site certain metadata were being designed for.
Typography for a multilingual site
The PGP site is designed and implemented in English, Hebrew and Arabic. Selection and styling of typefaces for three writing systems was a unique challenge and required a unique collaborative approach. Once I gained an understanding of our direction for the English typeface I began an extensive research on Hebrew typefaces. Since I do not read Hebrew, I sought to understand the characteristics of its letterforms, how Hebrew typefaces have been used in digital and print spaces, qualities of a legible Hebrew font, impressions associated with various typeface categories, and designers' perspectives on selecting typefaces. I conducted secondary research to learn about Hebrew typography, and conducted primary research by interviewing the project team, and designers who are native Hebrew speakers. The transcription text had to display different scripts in close proximity, and even in the context of internationalization, some field titles are always displayed in English. Therefore, for readability and visual coherence, it was even more crucial for typefaces to be close in width, height, and scaling. The typefaces also had to be comprehensive and suitable for long-term use, with support for special characters. This was a highly iterative process often segmented by language and content styles such as property lists, paragraphs, or composite components such as search results, requiring proposing a large variety of typefaces as a starting point for discussion with the research team, and revision until agreements were reached.
Design endeavors beyond PGP
It is standard to design and build searchable databases that allow users to find data/view search results based on their input, which is often sufficient for specialized projects where the users often know what they are looking for. However, this experience does not allow for exploring the database to find unanticipated data or relationships within the data. It is also neither an inviting nor engaging path for non-specialists as they often would not know what they should search for. Non-specialists, in this case, can easily be undergraduate students, or other potential Geniza researchers-to-be. For PGP, I proposed that we use a model to cluster the data based on potential thematic or topical relationships among the documents, which would ideally be able to surprise a Geniza researcher because they didn’t expect to see a document in a cluster they were exploring. The cluster view for exploring documents would be in addition to traditional search. I created wireframes and the dev team prototyped it, I conducted one round of usability testing on it, which in fact validated the idea and brought in more inspiration for ways it could be used in the classroom and teaching. The team experimented with various machine learning models, however we could not get the results we intended without more data work. We eventually agreed to call it out of scope as it did not make it to the top list of priorities for the project team’s research. However, the leadership team at the CDH see the potential of this idea and are planning to investigate and research its scalability in multiple CDH projects, beyond the PGP.
A simplified and encapsulating view of project pieces
Research findings on the overall researchers’ process, and complications in the data were presented to the team as quick infographic sketches and reviewed them together to make sure we share similar understandings. Annotated guides were also created for various types of fragment-document relationships. Some of these infographics proved to be helpful as team members used them at various meetings and presentations to convey a high level context of the project.
Sitemap as the foundation
Designing in an agile development methodology it is important to be able to break down design tasks as much as possible to work in a more iterative and collaborative manner. The PGP sitemap consists of details on hierarchy, connections, feature and content, therefore it became a perfect base to plan and prioritize design work and as a medium to bridge design and development in terms of priorities for the public site. I broke down design tasks by selecting sections and pages represented on the sitemap. This was an effective and systematic approach to keep us consistently in touch with the sitemap details throughout the course of the project. It is a way to incorporate the elements of the design process more organically with an agile mindset.
UI design and components
Once the goals of wireframing were reached I began to revise details of the page layouts and the grid.
At this stage I mainly focused on UI components. I broke down design tasks by UI components, including the header, footer, search form, tabs, and content styles such as the search results and other content pages. Each of these categories would contain four variations: desktop, mobile, light, and dark mode. This strategy tremendously helped in maintaining a manageable and agile workflow
I designed aspects of components that were not dependent on color, then I paused and began my work on the visual design, typefaces and colors.
The UI components were designed using Figma’s autolayout feature which allows all the elements of a UI component to be systematically structured vertically and horizontally. The autolayout containers also serve as an easy documentation of the spacing and marginal specs for developers.
Color
I conducted a short round of secondary and primary research to understand the tones and colors that would be relevant to the project with respect to its data. I then selected a variety of colors, tested the primary colors on the UI designs, and on lighter and darker backgrounds to understand their capacity for web accessibility. I presented the options to the team, where we slightly adjusted the tone of the colors, and I tested for accessibility again. Once we reached a happy medium we arrived at the color palettes below. Because the team liked both green and pink, we decided to use green as the primary color for the site's light mode and the pink for dark mode.
Visual Elements
We incorporated some of the hand drawn visuals from the manuscripts into the site through menu’s active styles and content separators, quotation marks, bullets, and light/dark mode toggle. This was done in collaboration with a research assistant and the Co-PI who were familiar enough to find fragments with visuals that were relevant to our UI needs.
Site's overall visual theme follows the concept of "joins". Some Geniza fragments that were once part of the same page, quire, or codex are now separated into two or more fragments and sometimes housed in separate institutions. Scholars have been identifying some of these fragments and “joining” them, therefore referred to as “joins”. Joins are a unique quality of PGP and have impacted the data structure. The design of the header, footer, banner on the homepage, and the logotype symbolize this concept.
