Category: Portfolio

Published in The Washington Post, Fall 2015

These debate deconstructions have been a fantastic collaboration led by Samuel Granados and have included a bunch of different folks in the team. I love their simplicity, playfulness and visual approach. I’ve helped construct the narratives, design some of the visual elements, and write the text.

Role: Writing, editing, some design (not the example above, Kevin Uhrmacher designed that! But it’s my favorite graphic in the project — hilarious.)

Awards: Award of Excellence in the SND Digital competition

More debate deconstructions: 10 charts explain how Rubio emerged, Bush devolved in third GOP debate, Deconstructing the #demdebate: Clinton, Sanders control conversation

Published in The Washington Post, Nov. 19, 2015

Role: Project management, graphics and design editing, light development

Awards: Silver medal in the SND Digital competition

This project, the result of many months of detailed data analysis and reporting, was the product of a wonderful collaboration between reporters, designers and developers. My team was responsible for the graphics, template design and full-stack development. I helped refine and edit the graphics and overall design, keep the project on schedule and stakeholders informed, and develop and style small front-end components.

Published in The Washington Post, June 26, 2015

Design Director Greg Manifold and I prototyped an experience for this story. We wanted to emphasize the exceptional photography and make the introduction highly visual, captivating and emotional. We hoped that would hook readers into a deep reading experience. I suggested contextual mapping: when a place is mentioned in the narrative, it is highlighted in the accompanying map. Emily Yount, Emily Chow, Seth Blanchard and Lazaro Gamio took the rough prototype we built and transformed it into this wonderful project.

Role: Design, concept, prototyping

Awards: Award of Excellence in the SND Digital competition

More story design/editing: The N-word, Prophets of Oak Ridge, Cycling’s road forward

Published in The Washington Post, May 29, 2014

Role: Concept, writing, design, editing, programming assistance

I worked with Emily Chow on this project that tests users’ ability to pick misspelled words out of sentences. The Scripps spelling bee is a popular annual event, and we wanted to make a fun app that capitalized on reader interest in the event. All our competitors were making games that asked you to spell complicated words — not something you’re asked to do every day. But you do read and write every day, and I pitched the idea of highlighting the most common mistakes people make and pushed to develop a piece that allowed users to see mistakes that the other folks who took this quiz made. Emily did the heavy lifting on vote counting development and displays, and I wrote the silly sentences and finessed the design. It got enormous reader response — almost 300,000 readers answered the first question.

Note: If you view this project today, it takes a while for the results to pull in. This is due to dependency on deprecated site services — a lot changes in a year in the news business!

Published in The Washington Post, 2012

During the 2012 primary season, we started talking about how to tell the story of the election as a whole. I worked with AJ Chavar, video editor, Sohail Al-Jamea, motion designer, and Karen Yourish and Chris Cillizza, reporters, to storyboard and produce this motion graphic, which led our site the morning after Barack Obama won re-election. We did extensive storyboarding to ensure we would be prepared no matter the outcome of the election. I’m proud of this video because it’s fast-paced, has a great storyline and uses compelling graphics and smart visual approaches to keep the viewer’s attention.

Role: Story development, visual editing, producer

Skills used: Storyboarding, visual editing, project management

More election videos:

Published in The Washington Post, Oct. 14, 2012

As I designed this app, I was thinking about how to allow people to quickly find homicides in their area. That led to a decision to focus on neighborhoods. We let people see groupings of crimes that are meaningful to them in both the map and corresponding charts. To surface trends at a city-wide level, we added four promo spots above the map that send people directly to important stories in the app. And a timelapse feature lets people view trends, year by year, across the city and in specific neighborhoods. We’re getting great feedback from users; many people are telling us that they found surprising and intriguing information in the app.

Role: Design, light programming

Tools used: JavaScript, Google Maps API, Flot, CSS

Awards: Gold medal in the SND Digital competition, Silver medal at Malofiej for design

More JavaScript maps: 2010 census, Republican primary tracker, Earthquake in Japan

Launched on July 7, 2012

StoriesFrom is a storytelling platform that allows individuals and organizations to create rich, community-driven documentary projects online. The site was made possible through a Knight News Challenge grant from the John S. and James L. Knight Foundation, cosponsored by Google. I built the front end of the site based on designs by Grant Kindrick. The site was optimized for the iPad and included complex gesture-specific functionality like the “wall,” pictured above. I themed Drupal templates to create the story pages (video, slideshow, and text options) and built several other page types, including a map featuring geolocated tweets based on specific keywords, multiple project displays and a complex navigation system.

Role: Front-end development

Tools used: JavaScript (MVC framework), MapBox, PHP, Drupal theming

Note: Due to changes in the Twitter API, the live tweet display is no longer functional.

Published in The Washington Post, October 3, 2010

Role: Design, programming, production

I worked closely with Whitney Shefte and Alberto Cuadra to create this piece. We storyboarded the intro video, motion graphics segments, and the flow of the piece together, then each created the individual parts. I built the interactivity around the intro page menu, the brain segment, and the package navigation. It features deep linking to each video, gallery, or multimedia segment.

Tools used: Flash/ActionScript 3.0 with audio and video players, Javscript, CSS, SWFAddress by Asual, Adobe Photoshop

Awards: POYi Documentary of the Year, Peabody Award (2010), Online Journalism Award for Multimedia Feature Presentation (large site), Finalist for the Pulitzer Prize for Explanatory Reporting, SND Digital Design competition (Use of Multimedia), WHNPA Eyes of History 2011: 1st Place for Multimedia Package (In-Depth) and 2nd Place for Multimedia Innovation

Published in The Washington Post, October 30, 2011

Role: Design, programming

I worked with Dan Keating (database) on this project, which takes a unique approach to user-generated data. It mashes up responses from users with actual numbers on unemployment, median income and population growth to see how people’s perceptions line up with reality. A week after launch we had nearly 5,000 responses. We use IP location to target the experience to the user’s county and state, and ask them to make a rating and, optionally, give us some demographic information and leave a comment. Read more here.

Tools used: JavaScript, jQuery, Quicksand plugin, Echo comments API, Google Visualization API, Bit.ly API, CSS

More user-centered projects: Are you over the hill for Olympic sports?, How does your income compare?

Published in The Washington Post, The Telegraph (UK), and Yahoo News, 2010

Role: Design, programming

I created these three race maps (house, senate, and governors) to correlate with the redesign of PostPolitics. I also created a live results map for election night. We really wanted to give a complete picture of the 2010 races, so we have current race ratings (except for the House, where we have state of the race), election history, and demographics that let you see some cool patterns — like how states vote when they have a high percentage of seniors or high poverty rates. Favorite features: really cool zoom functionality, which I explain in my blog, and a slider that shows historical results.

Tools used: Flash/ActionScript 3.0

Awards: Bronze, Malofiej 19

More Flash maps: Unemployment by County (read my blog post), A closer look at AIDS groups, Life expectancy across the U.S.