Redesigning the Dartmouth Digital History Initiative
Helping oral historians conduct research faster — browse, analyze, and visualize interview data.
Role
Lead Designer
Team
Tools
Figma
Duration
10-week sprint, January - March 2023
Analyzing oral history research is time-consuming
Historical interviews can be multiple hours long, leaving researchers with dozens of pages of transcripts to parse through. Synthesizing insights from these transcripts — which is often done with pen and paper — can be an arduous and frustrating task. Few digital tools exist to help historians complete this process.
The DDHI digitizes this process. Users can upload their interview transcripts into the backend of the DDHI as XML files. Our software processes these files, creating an interactive tool for historians to browse their interviews.
Two main problems with the old website
Before
Redesign goals
Overwhelming
Intuitive
Users should be able to navigate the new website with ease. Potential areas of confusion should be limited.
Lacking features
Feature-rich
The new website should give users the variety of tools they need to complete historical research.
Design audit to identify key UX challenges
My team conducted a design audit identify key areas of improvement within the old website.
User interviews with leading experts
My team conducted interviews with historical researchers at a variety of universities, including University of Kentucky and Wesleyan College. Here were the key insights:
Collaborated with engineers to craft an impact effort matrix
We made four major design improvements
Styleguide refresh
Our team completed a styleguide refresh to create a clean, modern interface as requested by our client. We implemented a simple color scheme primarily using white, grey, and blue tones to evoke a sense of trust and reliability. This aesthetic was inspired by established historical research tools like ProQuest and JSTOR, known for their straightforward and organized interfaces.
New styleguide
Transcript
The transcript is the foundation of oral history research, serving as the primary source for historians to analyze narratives and extract valuable historical insights. In our design process, we tackled this feature first because it's critical to the functioning of this tool.
1
Unclear selected state — no indication of what user has selected.
2
Overwhelming colors — various highlights detract from focus of page.
Before
We implemented several key changes, which enhance the user experience by making the transcript easier to navigate, analyze, and interact with, ultimately speeding up the research process.
After
Lower cognitive load
Users don't have to remember what term they've selected — it's made clear through the yellow highlighted state.
More ways to engage
The popup gives users more flexibility in how they interact with the term. View it in the data viz, Wikipedia, and more.
Entity Browser
Researchers struggle to maintain an overview of key entities (people, places, events) across lengthy transcripts, leading to missed connections and repetitive searches. The "Entity Browser" captures the most important aspects of the interview and presents them in a way that's easy to browse.
Before
1
Not scannable — users missed key terms during user testing.
2
Unclear functionality — three dropdowns with unclear purposes
We switched from the grid format to a table layout to prioritize clarity and efficiency. This decision was driven by user feedback indicating difficulty in quickly identifying entities. The table format allows for easy scanning and sorting.
After
Tabular format improves findability
Users can easily sort and scan entities, reducing the time spent looking for specific terms.
Metadata visibility
Instead of having to rely on a key, users can easily view the metadata (instance number, ID, and tag) of their entities.
Changing interviews
Before
In the old DDHI website, changing the selected interview was accessed by this sidebar. But in our user tests, we found that users engaged with this sidebar infrequently, so we explored new ways of organizing this information.
In our first round of greyscale iterations, we explored moving this sidebar to the bottom of the page. But we realized the interviewees list still occupied too much screen space. Instead, we created a collapsible sidebar, allowing users to focus on the transcript and visualization.
Initial iteration: Interview list on bottom
Second iteration: Interview list as hidden sidebar
We refined the design, which ultimately ended up resembling the original interviewee list structure. To provide more context into each interviewee, we added a headshot and short bios.
After
We designed three new features
In addition to feature improvements, we added the following features at the request of our client.
Data Visualization
Iterations
Final Data Visualization Design
In the end, my team and client selected the design shown to the right. The entities are organized with a y-axis showing the number of times the entity is mentioned in a single transcript. We decided to keep all the circles a single color to maintain a simplistic interface.
Multi-Interview Visualization
Our partner wanted to analyze multiple interviews simultaneously, but we struggled to find an effective way to visually compare two interviews. The complexity of this task was compounded by two factors:
Comparative Analysis: We needed to highlight not only the unique elements of each interview but also the shared entities between them.
Information Density: Each interview contains dozens of entities, so the visualization must capture a large amount of information in a single snapshot.
During our first round of iterations, our team came up with the following options:
Ultimately, we chose a variation of option 2, using a gradient to visualize shared terms. This helped us soften the overall look, while still capturing the duality of these terms.
Here is the final design.
Final Solution
Dive into oral histories with the transcript
Presenting interviews in an easy-to-read format with prominent entity highlighting.
Quickly browse key ideas of a transcript
The entity browser condenses a transcript's data into key entities — people, places, events, dates and organizations.
Easily toggle between interviews
Navigate between interviews in a research collection.
Visually compare two interviews
Through the multi-interview visualization, historians can compare the contents of two interviews.
