Good Design is Good Civics

October 16, 2018

“Anytime a piece of technology worked the way you expected, a designer just sweated that for 100 hrs” Khoi Vinh

The Boston Mayor’s Office was having a problem: Not enough residents were reporting their own problems into the city. Sure, the 311 phone line had its old school devotees. But Boston decided they could reach a whole new population by creating a brand new 311 mobile app. The only issue? Turning a human-operated phone line into a mobile app isn’t easy. Designers at the mayor’s office looked around at another city’s 311 app—and made their own share of mistakes—to figure out how to get it done.



KHOI: Welcome to Wireframe, from Adobe. A podcast about good design. And especially about user experience design — how we shape technology to fit into our lives.

I’m Khoi Vinh, principal designer at Adobe. And each week on this show, I, along with one of our producers, will explore one aspect of good design.

Producer Amy Standen is here again with me in the studio. Hi Amy…

AMY: Hey Khoi.  Okay, Khoi, I want to ask you about your design process. When you design, what is the first thing that you think about?

KHOI: The first thing is, who’s going to use it? I mean, their age, their profession, their circumstances. To make good design you need to have a strong vision of who that user is, so the solution is right for them.

AMY: In this episode we’re gonna talk about that. We are going to what happens when those rules are thrown out of the window. When you can’t just design for one user. Because your user … is everyone.

This is the story of when the city of Boston tried to turn its 311 phone service into a mobile app.

And found out this was Very. Tall. Order.

If you tried calling the Boston mayor’s office HOTLINE to report a pothole, say, in 2002… well, good luck.

First, you’d have to figure out the right number to call. And there were thousands of Boston government entries in the phonebook.

And if you did end up getting in touch with the right person, here’s what would probably happen: someone would scribble your address and the word “pothole” down on a piece of scrap paper, and then hand it to the public works department.

NIGEL: 617-635-4500 was the mayor’s hotline for many years. And for a long time it had been running really using post-it notes and phone lines.

AMY: That’s Nigel Jacob. He’s the co-founder of Boston New Urban Mechanics, it’s a civic innovation lab based out of the mayor’s office.

And handwritten notes may be an okay system for taking messages for your family. But for a city government, this was not an organized system.

NIGEL: Different people were taking notes in different ways. So some people had a notebook. Some people had post-it notes. That scene would be pretty frenetic.

AMY: And it wasn’t just hectic and disorganized. A lot of people’s problems weren’t actually getting fixed.

NIGEL: It was really error prone. There was no way to track anything. Things would get lost. People couldn’t call to find out how something was progressing.

AMY: So, in 2006, the city organized a team to, among other things, fix the call center. One of the people on that team was Nigel, who was fresh out of a PhD program in computer science.

NIGEL: We very quickly realized a better approach to dealing with this was to have some kind of a system of record in place so that people aren’t just writing things down, but they’re typing in data as it comes in through the phone lines.

AMY: So, the team brought in a new backend system that allowed calls to be tracked and then funneled to the right departments. This new call center was an improvement. But… there was still one big problem: it was the same people calling the hotline, over and over again. The service wasn’t reaching enough new users.

NIGEL: Not everybody is going to want to use this hotline, right? We spend all this time trying to make it a useful service. But it seems unlikely, especially younger people, are not going to want to call that number.

KHOI: Yeah, that’s not great. If you’re really only getting one demographic, then you’re not expanding the civic purpose of the service. If a government service is only serving a small group of people, it’s not really democratic.

AMY: And the thing was, Boston wanted people to complain. They wanted to fix things. But they realized they had to be more creative in their approach. And that meant taking advantage of new technology.

At this point, the iPhone 3G had just come out. And everywhere Nigel went, he saw people staring at these new phones, all the time. Commuting, sitting in Boston Common, walking around.

So, he thought, maybe THIS was the way to start reaching more people: to put the service where a lot of people were already looking.

NIGEL: If we can use the iPhones that were proliferating to create this great user experience, that’s what we wanted to target.

And the idea was born: an app version of this phone line. A Boston 311 app.

Back then, around 2008, this was an innovative idea.

But innovation meant something different for 311. Because Boston 311 wasn’t a regular Silicon Valley app, with the end goal of getting someone to buy something.

This was a civic app.

KHOI: Civic apps are hard. I mean, they’re hard to build. They’re hard to design.

KHOI: You’ve got to simplify an entire government bureaucracy, one that performs probably tons of different services and works for tons of different people. Somehow you gotta get that in the palm of your hand and make sure it’s easy to use.

AMY: One of the people working to make this app easy, was Chris Osgood. Today, Chris is the Mayor’s Chief of Streets, Transportation, and Sanitation. Chris joined city government on the same day as Nigel, straight out of business school. And they got to work dreaming up what this Boston 311 app could be.

CHRIS: If I recall correctly, Nigel and I were simply sitting around and we literally sketched out on a piece of paper what we were looking for a 311 app to do. It would allow somebody to see a problem on the street, shoot a photograph of that problem, and submit it immediately to government for it to be routed to the right person for resolution.

