Minneapolis 311 | Interaction Design

Practice work, completed in 3 hours

Role: Interaction Design

Tools: Paper, Sketch, Illustrator


Challenge

The Minneapolis 311 site allows users to submit reports for things like abandoned cars and graffiti on buildings. It needs to offer users a quick way to understand what reports they can submit and file these reports. There's a lot of information on the site, so it also needs to be clearly organized and presented.

How can the site help users quickly get to the page they need?
How can the city reduce drop-off as people are filing reports?


Understand the Problem

The current Minneapolis 311 page

The current Minneapolis 311 page

Primary user goals:

  • Learning about 311 services
  • Submitting requests and complaints through the site

Main issues:

  1. The current information hierarchy makes downloading the app the most important thing on the homepage, at the expense of the primary user goals.
  2. The current homepage doesn't effectively target the second set of users who'd like to submit a request using the site. The search bar is difficult to find, and the fact that the "311 Online Services" is for submitting complaints isn't visually clear.

Paper Mockup - Homepage

The initial goal was to reduce the cognitive load trying to use the page. I used paper mockups to identify the most important information and work with some initial layout ideas.

High Fidelity Mockup - Homepage

I used Sketch to create a high fidelity mockup of the homepage. 

Key Features

  • Prominent search bar
  • Large, colorful buttons to highlight the primary actions users can take on the site
  • "Top requests" in the middle box at the top so users can easily file frequently requested complaints
  • Quick reference box for users who just want to look up a phone number
  • The "Download the app" button is highlighted but more subtle. The color and positioning draw the user's eye to it without making it the most important thing on the page.
  • "What is 311" text put in an 80-character-wide column for easier reading

The mobile version of the site focuses on supporting users who want to file a complaint, while also driving users to download the app.

Desktop site

Desktop site

Mobile version of the site

Mobile version of the site


User Flow - Filing a Report

I also noticed that the process of filing a report had room for improvement. I created a user flow to nail down the steps a user submitting a request would need to take, and what screens she would see.

Main Issues

  • The first page of the request asked for an email address, which will cause drop-off. Contact information should be requested at the end, after the user has filled out the report.
  • The request process involves multiple pages, but there's no way to tell how many total pages there are.

High Fidelity Mockups - Filing a Complaint

I used Sketch to redesign the workflow for filing a complaint.

Key Features

  • Navigation at the top orients the user and lets her know what stage of the process she's in
  • Buttons allow easy navigation back and forth between pages
  • Flexible options for finding the desired report type (dropdown menu or search)
  • Users can visually confirm the location of the report using a map