311DATA
Filtering Data Requests
Developing a filters and search modal to make finding specific data requests easier
ROLE
UX Designer
TEAM
Allison Jeon
TIMELINE
Oct 2023 - Dec 2023
OVERVIEW
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.
00 | FEATURES
Modal Overview
01 | BACKGROUND
What is 311Data?
311Data is a platform that allows users to search for service request data for the county of Los Angeles. The main users are Neighborhood Council members who use this data to target issues to tackle for their specific districts within LA county.
02 | PROBLEM
Searching is a frustrating user experience.
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.
However, the current search process makes for a tedious experience that prevents users from getting the relevant data they’re looking for.
Why is this a problem? Gathering data is the main use case for 311Data and is therefore preventing our target users from achieving their goal.
03 | INSIGHTS
What did users have to say about our existing modal?
"Can't the calendar feature be easier to use? If for example I wanted to select a custom date range for like three months, it was really hard for me to do that."
"It was kind of annoying scrolling through all of the neighborhood districts trying to find my specific one."
"Didn't know the difference between the date range dropdown and the calendar icon button."
"I clicked on the calendar icon expecting a dropdown but it was just different date range options."
"What if I don't know what area my district falls under?"
We narrowed down these thoughts into three deeper user insights about the overall user experience with the modal:
04 | COMPETITIVE ANALYSIS
Ease of Use and Flexibility
One of the biggest issues that users brought up was the confusion on the date picker and difficulty in selecting a custom range. I wanted to get a good idea of how other products structured their date pickers and how they prioritized ease of use and flexibility.
I judged each product based on how easy it was for me to select a custom date range and then the different ways I was able to select that date range.
AIRBNB CALENDAR DROP DOWN
GOOGLE FLIGHTS CALENDAR DROP DOWN
SF311 DATA CALENDAR FILTER
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.
05 | DESIGN CRITIQUE
Inconsistency Makes for a Frustrating Experience
In addition to the user insights we had gathered, we also noticed some design choices and wording from the last iteration that were inconsistent and confusing to the user.
06 | ITERATION
Pushback from Devs: Limiting Users to a 30-Day Range
We sent out our first iteration to the devs to get feedback on.
We received some pushback in which devs let us know that they wanted to implement a limit on the date range, due to the extent of data that existed on the back-end.
This was a blow to us as we had spent our time focusing on how best to increase the user’s freedoms in selecting a custom date range.
08 | PROTOTYPE
Modal Prototype Videos
District Drop Down
Calendar Drop Down