top of page

Princeton Geniza Project

Duration

2 years

Design Expertise

UX research, Information architecture, User interface design, Visual Design

Tools

Figma, Adobe Photoshop, Adobe Illustrator, Github

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. In 2020 our team at the Center for Digital Humanities at Princeton partnered with the Princeton Geniza Lab to design and build a database for researchers to add, update and maintain the data and to make it available not only to Geniza researchers around the world but also to non-specialists including students and researchers in adjacent fields for more research opportunities and engagement with the data.

Design highlights

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. 

research-workflows.png

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. 

Geniza Sitemap – v3.jpg

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. 

image-transcription-viewer.png

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.  

cluster-search.png
cluster-2.png
cluster3.png

If you’re interested, below are more details on the research and UI and visual design processes.

UX Research

The key outcomes of the research were identifying specific design and development requirements for the front end. Some of the research results contributed to further inform our decisions for the new relational database.

 

Specific research goals were to understand,

  1. the data landscape 

  2. team’s mental model of the data

  3. Researchers’ goals, process and interactions with the data at the time, their needs and pain points and what they were satisfied with

 

I conducted interviews with 5 Geniza researchers, and conversed with our project team at group and individual meetings. Some of the key findings are summarized below : 

  • Researchers’ process:

    • Researchers find documents by:  

      • looking up the shelfmark (i.e. looking for a specific document)

      • exploring images of fragments as a gateway to a potential document of interest.

      • inputting keywords such as name of a city, or a topic, or a person, and search across descriptions (can be in Judaeo-Arabic or English) 

      • searching through tags that are relevant to their research such as “century” tags 

    • They use the PGP site as a starting point to explore documents, record their shelfmarks and then get more details about them on FGP (because FGP search is not easy to navigate)

  • One of the most important problems researchers were facing was the multi-step/fragmented state of the research process, that was caused by: 

  • The presence of multiple websites (library ones) which require log in, and which don’t allow the user to have more than one tab open at a time. 

  • Lack of an easy-to-use zoom feature on the FGP site, which would lead the user to create their own local inventory of images by taking screenshots of the images from the sites. Also, a lack of an opportunity for the researcher to compare images of fragments, recto/verso, and/or rearrange them. 

  • Lack of access to scholars’ documents, leading the user to search the internet (sometimes involving a 4th website like proquest) in order to find the documents, download them and find out whether it really has what they need. 

    • Proposal to have scholarship on the same page as the document.

UI and Visual Design (a joggling process)

Wireframes

I created wireframes, using the sections of the sitemap as points of reference. The wireframing process was used to agree on the order of content on each page, a rough visual format for features like the search form, and the overall page layouts. Below are the key points of this process,

  • 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.

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.

Screenshot 2023-05-09 at 1.49.58 PM.png
Screenshot 2023-05-09 at 1.56.03 PM.png

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.

color-research.png
colors.png

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.

visual-elements-research.png
Screenshot 2023-05-09 at 1.29.34 PM.png

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.

header-footer.png
logotype-pgp.png
bottom of page