TDM Calculator Design Systems
Los Angeles Department of Transportation’s (LADOT) TDM Calculator, a tool used in urban planning to evaluate strategies that support 2035 sustainability goals.
Client
LADOT
Services
UI & UX Design
Industry
Civic Tech
Timeline & Status
8 weeks - Launched
My Role & Impact
Led Design System as UX Designer
After conducting thorough heuristic audits, I presented key website consistency issues for TDM and established the design team’s research efforts, which included cross-team interviews and design system analyses. I directed the creation of TDM’s design libraries, developing over 100 components with clear usage and accessibility guidelines. These efforts reduced design and iteration time by 60%, improved onboarding materials for smoother design-to-development handoff, and initiated code documentation practices to support long-term scalability.
Context
What is TDM Calculator?
The Los Angeles Department of Transportation (LADOT) oversees the city’s urban planning, focusing on enhancing infrastructure, streamlining the real estate development process, and meeting sustainability goals by 2035. The TDM calculator helps users coordinate these projects to improve traffic flow and meet the objectives.
Problem space
Site Inconsistencies Disrupt Brand and Design Flow
The TDM Calculator launch lacked UI/UX documentation, forcing designers to use shortcuts and wasting time on simple tickets. For example, one of my team's objectives was to add a summary page at the end of the user's submission process.
Design in Figma
Implementation
1
Figma design is outdated
Navigation is not updated, designers were reusing old screenshots of the site to build over.
2
Incorrect status states
Designers were unaware they needed to show different status states because of lack of proper UX documentation.
3
Conditional scenarios and edge cases missed
Without status states, designers overlooked designing for conditional scenarios (how to indicate to users their met vs. unmet project goals), which had to be addressed after implementation.
Failed Adherence to Heuristic Standards
Additionally, component states and styles across the site were inconsistent and failed to adhere to heuristic standards, highlighting the need for improved workflows and site cohesiveness.
How Might We
Enable TDM designers to create consistent, on-brand mockups and iterations efficiently, with improved scalability
Discover: Team Interview
Team Alignment: Understanding the Developer Journey
Before jumping into a solution, I organized a meeting with the design team to ensure alignment and smooth collaboration with our developers. To better understand their workflow, I used semi-structured interview techniques to learn about their processes, identify pain points, and ensure our solution addressed their needs effectively.
Define: Design System Research
Analysing Current Design Systems
Based on our goals to reduce errors, scale efficiently, and improve design and development timelines, we concluded that creating a design system was essential. Starting from scratch, we studied established systems such as Atlassian, Google Material, Microsoft, Hack4LA, and Shopify to guide our approach and refine the objectives for our own system. I aggregated key insights from our collective data.
Key Takeaways
I identified key patterns from various design systems and collaborated with my team to guide the creation of our own.
Ease of Use
Goals: Effortless UI creation via Figma libraries, easy onboarding
Accessibility
Goals: Prioritizing inclusive, user-first designs through guidelines
Brand Identity
Goals: Aligning with LADOT’s objectives and brand vision
Develop: Design System Creation
Refining Our Design Framework
I took on replicating existing screens and creating guidelines for the usage of main components, working with another design team member to flesh out the Figma libraries. I led the meetings to ensure we were on the same page and understood how things worked.
Pop-up components: This is a component that designers kept reinventing over the years, leading to multiple styles across TDM. We agreed to simplify it to select styles and created this guide to prevent the issue from happening again.
Iconography: Switched to using icons from one place (Iconify) for a more cohesive approach to actions, navigation, and status indications.
Buttons: Before, we had various buttons across TDM, so creating one source of truth with clear states made navigation and key actions way more straightforward.
Color Palette: Establishing a color palette provided designers with a source of truth to maintain TDM's visual identity and enabled developers to use color tokens, reducing the need for hardcoding.
Text inputs and fields: Distinguishing inputs and fields and setting guidelines for when to use different fields were crucial for form layouts and anticipating edge cases.
Typography: Simplifying typography was key to maintaining visual identity. During the audit, we found at least five different font styles, which weakened TDM's professional look.
Recreation of each site page: Recreating each page was essential, removing the need for outdated screenshots or guesswork. Designers could quickly copy and paste frames to tackle new tickets or site-wide changes, ensuring efficiency and a polished result.
Deliver: Implementation
Establishing the New System Cross-Functionally
After integrating and documenting all changes and UI fixes into the system, I created the corresponding issues and guided the developers and the rest of the team through the updated Figma file.
Reflection
What I've Learned
Design systems can be a game changer, especially for a growing project like TDM Calculator. While I took on a big role in building the system, other designers continued working on existing issues we needed to tackle. In the midst of it all, it became obvious how helpful having a solid library and clear guidelines could be. No more endless questions about where or how to use specific components. But management isn’t easy or quick, and the real key was making sure the team had the tools to keep the system running smoothly.
Next Steps
Promoting Proper Design System Usage
o ensure the continued success of the design system, I introduced reusable code to streamline development, created guided Figma pages and Loom videos to support designer onboarding, and led regular design system reviews with designers and developers to catch inconsistencies early and update styles, libraries, or guidelines as needed.
