Improving Project Review Workflows in the TDM Calculator for L.A. City Planning

Company: Hack for LA | Client: LACP and LADOT

Role

UI/UX Designer

Timeframe

4 weeks

Tools

Figma
GitHub

Status

MVP in development

PROJECT OVERVIEW

The TDM Calculator is a tool commissioned by the LADOT for real estate developers comply with emissions regulations.

Through 2030, LA has a projected $30 billion dollars in residential projects, or 100,000 new housing units. TDM Calculator is a collaboration between Hack 4 LA with LA Department of Transportation (LADOT) and LA Department of City Planning (LACP). The project was part of Los Angeles’s $12.9 billion dollar initiative to meet the city’s 2035 Mobility Plan to make LA accessible for all Angelinos. Part of the Mobility Plan consists of building more efficient projects that reduce emissions and ease congestion. TDM Calculator is a web tool for real estate builders to ensure their residential projects support LA’s goal in increasing access multi-modal transportation and reducing traffic congestion. Real estate developers would submit their project for approval by the LACP.

Source: LA City Planning (via SCAG 2016 RTP/SCS)
planning.lacity.gov

PROJECT PROBLEM

City planners expressed a need to update internal notes without disrupting their workflow

To support the internal review process at LACP, our team introduced an Admin Notes feature that allowed staff to add and manage notes directly from the Projects page. This streamlined project tracking by removing the need to navigate away from their workflow. We framed our design challenge with a focused question:

"How might we let users add and edit notes without leaving the Projects page, while preserving space in a dense data table?"

USABILITY STUDIES

Early testing uncovered layout issues, unclear interactions, and low discoverability

The original in-line editing created layout issues and made it harder for users to interact confidently with the notes. Feedback from usability testing showed users needed clearer interaction cues, a cleaner layout, and better safeguards against data loss

The first version of the feature let users click a pencil icon to edit notes directly in the data table. This seemed efficient at first, but it quickly became clear that it wasn’t ideal. The notes column was too wide, which broke the alignment of the table. Showing full text for each note made the interface feel cluttered and harder to scan. Based on usability tests with 3 users, we noticed they also weren’t sure how to save their edits or even where to click to begin editing. I conducted usability testing with 3 users on the initial implementation to better understand user needs. Common themes emerged:

• Users liked not having to leave the page, but the wide notes column made it harder to scan the table
• Several participants suggested using icons, tooltips, or modals instead of displaying full notes inline
• Some users didn’t realize they could click to add or edit a note

This feedback highlighted the importance of discoverability, visual clarity, and interaction safeguards in the redesign.

MOCKUP

Through 2 iterations, we used truncated text, tooltips, rich text editing, and a modal to reduce clutter and improve clarity

In the first iteration, we replaced the original in-line editing with a dedicated modal to reduce visual clutter and improve readability. Notes appeared as truncated text with ellipses, while hover tooltips provided quick previews without expanding the table. To support easy scanning, we introduced status icons: a plus sign for new notes and a notepad icon for existing ones.

Following stakeholder input, we expanded functionality in the second iteration by adding an HTML text editor, removing the character limit, and enabling users to resize the input field. These updates were built using existing product patterns to ensure a consistent and familiar user experience. To prevent users from accidentally losing their notes, we added an exit-intent confirmation modal. I collaborated with another designer to ensure the modal’s interaction, layout, and copy aligned with platform-wide modal behavior.

RESULTS

The redesigned Admin Notes feature reduced clutter, improved scannability, and eliminated horizontal scrolling on the Projects dashboard

As part of the final solution, I replaced full-text note displays with icon-based triggers and introduced truncated text with hover previews. This redesign reduced the overall table width by 10.27%, supporting the team's efforts in organizing the column tables. These changes eliminated the need for horizontal scrolling, and creating a more compact and legible layout without sacrificing functionality. The new design also enhanced consistency across interactions, making it easier for users to recognize and engage with note-related actions. I also provided additional components that matched teh design system. 

Side-by-side comparison of the first and final versions.

LESSONS LEARNED

In this project, I learned the important of early alignment with stakeholders, and reusing existing patterns to deliver faster results

Looking back, aligning earlier with stakeholders could have helped us avoid rework and reduce friction in decision-making. Asking targeted questions early on — like whether notes should support formatting or unlimited characters — would’ve saved valuable time. One of the most effective decisions we made was to lean on existing product patterns. It helped speed up implementation and kept the user experience cohesive.

Next steps include testing the live version with users to evaluate its functionality and identify areas for improvement.