This is a semester-long interdisciplinary project by students at the Entertainment Technology Center at Carnegie Mellon University. Our team is working with a client to address their needs, while receiving guidance from faculty.

Our Client

The HistoryMakers is a national 501(c)(3) non-profit research and educational institution committed to preserving and making widely accessible the untold personal stories of both well-known and unsung African Americans. Their website contains several thousand videos of first person interviews with a broad range of African Americans in terms of education, economic and social status, political affiliations and religious beliefs, who share personal and family memories stretching from the 1700s to the present.

Our Work

The goal of our project is to meaningfully and respectfully transform the HistoryMakers data and content in a way that will help young people relate to the people and stories it contains. Our hope is that people will be motivated to dive deeper into the archive on their own afterward.

We are exploring 3D web graphics, data visualization, and playful interactions that will attract young people, aged 20-29. We want to create a browsing experience that helps people find personally relatable content in a quick and fun way. The experience is intended to be an introduction to the archive, not a replacement, aimed people who are not sure who or what to search for initially.

The deliverable will be a complete and polished web experience for mobile and desktop devices that uses publicly available content from the archive (full access requires a subscription). Along with written documentation, the code base will be given to the client’s tech team.

Technology

This project used Node.js and npm to run a local server for development and webpack for deployment. The 3D aspects of the interface and animations were done with THREE.js and Tween.js. Interaction with 3D objects and creation of “3D” text are done with our own implementation. Styling is done with vanilla CSS. Github was used for version control.