This is NYC.gov's new website, launched today.

(Here's their old one, from 2003.)

The new site puts the most important information up top, then it breaks down everything else you could want to do with the city into 10 categories.

It's the result of user testing for clarity--testing that occurred prior to release.

There's also a streamlined, media-light version built for emergencies. It loads super quickly, prioritizing the latest updates to beam to your phone first (just in case connections are spotty).

See how images have been replaced by placeholders? And alerts are tagged with a red/yellow/green iconography? This is the result of designers living through Hurricane Sandy and learning firsthand what the city needed to provide in emergencies.

See how images have been replaced by placeholders? And alerts are tagged with a red/yellow/green iconography? This is the result of designers living through Hurricane Sandy and learning firsthand what the city needed to provide in emergencies.

See how images have been replaced by placeholders? And alerts are tagged with a red/yellow/green iconography? This is the result of designers living through Hurricane Sandy and learning firsthand what the city needed to provide in emergencies.

See how images have been replaced by placeholders? And alerts are tagged with a red/yellow/green iconography? This is the result of designers living through Hurricane Sandy and learning firsthand what the city needed to provide in emergencies.

See how images have been replaced by placeholders? And alerts are tagged with a red/yellow/green iconography? This is the result of designers living through Hurricane Sandy and learning firsthand what the city needed to provide in emergencies.

Co.Design

New York City's Website Gets A Hurricane-Proof Makeover

NYC.gov had grown stale since its last update in 2003. Here’s how designers updated the experience, focusing on usability, especially in the face of disaster.

Thirty-five million people visit NYC.gov each year. Some just want to pay parking tickets. Others are frantically getting the latest news during a disaster like Sandy. The site needs to work for each of these people equally well. And that’s a tall order for any website—especially one built in 2003.

Today, NYC.gov has relaunched, sporting its first redesign in a decade. It’s the work of Huge, who recently completed the city’s NYC Go (tourism and activity) site, giving the city’s more serious side all of the clarity of a well-designed startup’s page. It’s flat (of course!), but the true brilliance may go unappreciated:

"We did a lot of work on the information architecture," explains Huge Chief Experience Officer Michal Pasternak. "If you look at the site, we designed all the content into 10 buckets…[But] our approach to the homepage was to get the most important information up first."

So what’s the most important information? It’s what NYC citizens call the public information line 311 asking the most: Is alternate side parking in effect? Is garbage/recycling running as usual? And are schools open? Rather than bury these answers in an FAQ, Huge placed them directly where your eye looks first, the top left corner of the page. It’s a single design update that could save operators countless hours of telephone calls. (And if your question isn’t answered by that information trio, there’s a sleek 311 panel that lives directly below.)

Beyond the new presentation of information itself, another critical update was NYC.gov’s new emergency site. Huge was tasked with creating a sister site that would be optimized to serve citizens specifically during the worst, most chaotic times.

"We’d talked to the city initially about being responsive in a disaster. All of us had gone through hurricane Irene and a couple other experiences where we relied on what the city was saying," Pasternak tells Co.Design. "And then what happened was Hurricane Sandy hit while we were designing this. So we saw firsthand—it was the perfect time to come together and create a design because we’d all just experienced it."

Pasternak herself was stuck for a week without power, meaning she, like many New Yorkers, kept up to date on her mobile phone. The emergency site would need to be prioritized for mobile, loading super fast, and prioritizing information even more aggressively than the day-to-day NYC.gov site. So Huge built a barebones, text-only version of the site (that’s capable of including mayor video updates if needed). It will actually download to your phone by prioritizing the latest updates to reach your screen first.

"The other thing we saw that happened a lot was that messages were coming out really quickly," Pasternak continues. "Some were accurate, but then some became inaccurate."

So Huge designed a simple cross-out system, allowing the city to strike out the information that had become invalid. The team also integrated a simple trio of colored shapes—a red triangle meant something was down or closed, a yellow square depicted partial access or functionality, and a green circle meant things were fine. This code can be added to any update for at-a-glance clarity.

No doubt, some will look at NYC.gov and wonder why there isn’t more New York iconography. There are no famous statues and no photo tours of Central Park. The most New York element on the page may be the use of Helvetica Neue! But to Huge, the city’s digital identity was ultimately about something much more important than branding.

"To feel like New York for 8 million people’s different definitions of New York is incredibly hard," Pasternak admits. "And the city was really averse to putting quotes of New Yorkers ... it wouldn’t feel quite as serious.

"We really tried to keep the frills really low and let the content experience speak for itself. That brought the site to life, rather than bring in design elements. We wanted people to feel like it was the city of their service."

See the site here.

Add New Comment

0 Comments