The TDM Calculator is a web app that helps real estate developers align with Los Angeles’ Mobility Plan 2035, from selecting transportation demand management strategies to submitting applications for city review.
When I joined this project, four months before launch, foundational design system work still had to be completed as the product reflected years of decisions made without shared standards. Without established foundations, components were built ad-hoc, resulting in inconsistencies across designs, the dev site, and how they were implemented.
Standardizing Modals
The design system already had three types of modals based on the following use cases: to warn users, for completing actions, and for sharing important information. However, modals across the dev site had various style variations that were inconsistent with the design system.
I updated the visual design of the modals and created content guidelines, keeping designs close to what already existed to save time. But I didn’t question whether the three categories were still applicable, and the modals had to be revisited months later to account for confirmatory actions.
Establishing Tooltips and Popovers
The design system had four tooltip types defined by appearance and placement rather than interaction pattern, making them difficult to apply broadly across the site.
To generalize these components, I researched the distinction between tooltips and popovers and audited every tooltip-like component in the dev site.
The audit also uncovered an accessibility and usability issue, which was determined to be out of scope.
From the research and audit, I consolidated the four types into two generalized components with clear guidelines on use and content.
Reordering the Navigation
While working on the Submissions page, I noticed the order of the links didn’t reflect how users should move through the product. I updated the navigation to include newly added pages, such as the Submissions page, and reordered the links based on sequential priority for each user type: regular user, admin, and security admin.
In addition, I updated the hover and active states of links for better readability and to align with existing interaction patterns in the product.
Outcomes
I audited the dev site for visual consistency and conducted a QA review after handoff, documenting design and implementation issues along the way. This work brought a more visually cohesive design and gave future contributors clearer guidelines to build from.