As city planning becomes increasingly driven by sensors and data, it’s easy to lose sight of who these cities are for. But a city that relies on collected environmental data is a cold city. Knowing what residents want and need from their city and ensuring that they’re engaged with civic life keeps a city warm and alive. In response to a class project brief to design a “responsive and scalable User Interface that connects the experience across multiple devices ranging from a mobile phone, to digital whiteboards, to interactive kiosks” which facilitated collaborative visual thinking, I explored the way Pittsburgh’s 311 system could facilitate collaboration across the city.

I designed the storyboards, wireframes, mocks and video based on personas provided by the CMU MDes IXD Studio.

Design Brief

Design a “responsive and scalable User Interface that connects the experience across multiple devices ranging from a mobile phone, to digital whiteboards, to interactive kiosks” which facilitated collaborative visual thinking. I interpreted visual thinking broadly; I looked at a system, Pittsburgh’s 311, that did not support collaboration and attempted to design an interface and system that would support it.

“Beyond 311” is a common headline for stories on ‘smart cities’ but 311 itself has a long history. 311 was first developed in the ‘90s as a phone number to get information on city services. “Burning building? Call 911. Burning question? Call 311.” was the tagline for the Chicago 311.

When I started looking into Pittsburgh’s 311 Twitter account (which provided the most visible trail of submitted issues), it was clear that the system was lacking in transparency. While Pittsburgh lets citizens report issues online, the system is still focused on getting information in and not providing feedback to residents. Pittsburgh’s 311 doesn’t provide a way for citizens to track or share reports. It doesn’t provide a way for citizens to monitor the number of issues being reported or the speed at which they are being dealt with. While, obviously, a key part of a 311 system is getting issues to the department so they can resolve them, providing residents with feedback would increase engagement and improve accountability in the government, creating a more vibrant community.


The newly designed mobile and desktop interfaces are intended to emphasize different use cases. The mobile site prioritizes reporting issues when someone is out in the city and the desktop interface prioritizes following up on existing issues.

CC Photos from Adam Sowers, Wally Gobetz, Devon Christopher Adams, VeloTraffic, Terence Scroope and Travis Lull.


Storyboards demonstrated the ideal journey that a new 311 digital system would create. This helped frame the design problems and define the requirements of the prototype.

Maggie is walking to Target with her granddaughter. They stop and wait at a crosswalk with the Target in their sights. When the walk light turns green, Maggie is about to step into the street but notices that the ramp isn’t at the crosswalk — it’s at the corner of the sidewalk. ‘That’s annoying,’ she thinks. ‘That’s a big step for Kacey and I don’t want to veer us into traffic.’ She pulls up the 311 site on her phone. It recognizes her location and pinpoints her on a map. She’s not surprised to see that someone has already submitted a photo of the misplaced ramp and three other people have confirmed that this is an issue. ‘Wow!’ she thinks, ‘this has been an issue since two month ago!’ She taps to confirm that it’s still an issue and asks to be notified when it’s resolved.

Later, walking home with their shopping bags, she notices that someone has knocked over the stop sign. She pulls up the site again. No one’s submitted this issue! She takes a quick picture and adds a description to the site.

Two days later she gets a notification that the stop sign has been resolved. ‘Hmm,’ she thinks, ‘what about that curb?’ She pulls up the site. Still an issue! She sends it to two of her friends that work with her on the community garden. They, too, have been frustrated with the city’s irregular decisions on crosswalk maintenance. They click to confirm that the crosswalk is still an issue.

Wireframes & Lo-Fi Prototype

Refining the UI

On the color annotation screen, I received feedback that the color tabs were overpowering and the affordance was unclear. I gave that screen more visual breathing room.
Throughout the mobile designs, text was often too wordy, making it small and hard to read. I left text in but tightened up the phrasing and reconsidered placement for easier scanning.

Areas for Further Exploration

This proposal does not consider integrating phone call reports or alternative reporting methods (such as Twitter). For the system to truly be impactful it should include all these reporting methods. Also, while I did some very minor research into the Twitter reporting being done, I didn’t speak with anyone who works for Pittsburgh’s Department of Innovation and Performance. To create a system that actually addresses the needs of the community, it’s important to collaborate with that team to understand the barriers that the program and team faces and integrate their needs as administrators as well.