2 Comments

Summary:

Government isn’t exactly known for good design. Design firm Huge used design to improve the city government’s website and, by extension, city services.

nyc.gov featured
Huge Chief Experience Officer Michal Pasternak

Huge Chief Experience Officer Michal Pasternak

The repercussions of a bad government website are vast: Obscuring information can not only make the government inefficient, but downright dangerous. Until this week, NYC.gov—where the most populous city in the US goes for government and public information—wasn’t optimized for mobile, nor was it capable of rationally negotiating the more than 100 city agencies that roll up into the site.

To rectify that problem, last year city officials commissioned a redesign of the site, which fields 35 million unique visitors annually but hadn’t been redesigned since 2003. Huge, a design agency with offices in Brooklyn — which had previously worked on the city’s tourism website nycgo.com – relaunched the site from the bottom up, with everything from new information architecture to a new look.

Screenshot of NYC.gov before the redesign. The old site wasn't mobile optimized and hadn't been redesigned since 2003.

Screenshot of NYC.gov before the redesign. The old site wasn’t mobile optimized and hadn’t been redesigned since 2003.

While private companies have a lot of options in designing their sites, the government has its own set of considerations that Huge had to keep in mind. Last year at our design conference RoadMap, Jennifer Pahlka, the founder and executive editor of Code for America, discussed how creating better UX and UI for government interfaces could improve its services.

Ahead of this year’s RoadMap in San Francisco, where we’ll discuss how experience design is now as important as the technology itself, we spoke with Huge Chief Experience Officer Michal Pasternak about her experience redesigning NYC.gov. With her help, we came up with 5 web design lessons that not only make better government websites but, by extension, better provide government services.

Simplify

NYC_Home1

The redesigned NYC.gov homepage has new architecture, a new look and is mobile ready.

Government websites cover a broad range of information, from alternate side parking to where to go for disability checks. This information needs to be displayed for a broad range of readers, comprising people from all over the world, and who are facing an ever-widening income gap.

This means that the site not only has to be flexible to accommodate the varying word lengths of the 100 languages it translates, but it also needs to work on all devices that the constituency uses (25 percent of people access the site via mobile and that’s growing, Pasternak said). You might notice that NYC.gov is not very flashy—frills eat up bandwidth and disrupt continuity. They can also pigeonhole content. “We didn’t want to go with something too playful and not accommodate that range of tasks,” Pasternak said.

Be broad

More than 8 million people means more than 8 million opinions. The city was afraid a lot of traditional New York imagery would prioritize Manhattan, while their goal was to represent all the boroughs, so Huge kept images to a minimum. “When we started talking about icons like the Statue of Liberty or featuring quotes from New Yorkers, they [government officials] really felt that this is city government and it has to be reflective of the whole population,” Pasternak said. “Just by picking 8 or so people meant excluding the rest.” Making a place for everyone means making a place that’s for no one specifically, and the design had to reflect that broadness.

Prioritize

Prioritizing is the most-important part of good web design, government and other. The problem with NYC.gov’s former website, and with government websites in general, is that they are often trying to be fair to all the agencies involved. The result is a lack of hierarchy to the website structure.

“The prioritizing part is hard in a government, with so many needs and so many people at the table,” Pasternak said. “Everything is under a microscope so it’s harder to make really drastic decisions.” She added that the city was “really good” about making tough prioritization decisions. According to Pasternak, it was an effort to “start running the website more like a business, making tough calls of priority and what goes live first.” The result is that Huge divided all the city’s content into 10 buckets and put the most-sought-after information at the top. Fewer agencies are featured up front, but finding them is easier.

With the updated website, most-frequent requests are prioritized. Users can now quickly see today's parking rules or make a complaint to 311.

With the updated website, most-frequent requests are prioritized. Users can now quickly see today’s parking rules or make a complaint to 311.

It’s not for you, but for your readers

Before you’re able to prioritize, you have to understand what your readers need. “We started by talking to lot of New Yorkers about how they interact with the city and the site specifically,” Pasternak, who began at Huge as an associate interaction designer nearly 10 years ago, said. “We also looked at analytics on the existing NYC.gov: what pieces of content were most popular, where people were going from the home page and internal search.”

Huge found that many were using it for the same often reasons they’d call 311, NYC’s government hotline. Therefore they placed 311 items like alternate side parking, garbage schedules and school closings in a bar at the top left. Users can also quickly make a complaint to 311 or browse other common 311 queries—all of which are highlighted in yellow boxes. In case of emergencies, that information—which citizens will most likely be looking for—will go right to the top.

Be prepared

A special, pared-down homepage takes over for NYC.gov in case of an emergency.

A special, pared-down homepage takes over for NYC.gov in case of an emergency.

Speaking of emergencies, Huge made a separate, even more streamlined emergency site that will kick in under such circumstances. During emergencies—Pasternak and crew began designing amid last year’s Hurricane Sandy—the information on the city’s website is especially poignant: What actions should citizens take? Where do they go for shelter? When do they evacuate? etc.

“We realized the role the city plays during an emergency and the role it can play,” Pasternak said. Because many were forced to access the internet via phones or with poor internet connections during the hurricane, people had to use social channels and more optimized websites to find information. Therefore Huge made the emergency site incredibly light and easy to load, with almost no graphics.

Additionally, to stem the confusion that happens in the aftermath of a disaster—when information comes in spurts and misinformation is plenty—Huge instituted a strike-through design measure that crosses out information that they find to be inaccurate or no longer accurate.

Make info available at a glance

NYC.gov homepage currently has information about the government shutdown at the top  of the homepage in yellow.

NYC.gov currently has a link to information about the government shutdown at the top of the homepage in yellow.

Huge decided to use colored symbols to quickly convey information—information available in more detail within the text. A green circle next to an update means it’s fine, a yellow square means a partial change or alert and red is a complete shutdown. Currently there’s a notice in yellow at the top of the homepage about the impacts of the government shutdown that directs people to relevant information.

Additionally, to reflect what Pasternak sees as efforts by the NYC government to be more transparent, Huge peppered various numerical data, available from the city, throughout the site. “It’s a nice, fun touch to quickly show the things going on in each bucket,” she said. “People respond really well to numbers and it’s something you don’t see from government much.” It’s also a good design move to get people their info as quickly as possible.

  1. Wow, terrible execution of an amazing opportunity.

    Share
    1. Agreed!

      Share

Comments have been disabled for this post