early african american FIlm websitE

Tasked to redesign the African American Film website for my UCLA Digital Humanities minor capstone project with 8 other students.

PROJECT BRIEF

Revamp and revitalize a previous Digital Humanities Project, Early African American Film and better showcase its uses and achievements.

ROLE

UX Researcher & Web Designer
Responsible for designing/developing the final website prototype and assisted in the research process.

TEAM

Remi Kim, Charlotte Breslin, Miguel Gutierrez, Janet Luu, Stacy Li, Jonathan Liu, Wendy Trang, Genesis Carrillo

TIMELINE

Spring Quarter 2018, 10 Weeks

PROCESS

The Early African American Film website provides a platform for the purpose of raising awareness, promoting research, and highlighting the significance of early race film during the silent era. My team was tasked with reorganizing the site’s content to highlight and feature a more “digital humanities” approach - with a focus on data visualizations and how to work with the data. In order to do so, we conducted stakeholder interviews, user interviews, card sorting, and google surveys to gather the sufficient research needed to suggest site improvements.

USER RESEARCH

We applied a series of user experience research techniques to help us identify pain points and areas of improvement for the website.
Below are some key findings:

Stakeholders - Professors, Project Creators, Research Professionals

  • Emphasized highlighting the dataset
  • Rework the tabs, offer multiple ways of navigating

General Users - Students, Film Lovers

  • Did not understand the purpose of the site
  • Website overall was not as appealing as it could be

We organized the feedback we received into three categories: information architecture, design, and content.

USER PERSONAS

We created 3 user personas, each with different goals and frustrations. We created these personas based off of what personalities we believe would visit our websites. Below are our user personas, their personalities, goals and frustrations.

CARD SORTING ACTIVITY

To better gauge the most intuitive information architecture for the site, we ran three rounds of card sorting with the existing site information. We began with our own internal card sorting, having our own team rearrange information in a way that made the most sense to us. We then ran the activity with two other users who had never used the site before. From there, we summarized results from both external users and internal users, and averaged feedback from all parties into the new information architecture.

INFORMATION ARCHITECTURE

We restructured the information architecture to ensure that excessive information doesn’t distract users from the mission of the project and reallocated content to more appropriate locations to make the information more cohesive for the users. It also prioritizes data and sources over other aspects of the project, and condenses much of the information.

CONTENT

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.

DESIGN & WEBSITE DEVELOPMENT

As part of the Web Development subcommittee, I collaborated with two of my teammates to begin the website prototyping process. While the original site was hosted on WordPress, we hosted ours on GitHub to allow more creative freedom. We decided to create the website using Mobirise, a freeware web design application that allows users to create and publish bootstrap websites without coding. This allowed us to focus on the content and design of the project within the limited time frame available. There were technical issues where certain blocks weren't displaying the correct color. However, these issues were fixed by manually changing the code once they were uploaded to GitHub.

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.

ORIGINAL WEBSITE

NEW WEBSITE