AMY: Right away, Chris and Nigel realized that the biggest design challenge they faced was balancing a user friendly front-end with the complex reality of behind-the-scenes local government. Because local government can be complicated.

For instance, the City of Boston controls the city streets, but there’s actually a separate organization that controls the sewers. Or say you find a sign is missing at a bus station. Well, that’s not the city’s responsibility either — that’s the MBTA.

But Nigel didn’t want that complexity displayed in the app.

NIGEL: A resident shouldn’t have to know about how everything is organized. A better system would be one in which you could just ask your question or make a request and then it gets dealt with.

KHOI: Exactly. For the person using the app, that complexity doesn’t matter. They just want to solve their problem so you don’t need to show any of that stuff to them.

AMY: That was Nigel and Chris’s take on it too. But they did have some precedent for how to solve these problems. Or rather, how NOT to solve them.

Just a few months earlier, the city of Pittsburgh had launched its own version of a 311 app. And for Nigel, that app was a good example of what not to do.

NIGEL: I hope I’m not going to anger my friends in Pittsburgh but it was a piece of garbage.

AMY: It was a piece of garbage for one specific reason. Nigel says there were too many categories. Essentially the designers of the Pittsburgh app displayed a very detailed list of every single problem anyone could possibly have in the city. All displayed on one long drop down menu.

KHOI: That doesn’t sound good. A long, long drop down menu is just not comfortable to read, to navigate, and to make sense of for users.

AMY: And that’s pretty much what users in Pittsburg had to contend with.

NIGEL: You would have to pick from a list of hundreds of things what the issue was. Right, so dead cat, dead rat, dead cat on corner, dead cat on the sidewalk. And that was done to make the government’s job easier.

AMY: But Khoi I can sort of see, from a design standpoint, why would would choose a long drop down menu. Right?

KHOI: Yeah, you’re right. Drop down menus are really simple … But for the designer. For the users, they can make things a lot harder.

AMY: The Pittsburg app had too much information in it, and Nigel says it took way too long to use. Because no one wants to be scrolling on their screen 10 minutes, right, just to report a simple problem. So, here’s the fix the team in Boston came up with: They decided to display ONLY the most commonly reported problems that people were experiencing around the city.

In 2009, the mayor’s office released the app out into the world. And it was a hit. Pretty quickly, the team could see that way more people were using the service than ever…

NIGEL: In the first month or so we began to get a good sense of the patterns of usage.

AMY: One of those patterns? People were logging more individual complaints. Here’s Chris to break it down.

CHRIS: Imagine you’re walking down the street and all you had was a 24 hour hotline and you saw a pothole. You might call the 24 hour hotline and you might say hey I’ve got a pothole and it’s at 12 main street. And then you walk 50 more feet and you see another pothole and you may call the call center. Let’s say you see another 50 feet later. It’s unlikely by that point that you’re still picking up the phone and still calling a call center to say hey I’ve seen one more.

KHOI: Yeah, I think what Chris is saying here is…  The app did a job that the phone lines could not. It allowed people to report problems much more easily. So, they’re probably hearing from a lot more people, and more often. That’s an advancement.

AMY: Right, so problem solved, everyone lives happily ever after. Right Khoi?

KHOI: Oh, if only it were so simple!

After the break, the Boston team learns good design requires some redesign.

Welcome back to Wireframe. I’m here in the studio with producer Amy Standen.

AMY: Okay, so before the break, we heard how the City of Boston’s design team created a 311 app that constituents were actually using. It was a slimmed down, simple design that was meant to complement the city’s state-of-the-art call center.

KHOI: This is the point … Where we’re about to hit a snag.

AMY: Yep, you could say that. And the problem came up before people could even get around to logging their issue.

Here’s Sebastian Ebarb (EE-barb), the city of Boston’s head designer:

SEBASTIAN: People weren’t actually finding their particular tickets that they needed or finding the categories that they needed in order to put in the ticket.

AMY: This was because that simplified system was a little too simple. Not every issue that arose could fit neatly into one of those categories.

Say, for instance, there’s a bicycle outside your apartment, and it’s been there for weeks. So you decide to open your 311 app and report the problem.

SEBASTIAN: You have an abandoned bicycle but you might not necessarily originally be confronted with abandoned bicycle, just abandoned equipment or obstruction on street. And so which one do you pick from?

AMY: So Khoi, what does a user do, typically, when faced with just not enough options?

KHOI: Well they’ll either take a wild guess or just quit the app entirely.

AMY: Neither of which is too helpful for the city of Boston, no.

KHOI: Neither are desirable. (Laugh)

AMY: So the Boston designers were really in a bind here. The city was receiving all these complaints in a category marked “other” – which from the government’s standpoint was a headache. The people processing the complaints had to go through the backend and then reclassify everything, themselves. Which is not what the city had in mind for the new design.

