CPJW- Case Study

Background

The Carolina Photojournalism Workshop (CPJW) is an annual UNC run multimedia project where a group of students complete a multimedia project in one week. Each year a group of UNC multimedia students travel to a unique part of North Carolina to produce a series of documentary stories about the location, people and its community. This year’s workshop took place in and around the Roanoke Rapids/Lake Gaston region of North Carolina.

The stories are then housed in a documentary website, the focus of which is this case study. The entire project from inception to completion took four months.

I was the lead designer and developer on this project, working alongside a talented developer who did a lot of the heavy javascript lifting.

The Process

The director of the workshop (the client) and I drew out many concept designs for how the website would be. In years past, the site has stayed similar and consistent, and we wanted to try something different that would provide several layers of interaction for the users.

The key design elements the client wanted were a strong focus on the visuals, clean and easy to navigate design, and full screen videos.

Using WordPress was the optimal choice because it allowed the workshop participants to upload and edit their own content from the front end, while providing a structured framework and robust control from the backend. I choose to develop from a preexisting theme instead of building my own there so that I could focus my time on the interface and experience of the site, instead of using it coding the structure. I ultimately choose the amazing Ink theme from Themeforest because it had excellent support and documentation and an ideal structure for highlighting visuals and multiple stories.


The initial development work was building a child theme and setting up the front end so that the workshop participants could upload their stories. We created new screen options within WordPress that fit our needs, and set up user accounts for each participant and an accompanying blog post that only they could access and edit with their content.

While previous years have been developed on WordPress, the powerful CMS has never been fully utilized. Because we focused a lot of initial energy and effort on implementing a clean and easy to use front end, the client praised our work, saying that this was the smoothest and fastest content ingestion in the ten years of the workshop.


The next step was to create the pages functionality. I created a separate template for the about and contact pages so that we would have full control over the layout and structure as the theme didn’t fit out needs. This and the actual story posts were an easy process, and we quickly had the full screen videos that the client requested. Because of the clunkiness of the default Vimeo player in which the videos were loaded through, we choose to include a full screen click-through poster frame for each story. This provided a more elegant aesthetic and allowed for a more sophisticated level of interaction from the users.

The main challenge was the home page, because the client requested that each story have a short teaser video that played on rollover and toggled between the video and a poster frame with story information. We tried using gifs but the quality was very poor and ultimately settled on compressed mp4 videos and jpg images that were called from a Javascript file in the backend and selected from the WordPress dashboard.


Once this was solved, we need needed to accommodate the client’s request for an intro slide that relayed the necessary information about the project but still fit the aesthetics of the theme. We tried several different options, including a still image with a click through video that played on the main home page as well as a rollover video. At this point, we roped in several designers and workshop participants to give us feedback. As this was the first thing users would see and interact with, the intro slide was arguably the most important aspect of the website, and our testing, while informal and non-comprehensive, was vital to the success of this website.

There were obvious user problems was a rollover video that took up the entire viewport of the landing page, and we decided to go with an automatically playing teaser video similar to the rollover videos of the stories below. We did then another round of informal testing for 3 different teaser videos, and decided on the current scene of the truck, as it fit with the overall theme of the project and was the most successful in terms of user interest and appeal.

Challenges

There were many technical challenges of this project due to the ambitious nature of the interactivity. Initially wanting this to be a single page site, there was much back and forth about getting the client to understand the technical limitations. We finally came to an agreeance that putting all of the information on a single scrolling page was improbably both because it would create an insurmountable amount of data to be loaded and would be a cluttered user experience with too much information to absorb at once.

There are still bandwidth limitations because so much data is being loaded at once on the home page. While we compressed the videos and images down as much as possible without losing quality, there is nearly 40 megabytes trying to load instantly, and unfortunately users with slower bandwidths have trouble processing that much data. Because our target audience is multimedia professionals and students, they typically rely on visual and graphic heavy websites and both understand the limitations and have higher internet speeds.

Site Launch

This project has been successful in multimedia and journalism contest in the past, and we launched the site in time to be eligible for entry for the contest circuit, which also conveniently coincided with the start of the fall 2015 school year. Because this is an academic project, we publicized it primarily within the academic channels of UNC.

Further results and metrics will be updates as contest and festival results come in.

Screen Shot 2015-11-04 at 1.31.32 PM Screen Shot 2015-11-04 at 1.31.43 PM Screen Shot 2015-11-04 at 1.32.19 PM

RETURN TO PROJECT