TDM Calculator: Design System

TDM Calculator: Design System

TDM Calculator: Design System

My Role as UX/UI Designer

  • Presented website consistency issues for TDM after conducting thorough heuristic audits

  • Established the design team’s research efforts, including cross-team interviews and design system analyses

  • Directed the creation of TDM's design libraries, developing 100+ components with guidelines on usage and accessibility

My Impact

  • Reduced design and iteration time by 60%

  • Significantly improved the scalability and consistency of the existing site

  • Created essential onboarding materials to maximize effective use of the design system

  • Initiated code additions to the design system to better support the developer team’s needs.

Stakeholder

LA Department of Transportation

Timeline & Status

2 months - Implemented

Team

  • 4 UX Designers (including me)

  • 4 Developers

  • 1 Product Manager

Stakeholder

LA Department of Transportation

Timeline & Status

2 months - Implemented

Team

  • 4 UX Designers (including me)

  • 4 Developers

  • 1 Product Manager

Context

TDM Calculator…What Is That?

The Transportation Demand Management (TDM) Calculator is a digital tool by the Los Angeles Department of Transportation (LADOT) designed to enhance urban infrastructure by streamlining the planning process for real estate development and improving traffic flow and environmental outcomes.

My Impact

I led the creation and implementation of a design system for the TDM Calculator, reducing design iteration time by 60%, developing scalable patterns for future adjustments, and enhancing website uniformity through thorough heuristic audits and fixes. Additionally, I spearheaded solutions for various UX issues.

Problem Space

Houston, We Have a Consistency Issue

TDM's initial launch lacked UI/UX design documentation, causing inconsistencies in typography, components, colors, and dialog box styles. This forced designers to reinvent existing components and burdened developers with constant adjustments.

1
4
1
4
1
Button is enabled though user requirements are not fulfilled
4
Title: Not consistent among all pages
Errors: Inconsistent with other error alignment
1
Gray button is not a clear indication of disablement
7
Box is: not conspicuous and users are not reading content
1
7
1
7
2
4
4
2
4
4
2
Icon is not indicative of the circumstance
4
Title: Not descriptive enough and font is not consistent
Box: Inconsistent UI for errors across the site

Problem Space

Houston, We Have a Consistency Issue

TDM's initial launch lacked UI/UX design documentation, causing inconsistencies in typography, components, colors, and dialog box styles. This forced designers to reinvent existing components and burdened developers with constant adjustments.

1
4
4
1

Button is enabled though user requirements are not fulfilled

4

Title: Not consistent among all pages

Errors: Inconsistent with other error alignment

1

Gray button is not a clear indication of disablement

7

Gray box is not conspicuous and users are not reading content (as suggested by user data)

1
7
2
4
4
2

Icon is not indicative of error

4

Title: Not descriptive enough and font is not consistent

Box: Inconsistent error UI across the site

How Might We

How Might We

Enable TDM designers to create consistent, on-brand mockups and iterations efficiently, with improved scalability

Enable TDM designers to create consistent, on-brand mockups and iterations efficiently, with improved scalability

Discover: Primary Research

Let's Work Together & Be Alright

Before jumping into a solution, I interviewed all of our developer team to gain some insights on how to improve design handoff.

Before jumping into a solution, I interviewed all of our developer team to gain some insights on how to improve design handoff.

Define: Secondary Research

You Can Do A Lot With Building Blocks

Given our circumstances, we concluded that a design system was essential for the scaling of our project. We started from scratch, studying established systems like Atlassian, Google Material, Microsoft, Hack4LA, and Shopify.

Given our circumstances, we concluded that a design system was essential for the scaling of our project. We started from scratch, studying established systems like Atlassian, Google Material, Microsoft, Hack4LA, and Shopify.

Design System Takeaways

01.

Ease of use

Goals: Effortless UI creation via components, smooth onboarding, easy updates

02.

Accessibility

Goals: Prioritizing inclusive, user-first designs through guidelines

03.

Upholding Brand Identity

Goals: Aligning with LADOT’s objectives and brand vision

Develop: Design System Creation

Build-A-Design-Framework Workshop

I took on replicating existing screens and making guidelines for the usage of main components.

I took on replicating existing screens and making guidelines for the usage of main components.

Colors, Buttons, and Everything Nice

Colors, Buttons, and Everything Nice

During my replication process, I studied the existing code and documented hex codes, buttons, icons, and more. I led workshops with the design team to simplify the UI and ensure consistency. Alongside another designer, I created Figma libraries to streamline our workflow.

During my replication process, I studied the existing code and documented hex codes, buttons, icons, and more. I led workshops with the design team to simplify the UI and ensure consistency. Alongside another designer, I created Figma libraries to streamline our workflow. Note: All headers are the same size, there were some Figma exporting issues.

Deliver: Implementation

Here Comes the Messenger

After integrating and documenting all changes and UI fixes into the system, I created the corresponding issues, and our team guided the developers through the updated Figma file.

Deliver: Implementation

Here Comes the Messenger

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

That's a Wrap

Design time was reduced by 60%, but what are the next steps?

  • Add reusable code: I discussed with the team to start adding reusable code to speed up development process.

  • Update libraries regularly: I created guided Figma pages and Loom videos to help designers understand how the design system works.

  • Regular reviews of the design system: I worked with designers and developers to catch inconsistencies early and update styles, libraries, or guidelines as needed.

Next Case Study

Copup: Quick Anxiety Relief

© 2024 Anousha Shadrach. All Rights Reserved.