JOHNCARMODY.COM Full Stack Development +
Interactive Design + Teaching
Sculpting Order From Chaos

Case Study: The National Press Foundation

“The primary mission of the National Press Foundation is to increase journalists' knowledge of complex issues in order to improve public understanding. The foundation recognizes and encourages excellence in journalism through its awards and programs.”

from the NPF website

Interactive Digital Asset Management

I was hired to build the National Press Foundation a brand new website featuring a state-of-the-art digital asset management system allowing the foundation to deliver streamlined interactive educational experiences to the national and international journalists making up its target audience.

Serving up responsive and optimized video, audio, slideshows, galleries, presentations and more to any screen or device, NPF's new digital asset management system allows the foundation to re-purpose its ever-increasing library of rich media assets into unlimited customized variations, based on trending news issues of the day.

These assets are further categorized and arranged into research and study curriculums according to topics and sub-topics, designed to reach journalists via web, mobile, social and other mediums.

NPF's new digital asset management system integrates seamlessly with cloud storage and content providers for the foundation's rich content, such as Scribd, Flickr, SoundCloud, YouTube, Twitter, Google Custom Search, Disqus, Wufoo and others.

I crafted and programmed this project to do all this and much more (I haven't yet mentioned all the other interesting parts of the website that make up this interactive solution) - and it's easy to administer: no web expertise required.

This Is More Than Just A Pretty Face

The National Press Foundation's new digital asset management system is an innovative use of open-source software and professional, creative programming and design.

It gives NPF a streamlined, easy-to-operate curation solution, allowing the foundation to educate national and international journalists with dynamic, interactive multimedia programs specially tailored for them, topic by topic.

Educational Curriculums Made To Order

Using current and emerging web technologies populated with new-media API data in any number of custom configurations, this is an educational tool designed to grow. And thrive.

The National Press Foundation's digital asset management system allows NPF to combine APIs from media types and create interesting hybrid new-media types, such as the audio from a lecture (on SoundCloud) presented with the slide presentation of the same lecture (on Scribd) all served up in a lovely, responsive solution.

Journalists can then follow along and learn at their own pace while consuming engaging, cutting-edge content from wherever they are.

Live Programs, Training, Webinars & More

From the NPF site: "The National Press Foundation holds programs in the nation's capital, around the country, and overseas, bringing journalists together with leading authorities to discuss significant issues ranging from agriculture and economics to politics and zoology."

Beautifully and elegantly designed and presented, NPF's digital asset management system offers the foundation the ability to broadcast curated, categorized and tagged content live as it is created, from wherever NPF is conducting its programs and webinars.

Applying the Modular Approach to Asset Delivery

One of the main goals of this project was to create interactive modules which could stand alone or be combined with other modules in different combinations to form multimedia educational curriculums on a large variety of news and journalism topics.

Populated by external APIs, these modules contain video, audio, slideshows, galleries and more.

A module can be used in any number of programs and lessons.

I designed the module section of NPF's new asset management system so that data types and APIs not-yet-devised will integrate seamlessly down the road.

Building a Better Journalists' Toolbox

Journalism school does not teach a whole lot about what journalists really need to know about new- and emerging-media. Part of NPF's mission is to educate the educators, as it were, about story-telling with new data; upping their game with data visualization; using audio to guide a production; integrating public domain data into interactive media, and much more.

As part of NPF's digital asset management system, I designed and built a custom toolbox section using the modular approach described above.

This allows maximum re-use of multimedia for topics which typically cover many diverse areas of journalistic expertise.

NPF Programs

The National Press Foundation combines the right blend of training, technology and information to educate journalists on a national and international basis.

Since 1976, National Press Foundations programs have provided professional development opportunities to more than 5,000 editors, producers and reporters, helping them to better understand and explain the impact of public policy on readers and viewers.

NPF Awards and Awards Dinner

From the NPF website: "The National Press Foundation celebrates the best of journalism with its annual awards.

These prestigious and highly coveted awards go to journalists across the media spectrum."

For the Awards section of their new website, NPF wanted a dynamic solution to showcase their awards, award winners and the annual awards dinner itself.

I built the National Press Foundation a system to handle this, and much more.

NPF Sponsors

The National Press Foundation has numerous levels of corporate sponsorship and funding.

The foundation needed a solution where different sponsors could be highlighted not just overall (e.g., main sponsors listed on the home page) but also at a granular level.

I designed and built a workflow to allow NPF maximum flexibility for adding and editing sponsorship content, from global to atomic levels.

Behind The Scenes:

Day-To-Day at the National Press Foundation

I programmed the National Press Foundation's new website largely to run itself, using easy-to-follow workflows to organize and deliver new-media assets any time, anywhere.

Quick to deploy and easy-to-use

One of my goals for this project was to help NPF maximize the growth of its asset library while maintaining a streamlined system designed to save time and infrastructure expenses, now and down the road.

NPF can securely share & collaborate via office or cloud 24/7/365
NPF can change 99.5% of the *all* the content on the site (custom pages, modules and more)

My Role in the Scheme of Things:

Project Management

I worked directly with the National Press Foundation on every aspect of this project.

I wrote the (successful) bid for this job
I began conducting detailed discovery from the moment the project started
I kept NPF consistently informed of progress, potential roadblocks & evolving options
I met regularly throughout the project with different representatives of NPF to cover everything from data to design to SEO to security to webmaster duties to server permissions and much more

Database Conversion

The National Press Foundation's previous site was built on an ancient version of ExpressionEngine to which I had no back-end access. My first tasks therefore were to:

reverse-engineer NPF's raw data via a 14-gigabyte back-up SQL dump
observe and deduce the structural and data relationships set in ExpressionEngine (again, without the ExpressionEngine software)
create, test & perfect highly-customized PHP and SQL scripts and queries to extract the data from those relationships
convert and insert that preserved data programmatically into 15 different custom post types in WordPress (more than 1/3 million records in the database at the outset)

Content Re-Deployment

The people directly informed by the National Press Foundation's website are the same people directly informing you.

It was therefore of paramount importance to NPF for its new digital asset management system to be ready to handle major new-media additions on fast-emerging topics from whatever part of the world NPF was conducting a training for journalists.

I modeled new information hierarchies representing NPF's extant and forthcoming content
I converted those hierarchies into functioning responsive grids with live data so the client could at any time see how that unadorned information came across in different devices (I barely had to crack Photoshop for this project, by the way)
I regularly built functioning models and prototypes for the client to test out and discuss concepts, layouts and ideas
I designed the system to be ready to accept emerging data types and models as they evolve

Aesthetics | Look & Feel

The National Press Foundation approved my page-by-page information hierarchy proposal and I hired a graphic designer to come up with several design approaches based on the grid-based information layout models I created. From these, NPF could make imagery, typographic and color decisions.

NPF chose an approach from the initial round of mock-ups - this approach was then refined, reviewed and approved in the next presentational round and I began coding:

PHP
mySQL
HTML5
CSS3
JavaScript & jQuery
Bootstrap
WordPress (I hand-built a custom theme especially for this project)

Front-End Responsive Design

Start small, load fast, be interesting. These are some of the themes that guided my front-end production of this project.

I sketched-out all the pages by hand (in pencil - remember those?) to improve, unify and minimize CSS, JavaScript and HTML
I refined the static look-and-feel mock-ups for web-friendliness, and coded accordingly
I wrote custom media queries for iPhone5 portrait and landscape on up to wide desktops
I made sure the images were smushed to as small a size as possible while retaining crispness

Advanced WordPress Programming & Implementation

While the custom programming and concepts behind the National Press Foundation's digital asset management system go way beyond a standard WordPress site, I made sure I covered all the WP basics.

I wrote a custom WordPress theme from scratch using Twitter Bootstrap
I designed and programmed 15 Custom Post Types for NPF's sundry information types
I set-up custom taxonomies for most of these CPTs
I wrote custom PHP functions to export and batch-insert 100s of thousands of ExpressionEngine records into WordPress at a time, based on information type
I integrated Advanced Custom Fields throughout pages, posts and custom post types
I created advanced archive, single, custom and page post types
I integrated the site with Google Custom Search, for lightening-fast search results
I installed caching software for very fast page-load times
I created users, roles, rights and more
I taught numerous NPF admin how to run a heavily-customized WordPress site
I installed SEO plugins and advised NPF on SEO best practices
I set-up security plugins, parameters, guidelines, notifications, thresholds and more
I integrated NPF's social media channels through custom PHP, JavaScript and AJAX implementation of APIs from Twitter, Google, SoundCloud, Flickr, Scribd, Wufoo and YouTube
I designed and programmed the most media-heavy pages to reload assets via AJAX for super-quick response time
I designed and programmed the site to use only a handful of plugins, to help keep server resources at reasonable levels

Web Server & Webmaster Set-up

I worked directly with NPF and its web host's IT team to ensure a 100% perfect, error-free launch of the new website (that launch was smooth as silk, by the way.)

set-up server permissions for users, folders, files and security (front- and back-end)
set-up and configured SFTP accounts & permissions
transferred old files to the new server
updated .htaccess (301, 404, 410, etc)