311 DATA
311 data
To empower local residents and Neighborhood Councils to make informed decisions about how to improve their communities using an easy-to-use application, Hack For LA partnered with EmpowerLA to create the 311 Data project. The 311 Data project makes navigating the wealth of 311 data easier using an open-source application built and maintained by volunteers throughout our community.
Not the beginning, nor the end
I joined the design team after they had just launched their beta version. Although the beta version is live and provides all the necessary inputs and outputs, it still had room for improvement in terms of flow and the overall experience. Our collective goal is to improve the aesthetics and most importantly round out the edges of the current user experience. This is an ongoing project in collaboration with other designers, developers, and project manager.
Beta version - Explore 311 data page
Getting to know our users first
Before trying to solve the problem which I didn't fully understand yet, I looked over previous research insights and user testing data. Our team had just concluded a round of heatmap testing, which gave us better insights to how users actually interacted with our site. We now understood which inputs were most useful to our users and how our original order didn't render a smooth user flow. A majority of the users also didn't know how to utilize the filters properly, given our clunky and perplexing design.
Merging of the two user flows
In addition, my team had previously separated the flows for basic and advanced users due to the assumption that they had differing goals. But by doing so, we inadvertently allowed neglect of the advanced filters and forced users to re-input queries that could have automatically transferred over.
After much discussion, we've reorganized our priorities to merge and improve the two flows so that users of both kinds can easily switch between basic and advanced filters.
Improvements to the advanced filters
Given that we had four designers, we separated the design tasks into basic and advanced modes. My fellow designer and I tackled the advanced filters by first thinking through the user flow and pinpointing possible needs and expectations users might encounter.
Referring to observations from the Hotjar tests, we re-organized the order of the input fields: districts, request types, time range, and request status. We also set certain inputs (such as the time range) as default according to the most common search queries. To further reduce the burden put on users, we automatically re-populated the new query with previous inputs. All the while, users have full flexibility to adjust or delete any inputs.
During the advanced user flow audit, we also noticed that we were setting the barriers to entry too high. We expected advanced users to know exactly what they want to compare because we assumed them to be city council members only. But this isn't true, given that regular citizens also utilize comparison tools to supplement their communication with city representatives.
Therefore, we eliminated the preceding selection between Neighborhood Council and City Council, instead, we showcased all the councils with two distinct labels for more direct input.
Making charts more appealing and useful
The data generated charts allow users to visualize quantitative data and be exported if needed. Therefore we allocated a large space to hold these charts but it wasn't fully utilized with one chart taking up the entire space. We didn't want to be wasteful on top of asking users to repeat tasks, so we minimized the charts to accommodate all five on the same fold. Users still have the option to expand the chart by clicking on it and within this modal, they gain access to detailed labels and options to export individually.
Next steps
We presented our iterated version to the entire team and received great feedback that we aim to implement in the upcoming iterations. But the overall direction has been approved, therefore we will begin to work on the mobile version within a couple weeks.
Come back soon for updated progress!
Selected Works
