Dartmouth Digital History Initiative

Redesign

0 to 1

Shipped

Helping oral historians conduct research faster. Browse, analyze, and visualize collections of interview data.

The Dartmouth Digital History Initiative (DDHI) is a web-based platform developed in partnership between the Digital Applied Learning & Innovation (DALI) Lab and a Dartmouth history professor.

ROLE

Lead product designer

TEAM

Three designers
Three developers
One product manager

TOOLS

Figma

DURATION

10 weeks
January - March 2023

BACKGROUND

Exploring and analyzing oral history research is time-consuming and tedious.

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.
‍
At the start of my involvement with this project, a working DDHI prototype had been developed by our partner, a Dartmouth history professor. My team's role was to improve upon this prototype at the guidance of our partner.

METRICS FOR SUCCESS

Guided by our UX research and our client, a Dartmouth history professor, we developed three general metrics to measure the success of our designs:

EFFECTIVENESS

Easy-to-use and effective tool to analyze transcripts.

DEPTH OF DISCOVERY

Help historians uncover rich, new insight.

CAPABILITIES FOR VISUALIZATION

The ability to see a visual snapshot of an interview.

USER RESEARCH

Conducted user interviews with leading experts in the space

The design team led interviews with experts in the digital history space, including a professor at the University of Kentucky and Wesleyan College. In addition, we met with our client, a Dartmouth College professor, on a weekly basis. He offered us insight into his oral history research process.

USER PERSONA

Utilizing research to craft a persona

Unlike previous UI/UX projects I've worked on, the DDHI's target user can be summed up in one user persona, "The Pen-and-Paper Persona."

HEURISTIC EVALUATION

Assessing the limitations of old designs

I utilized Nielsen Norman's usability heuristics to understand existing user experience challenges of the old designs. These heuristics also served a dual-purpose as guiding UX principle in our redesign.

Visibility of system status. User's location and available actions should be visible at all times, and not obscured by dropdowns or other pages.

Match between system and real world. Oral history is about people. It's important that designs reflect the humanstic nature of the discipline.

Recognition rather than recall. When comparing interviews, users shouldn’t have to rely on their memory to recall important details.

Click image to zoom

Annotated screenshot of old designs

I pinpointed the key pain points of the old design's UI, referencing the usability heuristics above. My annotations were also informed by our initial user research.

INSIGHTS

User and market research gave us two guiding insights

Less complex research process

Users want a straightforward platform to ameliorate the complex, nuanced oral history research process. We need to design a solution that makes the process more efficient without compromising the quality of research.

Wider breadth of tools

The old platform didn't give researchers the breadth of tools they need for their research. We need to design a new solution that captures the richness and nuance of oral history transcripts, without oversimplifying its data.

IDEATE

Initial feature brainstorm from design team

Click to zoom

Collaborated with developers to craft an impact vs effort matrix

To understand what features were feasible for our product, we worked with developers to put together this matrix. We selected mostly low-effort, high-impact features with one high-effort, high-impact feature at the client’s request.

Here are our three most important new features:

A word map-style visualization that can show the content of an interview in a single snapshot. The size of each word correlates to the number of times it is mentioned in the interview, to address the importance of frequency as discussed in our user interviews.

Capability to analyze multiple interviews at the same time. This functionality can be applied to both the visualization and map tool, where the contents of two interviews are displayed simultaneously.

A search tool will help researchers quickly find terms of interest within the transcript. This tool can also be expanded to an entire collection of interviews so that users don't have to search through each individual transcript.

INFORMATION
ARCHITECTURE

To better understand the relationships between these features, we created a simple information architecture diagram.

This diagram helped us better understand the scope of our project by clearly laying out each section. It also informed the interactions we designed between different sections. For example, how does the transcript change when we go from single interview to multi-interview mode? Or how do we design an entity browser that holds entities from both interviews? We referred to this chart throughout our design process to maintain consistent design.

Click image to zoom

SKETCHES

Ideating on page layout through sketching

Pros: Interview list is accessible and easy to scan
Cons: Visualization and transcript have less room on the page

Pros: Visualization and transcript given the most amount of room
Cons: Interview list can be collapsed, meaning it's harder to access

Pros: Visualization and transcript given lots of room
Cons: Interview list presented as small cards, making it harder to read

LO-FI GREYSCALES

Feedback on layout designs through design critique

"The stacked content"

Pros: Interview list is accessible and easy to scan
Cons: Visualization and transcript have less room on the page

"The space maximizer"

Pros: Visualization and transcript given the most amount of room
Cons: Interview list can be collapsed, meaning it's harder to access

"The side-by-side"

Pros: Visualization and transcript given lots of room
Cons: Interview list presented as small cards, making it harder to read

Winner: "the side-by-side"

Because the interview list is placed at the bottom, it is be visible to users at all times without compromising size of the visualization. This allows the visualization and transcript to take up the bulk of the page, a feature important to our client.

Created dozens of greyscale iterations for each feature

INITIAL HIFIS

We began our initial high fidelity designs with a simple color scheme and design system.

Click image to zoom

Our client asked for a clean, modern looking interface, so we used a simple color scheme of mostly white, grey, and blue. We wanted to build a sense of trust and reliability through this aesthetic.

We sought inspiration from other historical tools such as ProQuest and JSTOR, both of which have a straightforward, organized interface.

FEATURE #1: TRANSCRIPT

Balancing cognitive load and discoverability in the transcript

