Project overview
Project overview
Project overview
The TDM Calculator is a web app that helps real estate developers align with Los Angeles’s Mobility Plan 2035 by improving proposals, avoiding fines, and streamlining city review and approvals.
The TDM Calculator is a web app that helps real estate developers align with Los Angeles’s Mobility Plan 2035 by improving proposals, avoiding fines, and streamlining city review and approvals.
The TDM Calculator is a web app that helps real estate developers align with Los Angeles’s Mobility Plan 2035 by improving proposals, avoiding fines, and streamlining city review and approvals.
Above
First page of the Create Project form, where developers input project details to assess compliance with proposed TDM ordinances.
Above
First page of the Create Project form, where developers input project details to assess compliance with proposed TDM ordinances.
Above
First page of the Create Project form, where developers input project details to assess compliance with proposed TDM ordinances.
I joined this project in September 2024, four months before its deadline, to find a disjointed design system. As the UX designer, I updated UI components and styles and audited the development site to introduce standardization.
I joined this project in September 2024, four months before its deadline, to find a disjointed design system. As the UX designer, I updated UI components and styles and audited the development site to introduce standardization.
I joined this project in September 2024, four months before its deadline, to find a disjointed design system. As the UX designer, I updated UI components and styles and audited the development site to introduce standardization.
A system without structure
A system without structure
A system without structure
Since the project’s inception in 2021, many designers have contributed to the open-source design system, which lacked set standards. The lack of coordination led to a design system with poor visual cohesion and workflow inefficiencies.
Since the project’s inception in 2021, many designers have contributed to the open-source design system, which lacked set standards. The lack of coordination led to a design system with poor visual cohesion and workflow inefficiencies.
Since the project’s inception in 2021, many designers have contributed to the open-source design system, which lacked set standards. The lack of coordination led to a design system with poor visual cohesion and workflow inefficiencies.
Above
Varied border widths, colors, and radii appear in form inputs, buttons, and infoboxes.
Above
Varied border widths, colors, and radii appear in form inputs, buttons, and infoboxes.
Above
Varied border widths, colors, and radii appear in form inputs, buttons, and infoboxes.
As a result, new designers faced a learning curve, requiring guidance from experienced team members. These challenges slowed down project progress, and ultimately, the project deadline was extended to address structural inconsistencies within the design system.
As a result, new designers faced a learning curve, requiring guidance from experienced team members. These challenges slowed down project progress, and ultimately, the project deadline was extended to address structural inconsistencies within the design system.
As a result, new designers faced a learning curve, requiring guidance from experienced team members. These challenges slowed down project progress, and ultimately, the project deadline was extended to address structural inconsistencies within the design system.
Updating components and styles
Updating components and styles
Updating components and styles
Reactive contributions to the design system led to an unstandardized design system that lacked cohesion; to resolve this issue, I focused on establishing consistency and clarity:
Reactive contributions to the design system led to an unstandardized design system that lacked cohesion; to resolve this issue, I focused on establishing consistency and clarity:
Reactive contributions to the design system led to an unstandardized design system that lacked cohesion; to resolve this issue, I focused on establishing consistency and clarity:
To standardize UI components in the development site, I redesigned modal components while supporting updates to table headers.
To standardize UI components in the development site, I redesigned modal components while supporting updates to table headers.
To standardize UI components in the development site, I redesigned modal components while supporting updates to table headers.
Above
Before the redesign, warning modals showed variations in layout, header size and color, body text color, writing style, and other elements, as illustrated by these two examples.
Above
Before the redesign, warning modals showed variations in layout, header size and color, body text color, writing style, and other elements, as illustrated by these two examples.
Above
Before the redesign, warning modals showed variations in layout, header size and color, body text color, writing style, and other elements, as illustrated by these two examples.
Above
Redesigned warning modal components for use throughout the website.
Above
Redesigned warning modal components for use throughout the website.
Above
Redesigned warning modal components for use throughout the website.
I overhauled the original tooltip components by drawing on existing design systems to develop tooltip and popover components for broad use across the website.
I overhauled the original tooltip components by drawing on existing design systems to develop tooltip and popover components for broad use across the website.
I overhauled the original tooltip components by drawing on existing design systems to develop tooltip and popover components for broad use across the website.
Above
Tooltip components (final design) used for brief explanations.
Above
Tooltip components (final design) used for brief explanations.
Above
Tooltip components (final design) used for brief explanations.
Above
Popover components (final design) share detailed information.
Above
Popover components (final design) share detailed information.
Above
Popover components (final design) share detailed information.
I created and documented three drop shadow styles to align visual styling across components.
I created and documented three drop shadow styles to align visual styling across components.
I created and documented three drop shadow styles to align visual styling across components.
Above
Shadow Level 1 creates subtle separation for non-overlapping elements.
Above
Shadow Level 1 creates subtle separation for non-overlapping elements.
Above
Shadow Level 1 creates subtle separation for non-overlapping elements.
Above
Shadow Level 2 is used for moderate emphasis for overlapping elements.
Above
Shadow Level 2 is used for moderate emphasis for overlapping elements.
Above
Shadow Level 2 is used for moderate emphasis for overlapping elements.
Above
Shadow Level 3 adds high-emphasis for elements in the top-most level.
Above
Shadow Level 3 adds high-emphasis for elements in the top-most level.
Above
Shadow Level 3 adds high-emphasis for elements in the top-most level.
Auditing the development site
Auditing the development site
Auditing the development site
I audited the development website using Chrome DevTools to verify that pages followed the design system and approved wireframes, focusing on the following goals:
I audited the development website using Chrome DevTools to verify that pages followed the design system and approved wireframes, focusing on the following goals:
I audited the development website using Chrome DevTools to verify that pages followed the design system and approved wireframes, focusing on the following goals:
Ensuring that elements on the page (like typographic styles and button components) adhere to the project’s design system.
Ensuring that elements on the page (like typographic styles and button components) adhere to the project’s design system.
Ensuring that elements on the page (like typographic styles and button components) adhere to the project’s design system.
Left
Comparison of Create Project Page 2: development site (top) vs. approved wireframe (bottom).
Left
Comparison of Create Project Page 2: development site (top) vs. approved wireframe (bottom).
Above
Comparison of Create Project Page 2: development site (top) vs. approved wireframe (bottom).
Identifying and addressing unnoticed usability issues.
Identifying and addressing unnoticed usability issues.
Identifying and addressing unnoticed usability issues.
Above
Disabled and active button colors are visually identical, which can confuse users.
Above
Disabled and active button colors are visually identical, which can confuse users.
Above
Disabled and active button colors are visually identical, which can confuse users.
Verifying that designs adhere to WCAG 2.1 AA success criteria.
Verifying that designs adhere to WCAG 2.1 AA success criteria.
Verifying that designs adhere to WCAG 2.1 AA success criteria.
Above
Screenshot from QA audit highlighting spacing issues that violate WCAG Success Criterion 2.5.8. Confidential details have been blurred.
Above
Screenshot from QA audit highlighting spacing issues that violate WCAG Success Criterion 2.5.8. Confidential details have been blurred.
Above
Screenshot from QA audit highlighting spacing issues that violate WCAG Success Criterion 2.5.8. Confidential details have been blurred.
Key takeaways
Key takeaways
Key takeaways
Auditing the development site revealed design system gaps and implementation issues, highlighting the need for post-launch updates to support future iterations. Though reassigned before completing a formal report, I uncovered actionable insights and undocumented patterns, such as the common use of a 5-pixel border radius, that helped new design team members get up to speed.
The TDM Calculator project taught me important lessons in proactive communication and systems thinking, beyond just visual polish:
Auditing the development site revealed design system gaps and implementation issues, highlighting the need for post-launch updates to support future iterations. Though reassigned before completing a formal report, I uncovered actionable insights and undocumented patterns, such as the common use of a 5-pixel border radius, that helped new design team members get up to speed.
The TDM Calculator project taught me important lessons in proactive communication and systems thinking, beyond just visual polish:
Auditing the development site revealed design system gaps and implementation issues, highlighting the need for post-launch updates to support future iterations. Though reassigned before completing a formal report, I uncovered actionable insights and undocumented patterns, such as the common use of a 5-pixel border radius, that helped new design team members get up to speed.
The TDM Calculator project taught me important lessons in proactive communication and systems thinking, beyond just visual polish:
I learned to navigate ambiguity by proactively seeking clarification from team members, preventing short-term fixes that lead to future gaps.
I learned to navigate ambiguity by proactively seeking clarification from team members, preventing short-term fixes that lead to future gaps.
I learned to navigate ambiguity by proactively seeking clarification from team members, preventing short-term fixes that lead to future gaps.
Auditing the development site deepened my understanding of the bridge between design and development, emphasizing the importance of properly structured components.
Auditing the development site deepened my understanding of the bridge between design and development, emphasizing the importance of properly structured components.
Auditing the development site deepened my understanding of the bridge between design and development, emphasizing the importance of properly structured components.