macbook-mock-dribbble.png

Barriers

Barriers Development

Overview

Summary: My Global Storytelling class’s assignment for the semester was to research, interview, and share the stories of people in Belize about their relationship to their environment. I was part of the interactive team which designed and implemented the website. I was one of two developers that coded the barriers.unc.edu multimedia long form journalism website.

Class: MEJO 584 Global Storytelling

Programs Used: Adobe XD, Adobe Illustrator, Hugo.io, GIT

Languages Used: HTML, SCSS, Javascript, GO

website.png

Assets

I collaborated with designers and multimedia experts to design the assets for the website like the wave motifs and the content structure of the website itself. The content of the website was provided by reporters, photographers, and videographers. Without their hard work on the ground in Belize this project would not have happened.

AboutPage.png

Hugo

We used Hugo as a content management system along with its native language GO as a tool to break up content for quicker loading speeds and easy creation of repeating elements. It also was a great way to break up code so that individual developers were unintentionally messing up another developers code.

For example, I coded the about page to the right using the GO language and a combination of SCSS, HTML, and Javascript. By taking advantage of the content structure metadata and the loops within the GO language itself, this page would be easy to maintain and edit if need be.

 
Screen Recording 2020-05-13 at 02.35 PM.gif

GO, HTML, SCSS, Javascript, and JS Libraries

Most of the website was coded using a combination of these languages. We also used JS libraries like TweenMax and ScrollMagic to create our photostory pages. The photostory pages were coded by Taylor Tyson and myself. Tyson was one of our multimedia specialists and because of the COVID-19 pandemic didn’t have access to our collaborative development environment. We set up a system where Tyson would code on her home environment and I would integrate the code into Hugo and fix any bugs within our collaborative environment.

 

GIT

We used GIT as a way to collaborate between developers on this project. If we were not using this tool, the COVID-19 pandemic would have stopped our development in it’s tracks.

FlipCards.png

Takeaways

  1. Online development is extremely flexible. The COVID-19 pandemic happened right when we came back to the states, in fact we were on the ground in Belize nervous about being let back into the United States when coming back. Without our online developmental workflows already set up and ready to go, this project would have not been finished.

  2. Managing a large teams expectations takes tact and communication. This was the largest web project that I have developed and the largest team I had worked on to do so, there were 31 of us students and coaches all together. Being only one of two developers I was constantly having to manage every team members expectations of the websites. There were moments when what a photographer was asking for was not possible for the scope of the project or our time frame. I had to politely explain why that idea was unable to be implemented by our deadline. Overall, teammates were respectful with our time and understood if something was unable to make it on the final website, though together we would brainstorm an alternative.