After the Shooting- Case Study


In February 2015, three Muslim students, Deah Barakat, Yusor Abu-Salha and Razan Abu-Salha, were violently murdered in the apartment in Chapel Hill, NC. 

The following day after the shootings, news crew poured in from around the country, the speculation began of whether the shooter’s motive was a hate crime or over a parking place, and #chapelhillshooting started trending around the world. A group of six classmates and I sat in the basement of the UNC school of journalism and debated what this meant in terms of the media, our school, and most importantly, our community. 

Out of that discussion came After the Shooting, a project to challenge the unfolding narrative by the mass media and try to start a dialogue on larger, societal issues sparked by this event.

We quickly agreed that this project would be interactive and live on the web to foster conversation between users regardless of their physical location. The team came up with four main themes that the current conversation was focused on: religion, hate crime, gun control, and the media. We decided that the best way to start an honest conversation of the public was to moderate actual conversations on these issues between community members, and then allow users to curate their own experience on the website.

The Team

As this was a documentary film course, video became the primary medium for this project, with the website functioning as the housing for this project. As I was the only student in the class with any web development and coding experience, I became the de-facto web developer and designer for the site.

The structure of the project was to facilitate discussions between leaders, and then on the website, users would be able to pick any two of the four categories (region, guns, mental health, and media) and observe an honest and raw conversation between these leaders. We took inspiration from the Washington Post’s N Word Project and The 36 Questions to Fall In Love.

We parsed out our roles into web, producers, art directors, film-crew, editors, and copy writers, but as this was such a small team with a quick turnaround of a month (our aim was to launch the project within a month), our roles quickly blurred.

I immediately began working on development tests for the basic functionality of the site while the rest of my teammates began researching experts in the community and scheduling these discussions. For the first week, during the day I would wireframe and do on-the-fly user testing, and in the evenings, I would be setting up studio lights and monitoring cameras during the discussions.

The Process

As a team, we sketched out the initial concept for the site, and I immediately starting doing test developments. Because the main functionality would be to click two topics and be able to watch a specified conversation, my primary concern was with developing these buttons and making sure they were actionable.

With such a short deadline and as the lead designer and developer, I sketched out a quick comp and immediately started building the first iteration of the site. Initially, the site opened with a full screen video and then prompted the user to answer a question before taking them to the main page with the videos.

The primary objective of this site was creating a fluid, storytelling experience for the viewer, so I chose to use a single-page site that would load and move throughout the sections using immediately without having to load separate pages. The limitations of this design choice, of course, is that to refresh one element of the site means starting at the beginning. However, because we wanted user engagement and to have this website function as a story or experience, the benefits outweighed the limitations.

The second iteration of the site was a shedding of any unnecessary elements and features cluttering or confusing the project’s mission. We held informal user tests, asking peers and colleagues to weigh in on the site’s content, and quickly realized that we needed to lose the prompted question (it created unnecessary bias) and have a splash page to create better user experience.

However, after developing a site that went straight from the intense, driven intro video to the main content, users felt overwhelmed and wanted a moment to breathe. I added an additional screen between the two that achieves this using a single line of text with lots of white space. It swipes down into the main content to continue with this storytelling experience, as though the user is beginning a new chapter or turning a page.

After second iteration of the site was complete, we then worked as a team to add the finishing touches, pulling everyone’s graphic design experience to agree on a logo, make poster frames for the videos, finalize the buttons and proofread the content.

Along with a developer friend, I ran through the code with a fine tooth comb making sure no div tags were out of place and all the Javascript ran smoothly.

Site Launch

After receiving interest from several mainstream news outlets regarding publishing, we decided to self publish the project to maintain complete creative control over the project and web experience. We creative an expensive marketing guide for social media, and recruited many people to begin a social media push on launch day.

The project was featured on several news outlets, including MTV News, Mediastorm, GOOD Magazine and the LA Times.

Screen Shot 2015-11-04 at 1.37.01 PM

Screen Shot 2015-11-04 at 1.37.13 PM

Screen Shot 2015-11-04 at 1.37.32 PM