Interviewing, Affinity diagraming, User personas, Information architecture, Card sorting, Sketching, Wireframing, iOS design, Prototyping
I redesigned the BOS:311 app for a one-week engagement, but given the short amount of time I wasn't able to validate my design decisions until I revisited the project to conduct user research. My research found that my redesign improved many aspects of the app, but it missed the mark in others. I corrected those problems in a second iteration, proving that it's never too late for user testing.
Current state evaluation
Current state evaluation
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 of Boston to be fixed. The city is generally prompt in effective in their response, producing a satisfying real-world user experience. But the app has an outdated look and feel, and the app flow is convoluted. These were the two problems I sought to address.
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. When we tap New Report, then the app flow reveals itself: 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 it.
The information architecture
I mapped the information architecture, and identified redundancies and a bloated interface.
I ideated with new information architecture, sketches, and wireframes.
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
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 concept as the homepage default view, and data visualization as the alternate view.
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.
First iteration mockups
This was a one-week design engagement. With more time I would‘ve conducted 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.
Interviews and user testing
Interviews and user testing
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 summarized my findings with an affinity diagram, and three personas.
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's goals in my mind.
Second iteration mockups after user research
1) 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.
2) 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”
Before, this screen included 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 disappears. 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.
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
By conducting user research I was able to focus on 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 was 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.