311 Data
Redesigning the 311 data dashboard for version 1.2
My role
Redesign the 311 Dashboard based on user pain points with a quick turnaround time in order to get the site live to improve stakeholder relationships.
Scope
Designing accessible charts
Redesigning overview dashboard for desktop
Updating the existing design system
Collaborating with developers
Tools
Figma, Github, Google Suites, Slack, Observable
Duration
8/2023 - 10/2023
Stakeholders
Hack for LA, Empower LA, Neighborhood Councils
Skip to:
Background
Hack for LA, in partnership with Empower LA, has developed 311 Data, a web-based tool designed to empower Los Angeles Neighborhood Councils and residents with the ability to visually explore and analyze publicly available 311 data.
Neighborhood Councils serve as grassroots-level advisory bodies that play a crucial role in bridging the gap between residents and City Hall.
Empower LA, or the Department of Neighborhood Empowerment (DONE), is a Los Angeles city agency that empowers and oversees Neighborhood Councils. They provide training, resources, and funding, facilitate communication, and advocate for these grassroots community organizations, enabling them to actively engage in local governance and democratic processes.
Robust Search Capabilities
Users can efficiently search through open geospatial data based on date ranges, council districts, and specific 311 request types, enabling precise data retrieval.
Comparative Analysis
The platform allows for the comparison of two different data queries, facilitating in-depth analysis and insights into trends and patterns.
Interactive Visualization
Users can visually explore search results through interactive maps, charts, and graphs, providing a comprehensive and intuitive understanding of the data.
The 311 Data tool serves as an invaluable resource for Neighborhood Councils in their mission to serve their communities effectively. With access to real-time and historical data on community issues and service requests, the tool equips councils with the information needed for informed decision-making.
This data-driven platform empowers Neighborhood Councils to allocate their annual public funds of approximately $42,000 more efficiently, ensuring these resources are directed towards addressing pressing priorities. Whether it's organizing events and programs tailored to community needs, advocating for essential causes such as crime prevention, infrastructure improvements, child safety, homeless assistance, the arts, or local economic growth, the 311 Data tool enhances their capacity to make well-informed and impactful decisions for the betterment of their neighborhoods.
Current status of the map from the previous design team's efforts (V1.1)
Note: our current design team will be making improvements to the map for V1.2 release (in addition to other redesigns to the dashboard, FAQ page, loading screen) due to accessibility issues and inherent user concerns.
Challenges
Over the past year, the 311 Data website experienced an unexpected outage, causing strain in our relationship with Empower LA. The restoration of the website is crucial not only for its technical functionality but also for the restoration of our partnership with Empower LA. The website serves as a vital tool for our collaboration, and its downtime has had significant repercussions on our ability to work effectively together. To mend this relationship and ensure seamless collaboration, it's imperative to bring the website back online and operational.
The downtime resulted from a combination of factors. Initially, the AWS backend was temporarily shut down due to the instability of version 1 of the system, with version 1.1, designed to resolve these issues, remaining unimplemented. This decision was influenced by the financial burden on the head of Hack for LA, who had personally funded hosting services for years.
In response, the team transitioned to a front-end-only application to maintain online presence and stability while backend issues were addressed, despite managing a significant volume of public data.
To rebuild and fortify our connections with these stakeholders, the 311 Team has embraced the following critical objectives:
Continuity
We're diligently piecing together missing information that previous teams failed to document, ensuring a seamless transition and reducing knowledge gaps.
Project Streamlining
Our team is restructuring the project board for enhanced clarity and efficiency, allowing us to focus on essential tasks while minimizing confusion.
Task Prioritization
With limited resources at our disposal, we are carefully prioritizing tasks to address immediate concerns and maximize the impact of our efforts.
Problem identification
We are diligently pinpointing key problem areas that led to the website's breakdown, so we can address them comprehensively and prevent future disruptions.
Site launch
We are prioritizing the second launch of the website to be completed efficiently and quickly in order to rebuild the relationship between Hack for LA and Empower LA.
Revamped design & development
The 311 Team is committed to overhauling and enhancing the website's design and functionality to ensure its reliability and utility.
These endeavors are undertaken under challenging conditions, including tight deadlines due to the urgent need to rebuild stakeholder relationships and limited information resulting from previous teams' departures without proper knowledge transfer.
Problem
Then, we took a closer look into the existing designs for the dashboard to consider the question:
How might we enhance the dashboard's utility for Neighborhood Council members?
How might we enable them to leverage data visualization effectively in order to gain valuable insights into the critical issues facing their neighborhoods?
Site analytics & internal testing
The planning team including project managers and engineering, design, and research leads, met to discuss MVP criteria while also giving feedback on the existing dashboard design that the previous design lead had completed several months ago. Since the team was in a stagnant position for several months once the site went down, I joined at an opportune time to discuss ways in which design and development could explore ways to improve the site while also aiming to have the site up and running again as soon as possible.
The feedback given from the planning team:
Some graphs are not useful
Graphs include colors that don’t meet accessibility standards
The dashboard includes assets that are not consistent with the rest of the platform
Recorded data indicated these findings:
😰
Data does not tell a story and is overwhelming
🤔
Functionality and meaning of the dashboards are unclear
😔
Data visualization is repetitive, cluttered, and not accessible due to contrast levels
🤯
Chart tools are more confusing than helpful
Due to existing research findings from historical testing, the product team was able to give constructive feedback on ways to improve the dashboard. Once unnecessary features of the dashboard were cut from the MVP list, I got to work on redesigning the dashboard for version 2.
Notes on the existing dashboard
Brainstorming
I collaborated closely with the product management and development teams to address our challenges.
Requirements:
1. Eliminating charts that contained non-essential data for our user
2. Redesigning the dashboard with a comprehensive layout to maintain an organized data visualization
3. Prioritizing accessibility in the design of the charts
4. Implementing dynamic axes that adapt based on user search criteria
5. Featuring an information overview at the top of the dashboard for quick insights
6. Incorporating a link to the FAQ page, providing additional information to help users better understand keywords and terminology
Feature prioritization
For the second launch of version 2, we conducted a comprehensive analysis to understand which features to prioritize in the dashboard redesign. These requirements encompassed various facets of the dashboard's functionality and user experience. They included:
Iterations
I prioritized designing the layout of the dashboard first to ensure that the data visualization would be well organized and informative.
Initial wireframe explorations
1
2
3
4
After receiving feedback on the different design variations, I directed my focus towards optimizing the selection of charts in order to facilitate a user-friendly understanding of the data while minimizing the risk of overwhelming our users.
User search
For the dashboard redesign, we made a deliberate design choice to re-use components from the
existing product to enhance user familiarity and consistency across the application. Since the date range component didn’t exist in the Figma Design System, I took the initiative to create these components from scratch within the design system, given their absence, to ensure the reusability of this component moving forward.
I worked closely with the head developer to discuss possible constraints and feedback since he was the lead engineer for the task of updating the dashboard. We discussed the feasibility of allowing the chart axis to be dynamic based on user search and data results, among other functionalities of the dashboard that would be useful and meet user needs.
Chart designs & dashboard components
Box and whiskers chart (V1.1)
Box and whisker charts can be less user-friendly due to their complexity and the need for users to refer to raw data for detailed information. Interpretation can also vary among users, leading to potential misunderstandings.
Bar chart (V1.2)
The research and design team unanimously decided that using a bar chart for data visualization is the best choice for our target users. This decision ensures that people can easily read, comprehend, and interpret the graph.
Solution
Using the existing design system, I was able to create a high-fidelity prototype that solved for user pain points, specifically the feelings of being overwhelmed, confused, and frustrated with the previous dashboard. I redesigned the data visualization to prioritize accessibility and ease of interpretation.
Next steps
The 311 Data team is now embarking on the V1.2 phase which will consist of a total redesign of the platform after thorough user research which consists of user interviews and user testing.
The UX Design team will work to improve the existing design system created by previous designers including but not limited to type settings, branding, navigation components, buttons, styling.
Through historical web analytics data gathered with Mixpanel, our team identified that users were making attempts to utilize the web-based tool on mobile devices. In response, the product team is now actively working on developing a responsive design to cater to users who require a mobile-friendly viewport.
Now that the site is live, we will also work with upper management at Hack for LA to restore relations with our primary stakeholder, Empower LA.