Aftermath: Puerto Rico Rebuilds After Maria

A multimedia documentary story-telling project with the UNC School of Media and Journalism.

Website: unc.edu
Date: April 23, 2018

From the about page:

We are a group of student videographers and photographers, web designers and developers, reporters and faculty brought together by a common goal: to share the voices of Puerto Ricans living in the aftermath of Hurricane Maria. We hope the stories of how they are coping and rebuilding can serve as lessons for future natural disasters.

We also wish to inform our audience about Puerto Rico’s recovery and encourage more people to get involved and join the conversation.

We are a part of an annual project by UNC-Chapel Hill’s School of Media and Journalism. In past projects, students have reported across five continents and produced award-winning multimedia work. As students, we’re learning the rewards and challenges of reporting on different cultures; as journalists, we are working as a team to tell the stories that are shaping the globe.

On this trip, about 30 students were selected to form a team of ten videographers, five reporters, two photographers, eight designers/developers, and one public relations person. During spring break, we spent a week and a half in Puerto Rico reporting on stories.

I worked as a designer and developer to build interactive graphics and features for the photo galleries on the website and for the “A Fight for Life” story, as well as contributing to overall site design and construction.

Please check out our site and our process below!

Photo by Alex Kormann

Project Goals

  • Inform audience about Puerto Rico’s long-term recovery after the storm.
  • Share these stories and keep Puerto Rican voices in the national conversation.
  • Continue a conversation and build a record of long-term natural disaster recovery efforts to encourage, engage with, and share the lessons learned.

Design Goals

  • Create a site with a unified design that highlighted the visual and text content of the stories.
  • Build a user-friendly experience that seamlessly connected all the individual stories and encouraged exploration.

Design Process

Photo by Alexis Fairbanks 

Working on this project provided me with my first experience in UX/UI site design as well as coding a site for a real world project. I worked with other designers, developers and my professor to come up with designs for the story pages, my story interactive and the photo galleries.

You can see the progression between my sketches and the final pieces!

Sketches

Final Story Page

Sketches

Final Interactive

Final Design and Development

Photo by Alexis Fairbanks

After refining our designs after group discussions and prototyping, we began coding the website. We worked on the mobile version as well as the desktop to make the site responsive. I worked extensively with Bootstrap, ScrollMagic, Masonry.js, Node.js and many other libraries to help build the final site.

Check out our GitHub repository to see our full code and structure!

GitHub

Leave a Reply

Your email address will not be published.