The transcript is the heart of oral history research, so this feature served a foundational purpose within this tool. Through our user research and heuristic analysis, we concluded that the old designs are overwhelming. Each entity is highlighted in an eye-catching color, and it's unclear what term was actively selected. While having every term in the transcript brightly highlighted helps users discover new terms, ultimately it created unnecessary cognitive load, as users had no visibility of system status.

First round of hifis

Second round of hifis

Client's original version

Final version from team

Unclear what the colors correspond with, can be overwhelming at first glance

Users aren't sure what the selected state is

One term highlighted at a time -- lower cognitive load

Popup gives users the option to engage with an entity through multiple tools

FEATURE #2: ENTITY BROWSER

Shifting to a tabular format for better text scannability

In the entity browser, each row represents an entity in the transcript, and users can easily browse and toggle through these. We started with a very plain design as shown in the first two screens below, before adding a pop of color through various tags (e.g., "event", "place", "person", etc) as a way to organize the information.

Greyscale

First round of hifis

Second round of hifis

Client's original version

Final version from team

Not easily scannable, users missed key terms during our initial user testing

Overwhelming number of dropdowns

Meaning of numbers is labeled at top of table

Much easier to scan, resembles a spreadshet with data

FEATURE #3: VISUALIZATION

Creating a visual representation of an interview

How might we communicate the content of an hours long interview in one snapshot?

The primary metrics of this visualization were an entity and the number of times it is mentioned in a transcript. Our iterations capture these metrics though size, saturation, spatial positioning and more.

Final visualization designs

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.

FEATURE #4: MULTI-INTERVIEW VISUALIZATION

How can we compare two interviews in a single visualization?

From the beginning, the ability to analyze multiple interviews at the same time was an important feature for our partner. However, we struggled to find an effective way to compare two interviews through our visualization.

The multi interview visualization contains three components: entities from interview 1, entities from interview 2, and shared entities amongst both interviews.

The Challenge

Capture shared entities in an intuitive way, especially given our target users' lack of technological expertise.

Option 1: Solid colors

Option 2: Divided circles

Option 3: Grouped circles

Too many colors having shared term in yellow isn't intuitive

Easiest for developers to implement, given the simplicity of the designs

Half-divided circles are quite harsh on the eye and not easily readable

Clear that term divided in half are shared

Tricky for developers to spatially position and implement dotted outline around circles

Shared terms are readable and able to maintain original color

Final multi-interview visualization

We selected a gradient to show shared terms. We liked the concept behind the divided circles, but found them to be too harsh and eye-catching. Using a gradient helps us soften the overall look, while still capturing the duality of these terms.

FEATURE #5: SEARCH

Quickly find terms of interest —
no more Command-F!

In the old designs, users used Command-F to find terms within the transcript. We designed a search popup so users can quickly find a term within a single transcript and all interviews in a collection, creating a more streamlined research experience. Here are some of the UX choices that informed our designs:

Power of human connection. We included photos of interviewees to show the people behind the stories.

Keyboard navigation for increased accessibility. Users can click through terms with the up and down arrow keys.

Final version

Specs

ONBOARDING

Utilizing progressive disclosure in product walkthrough

To help users become acquainted with our product, we created an onboarding experience that teaches users about the DDHI's primary features. We highlighted only one component at a time to draw attention to each feature through progressive disclosure. The goal: help users — particularly those who are less familiar with technology — develop confidence with the DDHI tool.

PIVOTING LAYOUT

Usability testing feedback led us to change the layout

While having the interview bar at the bottom of the screen was initially preferred amongst usability testers, we ultimately decided to move the interview list to be a collapsible side bar.

Better use of page real estate. The changing interviews feature wasn't used as frequently as we initially assumed.

Convey more information on interviewee. With the vertical sidebar, we have room to include a description.

Final, prototyped sidebar

We added micro-animations to make the experience interactive and delightful for users.

FINAL HIFIS

Click through our final collection of designs

Entity Browser

Map

Change interviews

Multi-Interview Visualization

Single Interview Visualization

SOLUTION

Improving the quality and efficiency of oral history research through a pioneering digital tool.

View a list of entities in the entity browser

Researchers use this tool to quickly scan over all entities in a transcript. Clicking on an entity will highlight the term in its respective transcript.

Browse an interview's locations in a map

The map tool gives users a visual representation of all places in a single transcript. It gives users a new medium to understand the content of an interview.

Easily toggle between interviews

Historians can easily navigate between interviews in a collection, improving the efficiency of research collection and analysis.

Compare two interviews

Through the multi-interview tool, historians can compare the contents of two interviews through multi-interview visualization.

REFLECTIONS

Learnings from this 10-week sprint

Mentoring a team takes intention and care

This project was my first experience leading a group of other designers, and I learned valuable lessons providing structured feedback and helping new designers build confidence.

Client communication

Creating a product for a client requires clear communication. Setting clear goals and regular check-ins makes the process go smoothly.

Handoff to developers

Thorough and detailed documentation is imperative to ensuring a smooth handoff with developers. This project honed my ability to work across disciplines to talk through product challenges.

Fine-tuning UI

I designed micro-interactions and pixel-perfect screens to take the product's look and feel to the next level. It's all in the details!

Check out some of my other projects!

UI/UX DESIGNER

Presidential Commission on Financial Aid

Illustrating the transformative impact of financial aid through a parallax storytelling website

LEAD UI/UX DESIGNER

Students Against Violence

Showcasing the work of Dartmouth student organizations dedicated to preventing gender-based violence