Redesigning BOS:311 before and after user research

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

BOS: 311

CLIENT

Intrepid Pursuits

DURATION

Three weeks

SKILLS DEMONSTRATED

Interviewing, Affinity diagraming, User personas, Information architecture, Card sorting, Sketching, Wireframing, iOS design, Prototyping

01

02

I evaluated the key screens and information architecture

The homescreen

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.

The New Report user flow

 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.

  • The “+” button and the New Report button are the same
  • “Recent”, “My Reports”, and “Favorites” lead to the same screen, with different filters applied
  • Trash Alerts brings you to a website where you open another app, or download it if you don't have it
  • The “My Info” button and the circled “i” button lead to separate pages of similar content

03

I ideated with new information architecture, sketches, and wireframes

New information architecture

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.

Pencil and paper sketches

Homescreen sketches:
list view, map view, hybrid list and map view

New ideas:
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.

Wireframes

Homescreen Feed

Homescreen Stats

Report Form

I wireframed the social feed and data visualization concepts. These are some of the key navigation changes I made to the homescreen:

  1. Toggle between Feed and Stats on the homescreen.
  2. Filter between all reports, friends' reports, and your reports.
  3. A distinct call-to-action button clarifies visual hierarchy

04

I updated the look and feel by moodboarding and creating high-fidelity mockups

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.

Moodboard

First iteration mockups

Homescreen Feed

Homescreen Stats

Report Something

Report Form

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.

05

I conducted user research and usability testing, created UX assets, and iterated on the design

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.

I created an affinity diagram and user personas to synthesize the research findings

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.

Second iteration mockups after user research

Homescreen V1

Homescreen V2

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).

Final high fidelity mockups

Homescreen

Reports Feed Picker

Manage Groups

(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.

Menu

Sort & Filter

Map View

From the homescreen navbar you can also navigate to the menu, to the sort & filter screen, and to map view.

Report Something

Camera Roll

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.

Prototype

Final Thoughts

06

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

© 2017 by Felix Poon | All rights reserved

Felix Poon Instagram Felix Poon LinkedIn
felix poon design logo