How Seven Cities Designed Surprisingly Great Websites

The government has been shut down for over a week, as have plenty of federally funded websites. Which makes me appreciate a good civic website even more. I was able to find seven city sites that will make you feel good about government again. Maybe.

What you probably think about municipal websites still likely holds true, however, which is that, for the most part: THEY ARE NOT VERY GOOD. To examine the issues at hand, let's take the website of Fayetteville, North Carolina, a city we chose completely at random:

How Seven Cities Designed Surprisingly Great Websites

I don't mean to pick on Fayetteville in any way. This is how 95 percent of all civic websites look. Cities compile all the information you could possibly need for every moment of your entire lifespan spent in said city, cram all of that information into a tiny, narrow, confusing space, then slap some stock photos, a city crest, and a poorly-rendered logo across the top. In its attempt to be everything, the website fails miserably at being anything. And god help you if you're coming here actually trying to get something done.

For the past ten years, even the U.S.'s most design-savvy metropolis, New York City, was stuck in a sorry small-column purgatory that didn't match the rest of its well-branded civic endeavors.

But they've just launched a massive redesign of NYC.gov, which is a signal of a larger nationwide shift, says Michal Pasternak, who led the redesign at the firm HUGE. "The approach to government projects in digital historically have been driven by large technical vendors who can build sophisticated back-ends but don't really focus or consider the user experience or the design," she says. "That is changing pretty rapidly and will continue to change as more cities and agencies see the return on investment on considering the user first."

How Seven Cities Designed Surprisingly Great Websites

Focusing on users meant that HUGE had to make drastic changes to the site's navigation. For example, the team learned that the largest number of people visiting the site were looking for city jobs. It was a surprise, but, because they wanted to serve the users, this fact compelled them to include a Jobs tab in the navigation. The website itself is meant to evolve as people use it. The 311 "Top Requests" section is was designed to help people quickly file complaints by including the top issues the city is facing. If people start using the site to file different requests, these will change, making it more and more relevant to users.

How Seven Cities Designed Surprisingly Great Websites

While the homepage looks great, some times a few clicks will get you away from the new experience and into the ancient design quagmires of other agencies. HUGE will be rolling out a streamlined look across agencies, but this process will definitely take some time. As will getting these agencies to tell stories, not just post information.

"People don't come to the site to catch up on city news, so our hope was that we could help the city tell stories in a more compelling way that might catch someone's eye as they're accomplishing something else," says Pasternak. "That's also why we made a strong push to include numbers and data where it made sense—people can scan a story quickly and see the impact the city has made."

How Seven Cities Designed Surprisingly Great Websites

For a case study on how one government site is reorganizing beautifully, check out the ridiculously simple Gov.UK which was named best design of 2013 earlier this year by the Design Museum. They're consolidating all parts of the government into this sleek new system, and documenting what they're trying along the way so other countries and cities can learn from them. Those Brits really know how to design a municipal site: London's site is truly gorgeous in a way that surpasses even New York City's redesign. So we still have a ways to go.

It wasn't easy to find inspiring city-focused websites here in the U.S., but I found some good examples. In addition to picking good-looking sites, I also wanted to measure user experience, so I created three different scenarios for which I'd need to use the site: 1) Pay a parking ticket, 2) Report trash on my street, and 3) Find a nearby park. Because it's not enough to be pretty, of course: city sites need to enhance our lives by not becoming bottomless pits of clicks.


New York City | nyc.gov

How Seven Cities Designed Surprisingly Great Websites

The newest city website to launch in the U.S. is also one of the best. Although I'm not a fan of that new "NYC" logo, it's thankfully minimized in the new design, which features lots of real estate for images (video!), excellent type choices (Helvetica!) and great use of color (yellow!). It also has a text-only version that's optimized for emergencies, which allows for a streamlined, quickly loading site to go into effect during times when most people are likely to be accessing it on phones or slow connections.

Pay a parking ticket: At first, I didn't see any mention of parking tickets. I admit it took me a minute to see the Make a Payment section as well as the direct link on the very bottom of the homepage under "Top Requests." Shouldn't the top requests be at the... top?

Report trash on my street: "Make a Complaint" is right there on the homepage, with a dropdown menu for everything from noise to "Garbage & Graffiti."

Find a park: Culture & Recreation tab took me to a great page where one of the top results was indeed "Find a park." This page had an FAQ but could not help me find a park, it said to call 311. Another text search gave me a result that took me to the NYC Parks page, which did have the information I needed.


Chattanooga | chattanooga.gov

How Seven Cities Designed Surprisingly Great Websites