KHOI: So they thought they were improving the design, but they’ve basically just created more work on the backend for the city.

AMY: Exactly. And then there were these other problems that arose that are related to local language. Let’s say you didn’t grow up in Boston. And maybe you use different words describe a problem. Here’s Sebastian again.  

SEBASTIAN: Every area in America has its own slang for something in particular. People in Boston use the word bubbler. I grew up in New York so I always hear – you know, I was used to water fountain.

AMY: The 311 app was supposed to be this great tech solution for people who didn’t use the hotline. But in a lot of ways, the hotline worked better. Because when you called: you were speaking to a person — A person who could translate your colloquialisms, know the difference between clearing away a bike in a stairwell versus a bike on a lamppost.

Here’s Nigel again.

NIGEL: Having someone to talk to either on the phone or face to face, you know that seems to work well when you’ve got a slightly unclear issue.

AMY: So if you didn’t know exactly how to describe your problem, that was fine. The operator helped you make sense of it all, no problem.

So the Boston designers started to wonder: was there a way to make the app behave less like an app and more like… a person?

AMY: So Khoi, does this humane design approach effectively kind of solve the problem that we were talking about earlier: that there’s either too much complexity or too little?

KHOI: Yes. This is how designers iterate towards the right solution. The Pittsburgh app was too much, the Boston was too little. Each iteration gives you a bit more insight and so the app gets closer and closer to what people really want.

AMY: Right. And that’s what they did — this push and pull design process — to figure out the right amount of information to display on the app. But as it turns out, finding the perfect balance is not where this story ends up going.

Ultimately, the Boston designers did something totally off script, and actually pretty radical — they got rid of categories all together.

AMY: Okay Khoi, in your hands right now you have the beta of the new and improved Boston 311 app. What do you see?

KHOI: So it says “City of Boston” at the top. And then most of the screen just asks me, “what can we help you with?” There’s some sample type here to show that if I type in an answer, all I need to do is tap on, “start a request.” And that’s it.

AMY: So it’s just that one question.

KHOI: Yeah, it’s just this one question.

ALEX: You’re putting it just in the language of what it is that you need help with. So you might just say there’s trash on my street. Can somebody please remove it.

AMY: That’s Alex Lawrence, a project manager on the latest 311 design. It’s her job to make sure sure the design, the code, and everything runs smoothly.

So this “what can we help you with” that you’ll see on that first screen of the app? It’s meant to mimic the call center experience. Let’s say someone dumps their old couch right in front of your house.

ALEX: We call that illegal dumping but you don’t have to know that. You put in the language that you think most appropriately represents the service request and then we use something called machine learning to match what our service request actually is.

AMY: This search bar where you type your request, can translate your regional slang, or your imperfect English and figure out what you need. And then the city receives your request in a way that’s helpful for them to process. And all of this feels easy, on BOTH sides.

Khoi, I am wondering if this is often the case. That the more simple and intuitive something looks from the user side, the more work it took to get there. Is that generally true?

KHOI: Yeah. Simple is really hard. I mean, believe me. Anytime you come across a piece of technology where it worked exactly the way you expected it, that it was so simple it was almost magic… a designer probably just sweated that for hundreds of hours.

AMY: This new version of the Boston 311 app is scheduled to come out by the end of 2018. And the folks at the mayor’s office are hoping it’ll give them the win-win they’ve been looking for.

Here’s Chris Osgood.

CHRIS: How we actually make sure that within the app that we are designing it in such a way that it both makes sense to the user and gets to the right place so that we can actually do the work is I think fundamental to what this redesign is all about.

AMY: At this point, the Boston 311 app has been around for almost a decade.

And the team is still testing out new ideas, trying to figure out will work best — how to make this the most humane 311 app possible.   

KHOI: Amy you know a little earlier you said that this isn’t the usual Silicon Valley story…

AMY: Yeah. I said that the fact that this is a civic app makes it a different kind of design story, than if we were talking about the design of some app that is supposed to make some money.

KHOI: I think it’s really interesting that with civic apps, there’s a real connection between user experience design and a functioning democracy.

KHOI: It sounds pretty grandiose to say that design can be that important. But it REALLY is important in THIS app. If the app is confusing to use, and the design lets you down, then the city is letting you down.

But if the app does help you solve your problem, and the design really works? Then your government is doing its job.

KHOI: In next week’s episode: hearts, prayer hands, and poo!!!! We dive into the world of emoji! Where they come from, who designs them, and how they’re changing the way we communicate.

MARCEL DANESI: But you tell me the difference between a period and a heart. Wow! What a difference.

KHOI: You can subscribe to Wireframe in Apple Podcasts, or wherever you find your podcasts.



This episode was produced by Rikki Novetsky, Isabella Kulkarni, Amy Standen, and Abbie Ruzicka. Devon Taylor is our editor. Catherine Anderson is our engineer. Keegan Sanford created our show art.

Learn more about the show at adobe dot ly slash wireframe. I’m Khoi Vinh. Thanks for listening.