The BOS: 311 app allows users to take a picture of an issue, like a pothole or trees that need pruning, and report it to the city to be fixed. These real-world results produce a satisfying experience, but the app has an outdated look and feel, and the app flow was convoluted. I redesigned BOS:311 without user research. While my redesign was an improvement in many ways, it missed the mark in others, and it wasn't until I conducted user research that I could correct those problems in a second iteration.
skip to deliverables
The homescreen consists of a springboard menu and buttons in three corners of the screen. It doesn‘t offer any clues to first-time users what the app does, and it has a flat visual hierarchy, giving no clues what the call to action is or where to tap first. When we tap New Report, then the app flow becomes apparent.
This is the core feature: report a problem and get it fixed. The user flow to do this, pictured above, is simple and straight forward. But the homescreen and the information architecture obscures this feature.
The information architecture
I mapped the information architecture, and identified redundancies and a bloated interface.
I made the primary user flow front and center on the homescreen, and I placed anything not related to this, like settings or report statistics, on separate screens. I worked on this in parallel with sketching ideas for what these screens might look like, examining competitors and other apps for inspiration.
list view, map view, hybrid list and map view
data visualization, gamification, social feeds
Sketching the homescreen gave me some insights: list view gives a better idea of what the app does. But a social feed takes that a step further, and demonstrates the primary user flow with real users. For example when you see “Leny reported a pothole” and then the City fixed it, you learn what this app does.
I wireframed the social feed and data visualization concepts. These are some of the key navigation changes I made to the homescreen:
The current look and feel of the app is missing the aesthetic elegance of the Boston.gov brand, so I read up on the Ideo case study of their work designing the Boston.gov website, and their brand guidelines. I put together a moodboard to get initial feedback from fellow designers, and then I mocked up screens.
This was a one-week design engagement. With more time I would‘ve conducted rapid paper prototyping and user testing with the wireframes, to validate (or invalidate) concepts early.
But it's never too late to pivot to a user-centered approach, and that's what I did when I revisited this project.
I conducted interviews and testing with two groups: people who’ve never used the app, and regular users. The interview questions for both groups were the same. I asked about their communications with the city, what frustrations they experience, and what they need or want of city services.
For usability testing with regular users I observed them use the current app, and then the redesign. With new users I observed them use the redesigned app first, then the current app so as not to bias them beforehand.
Three personas emerged from the affinity diagram. One of those personas was the recent college graduate who doesn’t communicate with the city, and wouldn’t use the app. So ultimately I was designing for the other two personas: James the Home-owning Millennial, and Sally the Long-time Community Member.
Both James and Sally want the reporting function to be front-and-center to the app. Sally has an additional interest to use the app as a tool for community organizing and staying informed of what’s happening in and around her community. I iterated my redesign keeping James and Sally front and center.
Users felt lost because there was no title in the navbar, and they didn’t understand the three feed filtering icons. I reworked the navbar to show the current feed as the title, with a down arrow to change the feed.
Some users didn't notice the CTA square in the bottom right. A younger user expected it to be in the top right in the navbar, while an older user wanted text. So I changed it to an action bar reading “New Report”.
Homescreen Stats V1
Homescreen Map V2
Previously this screen included a map, some statistics, and data visualizations. The James persona users didn’t like seeing these “irrelevant” things occupying prime real estate on the home screen, not to mention that the new report CTA dissapears. So I moved the statistics and data visualizations off this screen, and added the New Report CTA at the bottom to keep it front and center.
New Report V1
New Report V2
The Sally persona expressed an interest to form groups inside the app to more easily communicate with neighbors, so I introduced a new feature on this screen to be tested: users can tag a report with groups they belong to. Groups are managed from the home screen (see below mockups).
Reports Feed Picker
(Left) Tap on the navbar to pick a feed to view.
(Middle): You can view your own reports, all of Boston's reports, or group-specific reports.
(Right): Manage reports to follow new ones, or create a new group.
Sort & Filter
From the homescreen navbar you can also navigate to the menu, to the sort & filter screen, and to map view.
Report Submission Form
Choose a category to report, then upload a photo. The app uses geodata to automatically populate the address before you submit the report.
By creating the James and Sally personas I was able to prioritize the right features. I made New Reports front and center to the app, while I added the groups feature that the Sally persona was excited about. If I had more time I would continue to test and iterate the design, particularly the groups feature.
This is a fun project for me because I‘ve always been interested in finding creative ways of leveraging technology for the public good. I approached it as an extension of IDEO‘s work on redesigning Boston.gov, using design thinking to improve the resources and lines of communication for the residents of Boston.
back to top