ABOUT
WORK
RESUME


311Data

Developing a filters and search modal to make finding specific data requests easier

ROLE

UX Designer

TEAM

Allison Jeon

TIMELINE

Aug 2023 - Dec 2023

OVERVIEW

Every day, thousands of 311 requests are made all across LA to resolve issues such as illegal dumping and homeless encampments. To allow local residents to make informed decisions about how to improve their communities, Hack for LA created an easy-to-use application to track these data requests. 


Over the course of three months, I worked on improving the Search and Filters Modal to make the user experience more intuitive and efficient. After rounds of user testing and getting internal feedback with the team, I handed off my designs for the dev team to implement for V2 in early April.

00 | FEATURES

Modal Overview

01 | BACKGROUND

How do we make the search process as easy and efficient as possible for the user?

Sifting through mountains of data is like trying to find a needle in a haystack. That’s why the 311Data team implemented a search and filters model to allow the user to find exactly what they’re looking for.

02 | GUIDELINES

Strive for smooth, consistent, and full user control

In accordance to existing UX principles, I came up with these 3 goals to accomplish with my redesign:

  1. Make the process smooth:

Get rid of unnecessary steps that the user has to go through to accomplish their task - allow for the easiest user flow possible.

  1. Make the process smooth:

Get rid of unnecessary steps that the user has to go through to accomplish their task - allow for the easiest user flow possible.

  1. Strive for consistency:

Make the interactions on the modal as consistent as possible to ensure that the user has the same experience for all features - thereby making the modal easier to navigate.

  1. Strive for consistency:

Make the interactions on the modal as consistent as possible to ensure that the user has the same experience for all features - thereby making the modal easier to navigate.

  1. Allow users freedom and control:

Allow for users to get the result they want through the method they want.

  1. Allow users freedom and control:

Allow for users to get the result they want through the method they want.

03 | INITIAL THOUGHTS

Confusing wording and misleading affordances in original modal

The existing modal had the basic search and filter functions, however there were a couple of features that could be confusing to users.

04 | USABILITY TESTING

Calendar drop down menu delays user input

After getting the first redesign of the modal out, our team went through usability testing to see what the user experience actually looked like.

  1. Hard to select a large range of dates

Users had a hard time selecting a range in the calendar menu. One user asked if there was a way to type in a set date range instead.

  1. Hard to select a large range of dates

Users had a hard time selecting a range in the calendar menu. One user asked if there was a way to type in a set date range instead.

  1. Hard to tell when a date was selected

Because the user had no immediate feedback after selecting a date or a range, they were unsure if their selections had actually gone through.

  1. Hard to tell when a date was selected

Because the user had no immediate feedback after selecting a date or a range, they were unsure if their selections had actually gone through.

  1. Calendar menu unintuitive

Overall users struggled to use the calendar menu in comparison to the other filters.

  1. Calendar menu unintuitive

Overall users struggled to use the calendar menu in comparison to the other filters.

05 | COMPETITIVE ANALYSIS

Two is better than one?

We decided to look at a variety of other websites and apps with a similar calendar drop down menu to get an idea of how we could make our interface more intuitive. Specifically, we looked at Airbnb, Google Flights, and the SF311 Data website.

AIRBNB CALENDAR DROP DOWN

Airbnb Calendar Drop Down

  • Had two menus for check in and check out

  • Included common date range options on the bottom

Airbnb Calendar Drop Down

  • Had two menus for check in and check out

  • Included common date range options on the bottom

Airbnb Calendar Drop Down

  • Had two menus for check in and check out

  • Included common date range options on the bottom

GOOGLE FLIGHTS CALENDAR DROP DOWN

Google Flights

  • Also had separate departure date and return date

  • Calendar drop down includes two months

  • Date range is visualized through highlighting

  • 'Done' button to finalize selection

Google Flights

  • Also had separate departure date and return date

  • Calendar drop down includes two months

  • Date range is visualized through highlighting

  • 'Done' button to finalize selection

Google Flights

  • Also had separate departure date and return date

  • Calendar drop down includes two months

  • Date range is visualized through highlighting

  • 'Done' button to finalize selection

SF311 DATA CALENDAR FILTER

SF311 Data

  • Had two boxes for start and end date

  • Allowed the user to type in custom date range

SF311 Data

  • Had two boxes for start and end date

  • Allowed the user to type in custom date range

SF311 Data

  • Had two boxes for start and end date

  • Allowed the user to type in custom date range

All the calendars had two different selections for the start date and the end date. Additionally, allowing the user to type in a custom date range gave the user more freedom.

06 | REDESIGN

Improving wording, consistency, and affordances in the redesign

I refined the existing modal by eliminating the confusing wording and making the elements all consistent in their user interaction. Specifically, I also implemented the two menu drop down for the calendar as well.

08 | PROTOTYPE

Modal Prototype Videos

District Drop Down

Calendar Drop Down

Enjoyed reading my case study? Let's work together!

Enjoyed reading my case study? Let's work together!

Or find me at my socials below!

You can find me at my socials below :)

Angela Wu

Angela Wu

Angela Wu