Mideast Media Survey

Summary

NUQ has conducted the same survey for three years running and asked Column Five to produce the visualizations and exploration experience each year. I worked on all three of the projects in a full-stack developer capacity, architecting the data and APIs that allow the visualizations to be explored and filtered by demographics in real-time. For the first year (2013) I was accompanied by another front-end developer at Column Five.

Starting in 2013, the talented team at Northwestern University in Qatar (NUQ) has commissioned a six-nation survey about media use in the Middle East. To show trends in media usage among Arab countries, this annual survey culls results from more than 6,000 respondents throughout Egypt, Lebanon, Qatar, Tunisia, Saudi Arabia, and United Arab Emirates.

With extensive survey results and no way to easily share their findings with the public, NUQ reached out to Column Five to create a website with interactive data explorations for further user examination. We’ve been honored to partner with NUQ on this comprehensive project for all three years, eagerly enjoying getting to work on such a vast undertaking in new and exciting ways. The challenges and rewards in this year’s project proved no different.

Column Five's Northwestern University Media Use Case Study

Each year's resulting website is listed below:

• 2013 Survey
• 2014 Survey
• 2015 Survey

My Role

While I served as one of two developers for the 2013 survey year, I served as the only developer on the project for the 2014 and 2015 survey years. For those two years I fulfilled all development roles from back-end API and data architecture to the front-end HTML, JavaScript, and CSS. I worked with the in-house designers to create the look and feel for the website and the interactive data explorer (they designed, I coded). I also wrote the API that powers the interactive's ability to query the data in real-time by various demographic filters. The site is powered by a CMS (no, not WordPress) allowing the client to alter the content on the site with ease--they can even add extra charts to the interactive data explorer if they wish to do so.

Technologies

TL; DR: CouchCMS, jQuery, Bootstrap, MySQL, PHP, Slim

The content of the site is powered by CouchCMS. The front-end uses jQuery and Bootstrap as well as various plugins for both. The data explorer's interactivity and transitions are provided mostly by CSS3's animation and transition capabilities. The survey data lives in MySQL and is served up via a JSON API written in PHP using Slim.

Full Credit List

• Matt Bailey, Account Director (Column Five)
• Travis Keith, Producer (Column Five)
• Abheeth Salgado, Art Director/Designer (Column Five)
• Robyn Do, Designer (Column Five)
• Rendell Acuesta, Designer (Column Five)
• Cale Dunlap, Senior Developer (Column Five)
• Robb Wood, Director of Strategic Partnership (Northwestern University Qatar)
• Justin Martin, Assistant Professor in Residence, Journalism Program (Northwestern University Qatar)
• Najwa A Al-Thani, Research Assistant (Northwestern University Qatar)

Additional Information

You can experience the site for yourself by visiting mideastmedia.org. Or if you're interested in the process that went into creating the site, check out Column Five's case study.