Improving the Exploration and Content-Consuming Experience of an Online Archive of Interviews
Don't Die, Jan 2023 - May 2023
Problem Space:
Redesign a web archive hosting journalist David Wolinsky's interviews about online culture and the internet of today, improving on the user experience and encouraging content consumation and exploration.
​
Target Users:
-
People interested in learning about online culture
-
Hobbyist gamers
-
Game designers/developers
-
Journalists and academics
​
The Team
-
UX Designer and Researcher: Gabi Augustin, Yifei Chen, Jiyun Lee, Proud Taranat, Harvey Zheng
-
Client: David Wolinsky
-
Engineer: Giles Copp
​
My Part
I took part in user research and redesigning the information architecture and visual language of Don’t Die that improved on the website's usability and user experience. I acted as the liaison between the team, the research participants, and the client, to make sure that the communication and delivery of ideas are transparent and smooth. I also worked with the client's engineer to discuss the technical feasibility of our design and the final deliverables.
Don’t Die started with...
Gamergate - a controversial online movement that started in 2014 within the gaming community. It was originally sparked by allegations of corruption in gaming journalism, but quickly snowballed into a largescale harassment campaign against women and minorities in the industry. The movement had a significant impact on the gaming industry and online discourse around gender and diversity in gaming.
Although time has passed, the lingering impact of Gamergate on our culture remains profound throughout not only the gaming industry, but online culture overall.
In response to the events of Gamergate, our client -- David Wolinsky, an author, journalist, and researcher created Don’t Die: An interview series logging the thoughts, reactions, and feelings of those inside and out of the gaming industry
​
The goal of Don’t Die is to preserve internet cultural milestones such as Gamergate through oral history.
Since its conception, the web tool has grown beyond the original realm of video games and focus of Gamergate, now aiming to explore culture wars online, what we can learn from yesterday’s internet, and the way the past affects our current cyberculture.
Don't Die also frequently discusses misogyny, labor division, and issues within the entertainment industry.
David has currently produced over 200 interviews and aims to keep documenting his future conversations.
​
With this in mind, we set our initial problem statement to be
How might we help visitors of Don’t Die be informed through the interviews and reflect on the history preserved by them?
To understand what Don’t Die is and could be
We did secondary research on archives and online culture to get a general understanding of the context of our project. We found some common and user approved ways of organizing the information within an archive such as chronological order, categorization, a search function, and a tagging system.
Some archive websites we studied on
We conducted contextual inquiry with professionals in the gaming industry, journalists, and academics, as well as curators and designers of both traditional and online archives in order to understand the needs and opinions of our potential users.
We learned that:
-
Interviews on Don’t Die are conducted often unstructured and conversational.
-
Online culture and games are influenced and contextualized by the political and social factors.
-
The internet culture lacks organized academia and records.
Contextual inquiry interview screenshot and affinity map compiling the information we got from research
Our user research with Don’t Die uncovered a number of pain points:
-
The current site misrepresents the project direction, with most new users thinking the main focus is on Gamergate.
-
The site has a high barrier of entry for reading for users without sufficient background information, leading to reading dense text and discouraging user experience.
-
Users outside of the industry have a hard time discovering interviews / topics of interest.
The current website
From the research results we gathered, we formulated a list of potential users and improvements for the site for our client to rank through co-design activities:
Prioritized Goals
-
Don’t Die as an online archive resource
​
-
Don’t Die as a rabbit-hole exploring experience
​
-
Don’t Die as a beautiful artifact
Prioritized Users
-
Non-industry people interested in online culture and games
​
-
Hobbyist gamers of all ages
​
-
Rank-and-file employees
User Persona and Journey Map
With more information and better understanding of the project, we refined our problem statement:
​
How might we help visitors navigate and consume the content of Don’t Die with greater ease while encouraging them to dive deeper into Don’t Die and the internet and its past?
Visualizing features and information architecture for better navigation, readability, and interaction.
We produced some lo-fi sketches of features and interactions and an information architecture or the site from both our research results and client priorities.
Some lo-fi sketches we drew
Information Architecture
From user testing, we found that:
Rose:
-
audio player
-
overview information
-
highlights
-
contextual information
Bud:
-
tagging system
-
minimalistic design
Thorn:
-
indices not very useful
-
too much information
-
not interesting enough
-
“too safe”
Moving from lo-fi to mid-fi, we wanted to further develop and flesh out the ideas that worked, such as the overview of interviews and the tagging system. We also worked on visualizing the information architecture of the designs as sitemaps and wireframes. Additionally, we explored “unsafe” and bolder designs to address our client’s comment.
Improving the exploration experience
using contextual information, bolder layout, and small interactions.
Moving into mid-fi, while continuing to iterate and improve on the usability of the site, we wanted to help users become more engaged with the contents of the website, and use it to learn more about the history of the internet through a more interesting experience.
​
To start, we wanted to try making the site more experimental, rather than just add basic usability features like we did in lo-fi. We started by examining websites that we thought did a really good job of organizing their material in an engaging and different way to the reader. This included how they add context or organize their information architecture.
​
We also experimented with how to add historical context to different articles, based on the years they were published.
Mid-fi screens with contextual information accompanying the interviews
In addition to the contextual layouts, we also experimented with several different prototypes of the home page, where the user can browse through all the interviews. These prototypes included some fun interactions, such as a color changer.
Mid-fi screens with different layouts
We conducted user testing on our prototypes with the prioritized users, the non-professionals with interest in games and online culture, and here are some quotes we collected:
“ I think the little headlines/one liners are nice: It almost is a bit click-baity, but it’s a good way to do it and draw people in. They feel interesting, it makes me asks questions and it’s nice I can hover over it and see a summary or just click on it there. ”
​
“ Really like having contextual information, would be better if it accompanies the interviews. ”
“ Main catch for reading an interview is the key quote. I think having too much to read off would be a lot, it’s nice having a little blurb. ”
“ Tag system is really nice already, would like encouraged reads based off of ideas or a random button. ”
Some major insights include that:
-
We need to balance the amount of information displayed to the user.
-
Users like small and simple interactions that keep them engaged.
-
Users like contextual information alongside read that is collapsible.
-
Challenges with incorporating the client’s style with users’ preferences.
​
After further inquiry with the participants and our client, we found that the users like the information hierarchy of the card designs, which provide concise information on the cards and collapsible sidebar for contextual information. They also think the interview card layout is more conventional and what they were used to seeing. Our client preferred the visual design of the list prototypes because it is more different than their previous website, and they would like to try something new. They also like the fact that it would also allow the users to view the interviews and other information with less clicks.
With this information, we were able to integrate the preferences of both the users and the client and converge the design.
​
Don’t Die isn’t just a tool/service/platform...
It is also
​
A passion project An archive A documentary A work of art
​
For us, it became just as important that the work we made represented the visual sensibilities of our client as well as the nature of the content. This led us to consider things like typography, color, and image treatment. the following are a small snippet of those explorations.
Typography explorations
Exploring image treatment
Exploring visual layouts and color palettes
Different ways to present contextual information
We strayed away from visual elements that felt too ‘corporate’ and embraced more unconventional design elements. We balanced the desire to be more bold with our design choices while still considering our usability test findings.
​
We also looked at other web experiences that were more experimental and design to not only be useful tools but also exist as beautiful artifacts on the internet.
Inspirations from the internet
Don’t Die’s final visual brand may seem very different to what you would see in typical user interfaces, but it was done intentionally to pay homage to the internet and its past.
Figma prototype
Reception
User Feedback
“The content is really interesting. I think the short briefs of the interviews are super helpful for me to determine if I want to sit down and read the whole thing. The color picker is a fun little detail to play with... It would be nicer if there’s a recommended read at the end of an interview.”
---- Participant K (student, hobbyist gamer)
​
“The contextual information definitely helps people put the interviews into perspectives. I like how they go side by side with the interview text. The interview without the context could be quite confusing and boring too for people without the background knowledge.”
---- Participant T (professor, game developer)
​
“It’s not just a vehicle for delivering content, but expresses the tone and context to be reflective as well. It serves well as a canvas that reflects the thoughts and contributions of David. It's not just a neutral frame but a living embodiment of the opinions and the hard work that have gone into it.”
---- Participant H (curator, David’s friend)
Client Feedback
“There's something about that slightly undone, initial look that really appeals to me. I also like the subtle nod it gives to games, kind of planting that seed in the reader's mind, even if it's just a subconscious thing. To my eyes, it adds a sort of pixelated, almost peculiar quality to the design; I find that kind of cool.
I think there's this retro computing flavor to it: it evokes that era of computing. It's the vibe I believe we should lean into, that subtle homage to the past without being in your face about it.”
---- David (our client)
Next Steps
In order to document our project work for client use, we created a design specification document featuring a full map of micro-interactions, all site user paths, and engineering requirements.
After passing this and our final report to the client, our final design is being implemented by the client’s partner engineer. With the new building out of the site, the client can publicize Don’t Die more and get back to curating and documenting interviews again.
​
In terms of work, we’d be excited to see expanded upon by our client, we think utilizing the metadata extracted from interviews to link them together in new and exciting ways such as creating connections between similar or different thoughts, or encouraged reads would be fun. In addition, we’d be interested in adding features such as personal user accounts, which could let users save to a reading backlog, store and sort interviews in personal digital bookcases, and share them to social media or autogenerate interview citations.
​
We are excited to anticipate the visitor analytics of the new site as well as how it will be received by the community. A documentary about Don’t Die is also in preparation, which we hope will bring more attention to Don’t Die and the important content within.
Design Specs from Figma
The Awesome Team
Gabi Augustin, Yifei Chen, Jenny Lee, Proud Taranat, Harvey Zheng, and our lovely advisor Derek who promised to make us pizza :)
