A New 311

Project 1: Tabs, Pads, & Boards

Project Brief

Our assignment was 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 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.

Storyboarding (9/7/15)

Persona: Maggie

Maggie’s Persona


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.

Persona: Stu


Stu, in his office at the Department of Innovation & Performance, is tracking issues on his monitor. He knows he doesn’t have all the resources to address every issue that pops up. Some of these tasks are easy to prioritize, like the stop sign, but for others, he watches to see the frequency and quantity of reports of the issue. This week he’s watching as more and more people are responding to the curb issue. He pushes that issue, packaged with the location, photos and new notes from Stu, out to the contractor on the field.

The contractor gets a listing of all of his jobs on his phone. It takes the contractor a few days to procure the right tools to pour the new curb. Once he’s done with the job, he’ll update the app so that Stu and Maggie can see that the curb is properly placed.

Wireframing (9/14/15)

Before wireframing, I took a look a Pittsburgh’s current 311 system. They provide a digital way to submit issues, but they are focused on getting issues into the city. They don’t provide a way for citizens to track or share reports. They don’t provide a way for citizens to monitor the 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 the citizen report-ers feedback would hopefully increase engagement and improve accountability in the government.

Screen shots from Pittsburgh’s 311 webpage

I also looked at Pittsburgh 311's Twitter feed where I was able to actually see the 311 requests that citizens were entering. Pittsburgh 311 Twitter submissions are given a request number that citizens can reference. However, there is nowhere on the 311 site to do a look up.

Looking through the @pgh311 feed for the last month, I found Twitter users following up on their claims, often several times in a row after weeks or months had passed and their issue was still not resolved.

Twitter users ask for updates on their requests when they don’t see progress.

I also noticed that many users were submitting photos along with their requests, not necessarily as explanation of the problem but as evidence of the problem.

Twitter users submit photos with their service requests.

The Wireframes

Although I storyboarded the process from Maggie, the citizen on the street reporting the problem, to Stu, the project manager assessing and assigning issues, to the contractors out in the field, I thought it would be more manageable to tackle the screens relevant to Maggie for this project. I have mapped the smaller screens for Maggie as she is out finding issues in her community and the larger screens that she would use when reviewing at home.

Wireframes for the tab sized screens — realistically a phone.
Wireframes for a pad sized screen — realistically a computer.

I have also created a little scenario for a futuristic projection. While work is being done in a certain area, the contractor will leave a sensor and a small projector in the work site. When Maggie (or anyone who has added or confirmed an issue) travels by, it will “sense” her phone and project an update on the progress of the work. This will, hopefully, give Maggie the feedback she is looking for to know that she is making an impact in her community. It will also not clutter the environment with unnecessary notifications for those who are not involved with the program.

Wireframe Revisions & Prototyping (9/16/15)

I revised the mobile wireframes to address concerns from class.

  1. Gave people an option to leave written reports rather than photo reports
  2. Added a simple color selector for the annotations

I then created a tap-able mobile prototype in InVision to be able to test out the mobile wireframes in 1:1 scale. You’ll need to open the link on your phone to try it out.

I also created a paper prototype to simulate the desktop version that would allow people to “click” through the various screens.

First Iteration of Hi-Fi Mocks (9/21/15)

View of all outstanding reports.

After working out issues in the wireframes, it was time to bring visual design to the structure of the flow. I wanted to keep the colors happy and playful to keep what can be a somewhat frustrating process more congenial. Since many people who will be using this app will not be as technologically savvy and may be using it only once, I thought it was important to include as many descriptions as possible for what the icons do.

Phone flow
Desktop flow
View of a single report.

Revising the Hi-Fi Mocks (9/22/15)

After presenting the mocks in class, I revised the visual design based on the feedback I received. I focused on tightening up the text generally and making the screens more cohesive overall.


(Left) 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. (Right) 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.


I spent the most time working out the individual report page. I tried it as a full page but realized that it helped to orient the user on the map (which would also facilitate easily transitioning to another report) and so returned to a modal view (but now one that allows the user to interact with the map rather than just using it as visual texture).
Like what you read? Give Lisa Otto a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.