Making Design Processes Easy for tDM
Client
LA Department of Transportation (LADOT)
My Role
Lead Product Designer
Industry
Nonprofit & TECH4GOOD
Timeline & Status
5 weeks—Launched
TLDR;
As a lead product designer, I spearheaded the transition of a high-stakes urban planning tool from a fragmented solo project to a scalable, team-driven ecosystem. Facing a lack of documentation and significant heuristic violations, I built a comprehensive design system from the ground up, establishing a "single source of truth" that eliminated UI drift and reduced design-to-dev friction. By standardizing complex status states and navigation patterns, I ensured the tool remained reliable for urban planners making multi-million dollar sustainability decisions, while providing the infrastructure for a 400% expansion of our design team.
CONTEXT
We Have To Accomodate for a Growing TDM Project
TDM is a civic tech tool used by urban planners to evaluate real estate projects against Los Angeles' Department of Transportation's sustainability goals.
Our team expanded
Scaled from 1 solo designer to a team of 4
The weekly grind
In an agile workflow new deliverables were expected each week
Scaling project
We were getting ready to add new features (e.g., my submissions board)
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.
Site Inconsistencies Disrupt Brand and Design Flow
Figma version (left) vs. Website version (right)
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.
Landing Page Violations
1
Visibility of status
The gray button doesn’t clearly indicate disablement, creating inconsistency with other disabled elements and error prompted before user input.
7
Flexibility and efficiency use
Gray box is not conspicuous and users are not reading content (as indicated by user data).
User Project Page Violations
2
Match between systems and real world
The icon is not indicative of an error, causing confusion.
4
Consistency and standards
Title: Poor UX Writing and typography are inconsistent and erroneous. UI looks vastly different across the website.
How Might We
Enable TDM designers to create consistent, on-brand mockups and iterations efficiently, with improved scalability
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.
DESIGN SYSTEM ANALYSIS
Analysing Current Design Systems To Map Ours
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.
DESIGN SYSTEM CREATION
Building a Single Source of Truth
I led the recreation of every site page and component from scratch. No more screenshots; every element was turned into a Master Component with defined variants.
Key System Pillars:
The Component Library: Built-in states (Default, Hover, Focus, and Disabled) to ensure heuristic compliance.
Heuristic Overhaul: Fixed the icon systems to clearly indicate errors vs. successes, ensuring urban planners have a "match between the system and the real world."
Onboarding Infrastructure: I created guided Figma pages and Loom video walkthroughs to ensure the next 4 designers wouldn't repeat the same mistakes.
CROSS-FUNCTIONAL IMPLEMENTATION
Establishing the New System Cross-Functionally
DESIGN SYSTEM ADHERENCE
Promoting Proper Design System Usage
OVERALL IMPACT
Reduced Design Time by 0ver 60%
With clarity and proper instructions, the team was able to significantly reduce design-time and thus hand off delivery time.
