Neptis Foundation

Moving away from paper-published reports, Neptis needed a web platform which would allow staff and researchers to easily post a myriad of content types and media whist making sure that it all can be shared on, and easily interpreted by, social networks.

Neptis is a Canadian charitable foundation that funds and conducts nonpartisan research and education on the growth and change of urban regions.  For years the Foundation had published their research findings as paper documents, using a hard-to-update outdated website to simply link to PDF downloads of those documents.

GOALS

The new web publishing platform we would design and build had to:

  • Innately express the Neptis brand.
  • Make it easy for the Neptis team to post to the web.
  • Subtly leverage media assets contained in posts to automatically create a media library.
  • Offer social sharing tools on content whilst preparing content for sharing (so links from neptis.org would be interpreted on Facebook, say, with the correct title, description and representation image.)

PROCESS

Our first task was to strategize with Neptis for the best use of a web publishing platform and conduct a design exercise which would yeild a clear sense of their aesthetic values.  From here, we had an understanding of how they saw the potential for more easily disseminating their publications online and what a system which could capitalize on that potential would look like.

Through conducting our design exercises we set about creating an interface which would, among other things:

  • Use open/white-space.
  • Be built on a grid to expand and collapse responsively for multple screen sizes.
  • Focus on readibilty (in moving from paper to digital it was very important to ensure that the new content types would be easy to read.)
  • Present interactivity [ref:media] with subtlety.Use maps/illustrations and other media synonymously.
  • Allow for myriad editorialisation of content whilst conveying navigational simplicity to the end user.
  • Introduce common site-wide themes through iconography.
  • Offer digestible key information contained in content whilst also using this to allow navigation between content.

DEVELOPMENT

We created a solution using Drupal 7 which features a bespoke interface that is used by both site visitors coming to neptis.org to read posts and publications, as well as stakeholders carrying out administrative and editorial tasks. 

*Just some aspects of the solution we developed:

  • The site is responsive to screen size and automatically reformats itself for mobile users to make both navigating and reading content easier.
  • Custom content types were defined specific to the actual themes of what is being published.  A common form-based interface allows editing and addition of different posts but for each actual type, a specific selection of fields is made available to the editor; allowing posts to comprise of unique types of information (including media assets, organizational taxonomy terms, relational links and more.)  A notable example of how this comes together is the 'Publication' type; Publications on the site can comprise of Chapters where these are multi-page posts themselves.  Despite these posts being of different types, the site automatically populates a menu of Chapters (and sub-Chapters etc...) to make available to end-users on every relevant Publication (parent) and Chapter (child) post/page (with a link path like http://www.neptis.org/publications/review-metrolinxs-big-move/chapters/i... reflected in the URL structure and breadcrumb pathway.)
  • Refined user permission roles allow the site to be maintained and posted to by various Neptis staff and authorized external researchers, partners and associates.
  • A Central Media Library - When posts are annotated with images uploaded by editors they automatically get added into a central library.  Uploaded image assets can be further annotated with descriptive text and keyword tagging.  Images embedded in posts are related back to those posts which house them so that end users can explore posts/content through the media library, rather than text.  The site automatically creates template-appropriate versions of each upload so they display cleanly within lists and fuill posts whilst being available to users to download in full-resolution through the gallery lightbox/pop-up functionality.
  • Editorial highlighting sitewide:
    • Editors can instantly flag posts and media assets to show up in slideshows and lists around the site by toggling a javascript button shown only to them once logged in.
    • With logic mixing post-date preference and editorial theme, navigational paths are dynamically offered to end-users (e.g. in the 'Also of Interest' block on Publication cover pages.)
    • Editors can instantly order some dynamic lists of content arbitrarily by simply dragging and dropping the items to be displayed in the order they choose.
  • Auto-Save, Versioning & Backups - To give editors peace of mind we added background functionality which:
    • Saves any post being added/edited in the background every 30 seconds.  When a newer auto-saved version of a post exists the site prompts the editor to choose it or dismiss the message and keep working (useful if your computer shuts down before you can save something.)
    • Automatically keeps each revision version of every post on the site.  So, multiple editors can save versions of the same post and then choose to revert the published post to any previous version of it on the site.
    • Saves a full backup of the site's database on a daily schedule.  If for any reason a mistake is made in editing users or content, the whole site can be rolled back to a previous version of itself with the click of a button.
  • Meta information is automatically generated per post by defined rules (extrapolating information from the posts themselves) but can be overridden to refine social messaging; with additional options offered for Facebook's Open Graph protocol.

*A demonstration of the site's device responsiveness:

 

Home > Client Projects > Neptis Foundation