Tasked to redesign the African American Film website for my UCLA Digital Humanities minor capstone project with 8 other students.
Revamp and revitalize a previous Digital Humanities Project, Early African American Film and better showcase its uses and achievements.
UX Researcher & Web Designer
Responsible for conducting user interviews and designing/developing the final website prototype.
Remi Kim, Charlotte Breslin, Miguel Gutierrez, Janet Luu, Stacy Li, Jonathan Liu, Wendy Trang, Genesis Carrillo
Spring Quarter 2018, 10 Weeks
Research was conducted by gathering data and insight from stakeholders and users, performing an environmental scan, and evaluating the original content of the website. Our team interviewed the original project team, professors, research professionals, students, and film enthusiasts, as well as conducted card sorting activities using the original navigation header sections and content. We discovered pain points of the website such as confusion about the purpose of the website and its function, disorganized layout and navigation, and visually unappealing UI due to an outdated look and heavy text.
Our team then developed solutions to the pain points in terms of the information architecture, content, and design. We restructured the information architecture to ensure that excessive information doesn’t distract users from the mission of the project. The new information architecture prioritizes data and sources over other aspects of the project, and condenses much of the information.
As for content, we added more information on the project itself such as an overview, a mission statement, and related press since we have found that the purpose of the site is not as explicit as it could be. This allows new visitors to gain context before diving into the rest of the website. We also created individual instructional pages for each data tutorial so that users can learn directly from the website rather than be directed to an external Github page.
As for the overall design, we changed the website hosting from Wordpress to Github combined with Bootstrap to allow more creative freedom to revamp it and make it look more modern. The updated look still maintains a black and white theme with an added pop of color. The navigation header was edited to reflect the new information architecture. In the body, heavy text was broken up into digestible block sections with relevant images or animated video backgrounds combined with parallax scrolling to entice visitors to keep reading. Buttons linking to relevant pages of the site are placed throughout the body of most pages to guide visitors through the website without using the navigation header.