Two designs: Changing NYC and CUNY J-Camp

This is a quick visual overview of Changing NYC and CUNY J-Camp, two sites I designed, helped to produce, and launched at the CUNY J-School in the last couple of months.

Changing NYC

Published in May, Changing NYC showcases Census stories from Interactive II and Craft II J-School students. It was a joint project and includes audio, photo, video and live coverage.

One of the significant challenges with this site was that, despite the Census being the overall theme, there were few threads between the stories. Furthermore, all stories needed to receive generally the same weight; no stories could be more “important” than others. The solution was to create three broad buckets to place the content in, Between the Numbers, Moving In/Moving Out, and Neighborhood Anchors, and then randomize the display order of the stories. Fortunately, with the grid view for theme landing pages, I think it worked out alright.

From a design perspective, I wanted to make the site easy to navigate laterally and allow the reader to quickly focus on the content. I have three favorite features:

  • On the single article view, the active theme and place terms are highlighted to give you a peripheral sense of what you’re looking at.
  • On any view with a single piece of content, the site branding drops out of the header to the left column to allow the reader to make that content first and foremost on the page.
  • The single photo view has a ribbon of all photos associated with a post, so you can see where you’re at in the series and quickly jump to another image.

CUNY J-Camp

CUNY J-Camp is the J-School’s continuing education program. With the redesign of the site, the primary goal was to make it much easier to access and register for the variety of workshops offered. Secondary goals included educating new visitors on CUNY J-Camp, and making it much easier to stay in the loop about upcoming opportunities.

The WordPress themes for both Changing NYC and CUNY J-Camp are available on Github.

New navigation for the NY City News Service

Inspired by the Spokesman Review, I rolled out taxonomy-based navigation for the NY City News Service last night. Readers can navigate by topics, places, and media. Special projects are also more accessible. One neat thing about WordPress’ custom taxonomies is that I can design different landing pages for each taxonomy, and then even go as far as create unique pages for each term. The navigation is just the beginning.

Splash page for the Tow-Knight Center for Entrepreneurial Journalism

Quick splash page I put together for the Tow-Knight Center for Entrepreneurial Journalism in preparation for the launch reception on March 9th. Code is available on GitHub.

Which journalists have the best portfolio websites and what are they using?

At CUNY on Friday at 9 am, I’m leading a January Academy workshop titled “Setting up your website with WordPress.” To start the session off, and get students’ minds thinking, I’d like to present a dozen or so of the best portfolio websites powered by WordPress and review the elements which make them strong websites.

Entrepreneurial Journalism landing page redesign

Redesigned the landing page for the Entrepreneurial Journalism program at CUNY on Monday afternoon. Previously, it was a straight page with about 2,000 words of text. My goal was to convey much of the same information in a much more concise and approachable manner. We’re also starting to think about different calls to action we need to include on the page with the flows associated with each.

Overall, I’m happy with it’s functional utility. The program courses will eventually link to landing pages for each, and the blue links will help add more balance to the page.

For archival purposes, I’ve also taken a screengrab of the entire page.

Election 2010: Issues and Impact

For Election 2010, we built an interactive mosaic that tries to emphasize the wide diversity of perspectives NYCity News Service reporters captured before and after. Vistors can filter these faces by relevant metadata, and click on a face to access a short video or audio interview with the person.

The entire product was done with HTML/CSS/Javascript (jQuery) in about an afternoon. Each mug wrapper has classes with values for each metadata field. Presentation is driven by adding further classes based on those values. Originally, I was going to pull from an API and refresh the entire view but what I ended up with proved to be a better solution.

In the future, I think it’d be more interesting to filter based on issue instead of demographic. Also, I didn’t think about this at the start, but there is a performance loss on page load when every single piece is a video interview as the browser queues all of the hidden Vimeo players.

Later: Michelle and I took a look at the project this evening and I think it’s the first time I’ve seen it truly from the user’s perspective. Most notably: video embed performance sucks and needs fixing. It would also be useful to have the filter values sorted alphabetically (and numerically). Clicking on a new filter should close the active video player. Clicking on a new mug that’s at the bottom of the page should scroll the user back up to the overlay. Lastly, when activating filters, the informational overlays should only appear on mugs that match the filter.