A nice tilt-shift city portrait, a logo using the city's official typeface Chatype, and a clean, clutter-free interface. This new southern center of high-tech living has ridiculously fast internet available to every home and business (one-gigabyte-per-second, faster than anywhere else in the country), so it's on-brand for them to have a nice web presence. Not a huge fan of the tiny banners with social media and other buttons on the bottom, though.

Pay a parking ticket: The search bar is so prominent it was calling out to me to use it instead of poking around in the navigation. It worked, and got me directly to the right page to pay my fine.

Report trash on my street: I was feeling confident, so I also used the search bar for my garbage query, which got me to the right page with plenty of options but the content was disorganized and poorly formatted.

Find a park: Search worked great again, taking me to a "Find Our Parks" page, with a link to a nicely annotated Google Map.


Philadelphia | phila.gov

How Seven Cities Designed Surprisingly Great Websites

Philly has lots of whitespace, double image banks and decent typography. The organization doesn't offend my eyes at all, and I like the Department dropdown on the far right. I also like how beyond the call to support education up top, the very first buttons that call out to you are Pay, then Fraud/Corruption. We know where Philly's priorities are!

Pay a parking ticket: Under the dropdown below Pay, I'm directed right to the parking authority.

Report trash on my street: If I knew that my request was covered under the 311 page, I could click on that and go over to the 311 site, where it's one of the top requests.

Find a park: There's an option for Recreation Centers which gets you onto the Parks and Recreation page but the focus is more about activities, not public space. I had to poke around to find actual parks.


Honolulu | answers.honolulu.gov

How Seven Cities Designed Surprisingly Great Websites

A different approach can be found over in Hawaii. While it's not the official Honolulu city government website (which is not very good), this project by Code for America is maybe better than the typical site because it only answers the city's most frequently-asked questions. The answers are researched and authored by local residents (and vetted by the city, don't worry), who even get a credit for their answers. The result is a clean, simple interface that provides just enough information. But that's also the problem: Your question may not be one of the most-asked, meaning you might have to dip into the wild west of the real site.

Pay a parking ticket: My query "How do I pay a parking ticket" didn't actually return any relevant results, and the parking tab didn't have this information either. But maybe they don't have parking tickets in Hawaii because it's paradise?

Report trash on my street: Information about garbage pickup was an easy search and got me directly to the right page, with another site to reference and a phone number to call.

Find a park: No dice. Even the Parks & Beaches tab doesn't have a way to search for local parks.


Los Angeles | lamayor.org

How Seven Cities Designed Surprisingly Great Websites

Taking a page from Honolulu's stripped-down approach, L.A.'s new site for its new mayor Eric Garcetti brings a more personal approach to citizens wanting answers. It makes sense that he'd want to make it seem like the mayor is helping Angelenos, but it also helps people feel special—like they're going "straight to the top." Garcetti even implemented the #lamayor hashtag for people to complain/give ideas on Twitter and actually follows up with his own responses.

Pay a parking ticket: Yep, it's listed right there on the Help for Residents page, takes you to the old school city services page.

Report trash on my street: The closest I could get was Recycle Bulky Items, which took me to the city's sanitation department, with pretty much every trash-related category you could think of.

Find a park: A text search takes you to the parks and recreation site.


Chicago | cityofchicago.org/311

How Seven Cities Designed Surprisingly Great Websites

Another Code for America project is Chicago's new 311 site. It's more about a system of tools, from the site to an app to a hotline, that all work together to provide the ultimate way to request and track city services. The homepage itself isn't something to squawk about, design-wise, but it works really well (and the Chicago Works app is nicely designed). Plus there's a Service Tracker page that allows you to check the status of your request—because it really is all about follow up. And the best part is all the code is openly available for other cities to use.

Pay a parking ticket: This is too easy. On the homepage the "I want to..." prompt is just about perfect, simply slide down to Pay For and there are options to head to the parking ticket page.

Report trash on my street: Same here. Slide down to Report/File and you can head over to the Litter, Trash, Garbage page.

Find a park: Since it's a 311 site it's not exactly the best place to search for a park, but they do have a way to request a bike map.


Milwaukee | milwaukeepolicenews.com

How Seven Cities Designed Surprisingly Great Websites

I saved the best for last. Granted, this is not the city's official website, which is not particularly great. But this site for the city's police department is so freaking amazing, we should hold it up as an example of how all city agencies should tell their stories. With huge scrolling images, crazy good photography and lots of real-time information, this is one of the most engaging websites I've ever seen, period.

Pay a parking ticket: Yes, you can! In the About section there's a direct link to where you can pay your ticket, and stay in the police force's good graces.

Report trash on my street/Find a park: Since this isn't really a city site, these options aren't available. But you can see what the department is working on right this moment, read stories about the force's heroes, and help them find the city's most wanted. In this way, the site delivers the kind of immediate information you'd want to get out of your city, but it also inspires some true civic action.