TDM Calculator: Design System
My Role & Responsibilities
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
Stakeholder
Los Angeles Department of Transportation (LADOT)
Timeline & Status
2 months - Implemented
Team
4 UX Designers (including me)
4 Developers
1 Product Manager
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.
Site Inconsistencies Disrupt Brand and Design Flow
The TDM Calculator launch lacked UI/UX documentation, forcing designers to use shortcuts, wasted time on simple tickets.
Ex. Our objective was to add a summary page at the end of the user's project submission process.
Design in Figma
Implementation
Navigation is not updated, designers were reusing old screenshots of the site to build over.
Changing components were not updated to show different status states.
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.
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 System Status
The gray button doesn’t clearly indicate disablement, creating inconsistency with other disabled elements
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 Projects Page Violations
2
Match Between System and Real World
Icon is not indicative of an error causing confusion
4
Consistency and Standards
Title: Poor UX writing and typography is inconsistent
Error 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 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.
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.
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 Figmal libraries. I led the meetings to ensure we were on the same page and understood how things worked.
Colour Pallete: 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.
Buttons: Before, we had a various buttons across TDM, so creating one source of truth with clear states made navigation and key actions way more straightforward.
Iconography: Switched to using icons from one place (Iconify) for a more cohesive approach to actions, navigation, and status indications.
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.
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.
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.
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.
Promoting Proper Design System Usage
Here's a list of action items I did to ensure continued success with the design system.
Brought reusable code into the picture: I discussed with the team to start adding reusable code to speed up development process.
Updated libraries regularly: I created guided Figma pages and Loom videos to help designers understand how the design system works.
Held regular reviews of the design system: I worked with designers and developers to catch inconsistencies early and update styles, libraries, or guidelines as needed.
@AnoushaDesigns' Profile
Anousha Shadrach
@AnoushaDesigns
I'm a #designer specializing in user experience design (UX/UI) and brand strategy in the social good space. I deliver value through early validation initiatives and streamlined workflows to enhance user experiences.
UX Work
About
© 2024 Anousha Shadrach. All Rights Reserved.
Sponsored
