SF311

App Redesign

PROJECT DESCRIPTION

SF311 is the primary customer service mobile application for the City of San Francisco where users can report issues throughout the city, such as potholes, graffiti, trash and more. The current app is outdated and lacks certain features that young millennials look for, such as social interaction and traffic solutions. The goal of this redesign is to make the SF311 app more appealing to young millennials between the ages of 18 to 26 years old that are living in San Francisco in order to gain more users that report issues to better the city. The new redesigned app offers features like traffic, transit times, news, along with a newer modern design that is simple to use.

USER RESEARCH

A survey was conducted in order to gain more information about who uses the current app. Over 50 San Francisco residents answered and only 16% had actually heard of the app. Of that 16%, 78% were over the age of 35. 92% of all responders think that reporting issues through a newly designed app would be effective in maintaining the city, but only 60% said they would keep up with reporting issues if they installed the app on their phone.

16% of responders said they had heard of the app.

Of that 16%, 78% were over the age of 35 years old.

92% of responders think an updated app will be effective.

60% of responders said they would keep up with reporting.

HYPOTHESES

By redesigning the SF311 app, users will be more inclined to make reports

2

1

3

By including new features like news, traffic and more, users will be more inclined to download the app

By marketing the app to millennials, more reports will be made to the city

DESIGN CONCEPT

The goal of this redesign is to make the SF311 app more appealing to young millennials between the age of 18 to 26 years old that are living in San Francisco. The current app is outdated and lacks certain features that young millennials look for, such as social interaction and traffic solutions.

BEFORE SCREENS

The current design has several initial problems that are noticeable from the moment you open the application. There is no menu button in the top left corner, making it difficult to navigate through the app from every page. The arrangement of icons on the home screen is unbalanced and there is a misplaced refresh button at the top. Several heading run off the page making it difficult to understand what page the user is currently on. Report lists are cluttered and unappealing to look at.

SKETCHES

For the home screen my main goal was to space out the icons so that they were evenly placed on the page rather than all at the top like the current app. I also wanted to make the text size larger on the “Make A Report” screen, so my sketches show a larger text with an area for a corresponding icon to make it easier for users who may not understand English.

WIREFRAMES

These wireframes show the design flow of where each page will lead to based on which buttons are clicked on each screen. The homepage acts as the main hub for the app where users can access every page easily. The menu button in the top left corner also allows the users to access multiple locations from each page.

PROTOTYPES

By redesigning the SF311 App, I have met user needs by creating a modern interface and by providing new features like news, traffic, transit times and social capabilities. All of these new features will encourage millennials to use the app since its more universal, rather than mainly being used to report problems. Introducing traffic, bus times and news will cause the app to have more downloads, therefor making it more convenient for residents to report issues to the city since it’s all in one app.

Home Page

Home page slider that shows app highlights like news, events and more.

More icons were added to make the home page more accessible with shortcuts.

A hamburger menu in the top corner was something the original app lacked. Adding this feature makes it easier for the users to quickly change pages.

Recent Reports

Icons are displayed next to each listing to categorize the reports.

An Interactive map and list of recent reports are now on the same page making it easier for the user to visual where each report was posted.

Report An Issue

Icons are displayed next to each category for fast navigation.

Text size was increased for legibility.

Top Requests are show at the top of the page for quick access.

My Account

Personal information is stored for quick reporting, and users can access FAQ and give feedback.

Users can now upload a profile picture to their account.

Users are now able to view their past reports, like other user's reports, and add friends.

NEW
FEATURES

New features include News,
Traffic, and Transit Times. These
features are key in gaining a younger
audience that can contribute to reporting issues throughout the city.

ICONS

The new icons included on the home page make the app more universal for users who may not understand English. The Recent Reports page also has categorized icons making it easier for the user to quickly navigate through the list of reports.

MENU

SF311

App Redesign

PROJECT DESCRIPTION

USER RESEARCH

HYPOTHESES

2

1

3

DESIGN CONCEPT

BEFORE SCREENS

SKETCHES

WIREFRAMES

PROTOTYPES

Home Page

Recent Reports

Report An Issue

My Account

NEWFEATURES

NEWFEATURES

PROTOTYPES

ICONS

ME
NU

NEW
FEATURES

NEW
FEATURES