Lead UI Software Engineer

📍 Job Overview

Job Title: Lead UI Software Engineer

Company: Dodge Construction Network

Location: Kochi, Kerala, India

Job Type: FULL_TIME

Category: UI Engineering / Front-end Development

Date Posted: May 05, 2026

Experience Level: 7-10 years

🚀 Role Summary

• Lead the design and implementation of new user interface features using modern Angular 21, leveraging Signals, standalone components, and zoneless change detection.

• Drive the refactoring of legacy UI components and complex codebases to enhance maintainability, scalability, and performance.

• Develop reactive data flows and manage state effectively using NgRx and RxJS for robust front-end applications.

• Ensure a seamless and visually appealing user experience across mobile and desktop devices through expert application of TailwindCSS and Sass.

• Foster a culture of code quality, knowledge sharing, and continuous improvement within the engineering team.

📝 Enhancement Note: While the title is "Lead UI Software Engineer," the responsibilities lean heavily into advanced front-end development and architectural decisions, particularly concerning Angular modernization and legacy code refactoring. This role requires not just coding proficiency but also leadership in technical strategy for the UI domain. The "Lead" aspect suggests mentorship and architectural guidance rather than direct people management, typical for senior individual contributor roles in tech.

📈 Primary Responsibilities

• Architect, develop, and deploy new user-facing features and enhancements within the Angular 21 framework.

• Execute strategic refactoring initiatives to modernize existing Angular components, improve state management patterns, and streamline API integrations for scalable solutions.

• Actively participate in and contribute to the migration from Angular Material to Zard UI, ensuring consistency and adherence to new design standards.

• Implement and maintain complex reactive data flows using NgRx and RxJS, optimizing for performance and predictability.

• Design and build reusable, responsive UI components that deliver exceptional user experiences across a variety of devices and screen sizes, utilizing TailwindCSS and Sass.

• Conduct thorough code reviews, provide constructive feedback, and mentor junior engineers on best practices in UI development and Angular architecture.

• Collaborate closely with Product Managers and UX Designers to translate requirements into intuitive, high-quality, and technically sound user interfaces.

• Identify and address performance bottlenecks in the front-end architecture and codebase, implementing solutions for optimal loading times and responsiveness.

• Stay abreast of emerging front-end technologies, including AI tools for development and debugging, and advocate for their adoption where beneficial.

📝 Enhancement Note: The core responsibilities highlight a dual focus on innovation (new features in Angular 21) and technical debt reduction (refactoring legacy code). The emphasis on "patterns that actually scale" and "something maintainable" indicates a need for architectural thinking and long-term solution design. The migration to Zard UI is a significant project component, requiring adaptability and a strong understanding of design system implementation.

🎓 Skills & Qualifications

Education:

Experience:

• 7–10 years of progressive experience in front-end or UI engineering roles.

• Proven experience in architecting and developing complex, large-scale web applications.

Required Skills:

• Deep Expertise in Angular: Extensive experience with Angular versions including advanced features like Signals, standalone components, and modern change detection strategies (e.g., zoneless).

• State Management: Strong proficiency in NgRx for managing complex application state and RxJS for building reactive, observable-based data flows.

• CSS Frameworks & Preprocessors: Mastery of TailwindCSS and Sass, with a comprehensive understanding of responsive design principles and mobile-first development.

• Responsive Design: Proven ability to create UIs that are effective and accessible on both desktop and mobile devices.

• Cross-functional Collaboration: Excellent ability to work collaboratively with Product Management, UX/UI Design, and backend engineering teams.

• Code Quality & Refactoring: Strong skills in writing clean, maintainable code and a proven track record of refactoring complex, legacy JavaScript/TypeScript code.

• Performance Optimization: In-depth knowledge of front-end performance tuning techniques, including architectural considerations, code optimization, and profiling tools.

• TypeScript: Proficient in TypeScript for building robust and scalable front-end applications.

Preferred Skills:

• Experience with Angular Material and knowledge of UI migration strategies.

• Familiarity with AI tools and their application in UI development, debugging, or code generation.

• Experience with modern JavaScript build tools and module bundlers (e.g., Webpack, Vite).

• Understanding of CI/CD pipelines for front-end applications.

• Exposure to backend integration patterns and RESTful API design from a front-end perspective.

📝 Enhancement Note: The experience requirement of 7-10 years firmly places this role at a senior or lead individual contributor level. The emphasis on specific Angular features (Signals, standalone components, zoneless) suggests the company is invested in adopting and maintaining modern Angular best practices. The requirement for refactoring legacy code is a critical skill for this role, indicating a need for someone who can navigate and improve existing systems, not just build new ones.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Case Studies of Front-end Architecture: Showcase projects where you designed or significantly contributed to the architecture of complex UI applications, detailing the technical challenges and solutions implemented.

• Demonstration of Legacy Code Refactoring: Include examples of how you approached and successfully refactored challenging legacy codebases, highlighting improvements in maintainability, performance, or scalability.

• Examples of Responsive and Performant UI Components: Present well-documented examples of UI components developed using modern frameworks (ideally Angular) and CSS methodologies (like TailwindCSS/Sass) that demonstrate excellent responsiveness and performance.

• Evidence of State Management Implementation: Provide examples of how you've implemented robust state management solutions (e.g., NgRx) in real-world applications, explaining the design decisions and impact.

Process Documentation:

• Workflow Design and Optimization: Demonstrate experience in designing efficient front-end development workflows, including code review processes, testing strategies, and CI/CD integration.

• System Implementation and Automation: Showcase understanding and experience in implementing new UI frameworks or libraries, and how you've automated repetitive tasks in the development lifecycle.

• Measurement and Performance Analysis: Provide examples of how you've measured and analyzed front-end performance, and implemented strategies for continuous improvement based on data.

📝 Enhancement Note: For a Lead UI Software Engineer role, a portfolio is crucial. It should not just list technologies used but demonstrate how they were used to solve complex problems, particularly in areas like performance optimization and legacy code modernization. The emphasis on "patterns that actually scale" and "maintainable" code means showcasing architectural thinking and a structured approach to development is key.

💵 Compensation & Benefits

Salary Range:

Given the location (Kochi, India), experience level (7-10 years), and the specialized skills required (advanced Angular, NgRx, TailwindCSS), a competitive salary range would typically fall between ₹15,00,000 to ₹25,00,000 per annum. This estimate is based on industry benchmarks for senior software engineers in major Indian tech hubs, adjusted for the specific technology stack and leadership responsibilities.

Benefits:

• Comprehensive Health Insurance: Coverage for employees and potentially dependents, including medical, dental, and vision.

• Paid Time Off: Generous vacation days, sick leave, and public holidays.

• Retirement Savings Plan: Contributions to a provident fund or similar retirement savings scheme.

• Professional Development: Budget for training, certifications, conferences, and access to online learning platforms to enhance skills in UI engineering and Angular.

• Hybrid Work Model: Flexibility to work from home and the office, promoting work-life balance.

• Performance Bonuses: Potential for annual bonuses based on individual and company performance.

• Stock Options/Equity: Possible participation in employee stock purchase plans or equity grants for senior roles.

Working Hours:

• Standard full-time workweek, typically around 40 hours.

• The hybrid model offers flexibility, with core hours likely established for team collaboration and meetings, allowing for some autonomy in daily scheduling.

📝 Enhancement Note: For the salary estimation, I've researched typical compensation for Senior/Lead Front-End Engineers with 7-10 years of experience in Kochi, India. The range is broad to account for variations in benefits packages, specific skill depth, and negotiation. The benefits listed are standard for tech roles in India and have been tailored to include professional development opportunities relevant to a lead engineering position.

🎯 Team & Company Context

🏢 Company Culture

Industry: Construction Technology / Data & Analytics

Company Size: Dodge Construction Network is part of a larger ecosystem, with the broader organization likely having hundreds or thousands of employees globally. The direct engineering team in Kochi might be smaller, perhaps 20-50 individuals, fostering a more focused development environment.

Founded: Dodge Construction Network has a long and established history, dating back over a century (founded in 1891). This legacy suggests a company that values stability, deep industry knowledge, and long-term relationships, while also embracing modern technological advancements to stay competitive.

Team Structure:

• The UI engineering team in Kochi likely operates within a larger engineering department, possibly structured by product lines or functional areas.

• This role reports into an Engineering Manager or Director, with potential for mentorship or technical leadership over a small group of UI engineers or contractors.

Methodology:

• Data-Driven Development: Leveraging Dodge's extensive data to inform product decisions and user experience improvements.

• Agile/Scrum Practices: Likely employing iterative development cycles for feature delivery and bug fixing.

• Modern Development Standards: Commitment to adopting and maintaining up-to-date technologies and practices, as evidenced by the focus on Angular 21 features and code refactoring.

• Focus on Scalability and Maintainability: Prioritizing the long-term health of the codebase and architecture.

Company Website: https://www.construction.com/

📝 Enhancement Note: The company's long history in the construction industry, coupled with its focus on data and technology, positions it as a significant player aiming to modernize a traditional sector. For operations professionals, this means working in a space with rich data potential and a clear mission to drive efficiency and growth through technology. The hybrid model and Kochi location suggest a strategy to leverage global talent while maintaining a strong local presence.

📈 Career & Growth Analysis

Operations Career Level: Lead UI Software Engineer

This role represents a senior individual contributor position within the engineering team. It signifies a level of expertise where the engineer is expected to not only execute complex technical tasks but also to influence technical direction, mentor others, and take ownership of significant architectural decisions within the UI domain. The "Lead" title implies a capacity to guide technical strategy and best practices for UI development.

Reporting Structure:

The Lead UI Software Engineer will typically report to an Engineering Manager or Director of Engineering. They will likely work closely with Product Managers and UX Designers, forming a core product development triad. While not a people management role, leadership is expected through technical guidance and mentorship of other UI engineers.

Operations Impact:

The impact of this role is directly tied to the user experience of Dodge Construction Network's digital products. By building intuitive, performant, and scalable interfaces, this engineer will:

• Enhance customer engagement and satisfaction by providing a seamless user journey.

• Drive adoption of new features and products by making them accessible and easy to use.

• Improve operational efficiency for users of Dodge's platforms by reducing friction and simplifying complex tasks.

Growth Opportunities:

• Technical Specialization: Deepen expertise in advanced Angular features, front-end architecture, performance tuning, and potentially explore related areas like web accessibility or front-end security.

• Architectural Leadership: Progress to a Senior Staff or Principal UI Engineer role, taking on broader architectural responsibilities across multiple products or platforms.

• Management Track: Transition into an Engineering Management role, leading a team of engineers, if desired.

• Cross-functional Expertise: Gain deeper insights into Product Management or UX Design principles through close collaboration.

• Mentorship and Training: Formalize mentorship roles, lead training sessions, and contribute to the development of junior engineers within the team.

📝 Enhancement Note: The "Lead" designation indicates a career path focused on technical mastery and influence. Growth opportunities are geared towards increasing scope of technical ownership, strategic input, and potentially leadership through mentorship or formal management. The impact is directly tied to user adoption and satisfaction, which are critical drivers of business value in a data-centric platform.

🌐 Work Environment

Office Type: Hybrid Work Environment

This role is based out of Kochi, Kerala, India, with a hybrid work arrangement. This means employees are expected to work from the office for a portion of their work week and can work remotely for the remainder. This model aims to balance the benefits of in-person collaboration with the flexibility of remote work.

Office Location(s):

The primary office location specified is Kochi, Kerala, India. This implies a physical workspace equipped for engineering teams, likely featuring collaborative spaces, individual workstations, and necessary IT infrastructure.

Workspace Context:

• Collaborative Spaces: The office environment will likely include meeting rooms, huddle spaces, and open areas designed to facilitate brainstorming and teamwork among engineers, product managers, and designers.

• Technology & Tools: Access to high-speed internet, modern workstations, and potentially specialized hardware or software relevant to UI development and testing.

• Team Interaction: Opportunities for spontaneous discussions, pair programming, and team stand-ups, fostering a strong sense of camaraderie and shared purpose. The hybrid model requires proactive communication to ensure effective collaboration between remote and on-site team members.

Work Schedule:

The standard work schedule is full-time (approximately 40 hours per week). The hybrid arrangement allows for flexibility in daily hours, provided core collaboration times are met and project deadlines are achieved. This structure is designed to accommodate individual work preferences while ensuring team alignment and project momentum.

📝 Enhancement Note: The hybrid nature of the role is a key aspect of the work environment. For operations professionals, this means understanding the expectations around office attendance, the types of collaborative tools used to bridge remote and in-office teams, and how work schedules are managed to ensure productivity and team cohesion.

📄 Application & Portfolio Review Process

Interview Process:

1. Initial Screening: A recruiter or hiring manager will review your application and resume to assess alignment with the basic requirements.

2. Technical Phone Screen: A brief interview (30-45 minutes) focusing on core front-end concepts, your experience with Angular, NgRx, RxJS, and responsive design. Expect questions about past projects and how you've handled specific technical challenges.

3. Technical Assessment/Coding Challenge: This could be a take-home assignment or a live coding session. It will likely involve building a small UI feature, refactoring a piece of code, or solving a problem related to state management or responsive design. The focus will be on code quality, efficiency, and adherence to best practices.

4. On-site/Virtual Interview Loop: A series of interviews (typically 3-5 sessions, 45-60 minutes each) with different team members and stakeholders.

• Technical Deep Dive: In-depth discussion on your Angular expertise, refactoring strategies, and performance optimization techniques.
• System Design/Architecture: A session focused on how you would approach designing or improving aspects of the UI architecture, potentially involving whiteboard exercises or scenario-based questions.
• Product/UX Collaboration: An interview with a Product Manager or UX Designer to assess your ability to collaborate, understand user needs, and translate them into technical solutions.
• Behavioral/Situational: Questions about your leadership style, how you handle conflict, mentor others, and your approach to problem-solving and continuous learning.

1. Hiring Manager Final Interview: A discussion to gauge overall fit, confirm expectations, and address any remaining questions.

Portfolio Review Tips:

• Curate Selectively: Choose 2-3 of your strongest projects that best represent your skills in Angular, responsive design, and legacy code refactoring.

• Highlight Impact: For each project, clearly articulate the problem you solved, your specific role, the technologies used, and the quantifiable outcomes or benefits achieved (e.g., performance improvements, user adoption increases, reduced maintenance effort).

• Showcase Process: Demonstrate your thought process. Explain your design decisions, why you chose certain approaches (e.g., NgRx over local state, specific refactoring patterns), and how you overcame challenges.

• Code Samples: Be prepared to walk through relevant code snippets or provide access to a GitHub repository with well-documented examples. Focus on clean, readable, and well-architected code.

• Tailor to the Role: Emphasize aspects of your portfolio that directly align with the job description, such as modern Angular practices, refactoring complex code, and creating responsive UIs.

Challenge Preparation:

• Practice Modern Angular: Be ready to implement features using Signals, standalone components, and zoneless approaches. Understand their benefits and use cases.

• State Management Scenarios: Prepare to demonstrate how you'd manage state in complex scenarios using NgRx and RxJS. Think about actions, reducers, effects, selectors, and observable patterns.

• Responsive Design Implementation: Practice building responsive layouts and components using TailwindCSS and Sass. Understand concepts like mobile-first, media queries, and flexbox/grid.

• Refactoring Strategies: Think about common legacy code issues (e.g., large components, tight coupling, outdated patterns) and how you'd systematically address them.

• Performance Optimization: Be ready to discuss common front-end performance issues (e.g., large bundle sizes, slow rendering, inefficient API calls) and how you'd diagnose and fix them.

📝 Enhancement Note: The interview process is designed to thoroughly assess both technical depth and collaborative capabilities. A strong portfolio that showcases practical application of modern Angular, effective refactoring, and responsive design is critical. Candidates should be prepared to articulate their thought process and demonstrate problem-solving skills through coding challenges and architectural discussions.

🛠 Tools & Technology Stack

Primary Tools:

• Angular (v21+): The core framework for building user interfaces. Expertise in modern Angular features like Signals, standalone components, and zoneless change detection is paramount.

• TypeScript: Essential for developing robust and maintainable front-end applications within the Angular ecosystem.

• NgRx: A reactive state management library for Angular, crucial for managing complex application states.

• RxJS: A library for reactive programming using Observables, integral to NgRx and managing asynchronous operations in Angular.

• TailwindCSS: A utility-first CSS framework for rapidly building custom user interfaces.

• Sass: A CSS preprocessor that enables features like variables, nesting, and mixins to write more organized and efficient CSS.

Analytics & Reporting:

• Browser Developer Tools: For debugging, performance profiling, and inspecting UI elements.

• Performance Monitoring Tools: (e.g., Lighthouse, WebPageTest, or integrated APM tools) for analyzing and optimizing application performance.

• Analytics Platforms: (e.g., Google Analytics, Adobe Analytics, or internal tools) to track user behavior and feature adoption.

CRM & Automation:

• While not directly a CRM/automation role, understanding how front-end applications integrate with backend systems and APIs that might feed into CRMs or automation workflows is beneficial.

• RESTful APIs: Experience interacting with and understanding RESTful APIs for data fetching and manipulation.

• GraphQL: Potential exposure to GraphQL for more efficient data querying.

📝 Enhancement Note: The technology stack is heavily focused on the modern Angular ecosystem and associated tooling. Proficiency in these specific technologies, especially the newer Angular features, is a non-negotiable requirement. Understanding how these front-end tools interact with backend services and data platforms is also important for a lead role.

👥 Team Culture & Values

Operations Values:

• Technical Excellence: A commitment to writing high-quality, maintainable, and performant code, with a strong emphasis on modern Angular best practices.

• Collaboration & Communication: Open and honest communication, active listening, and a willingness to share knowledge and provide constructive feedback across teams (Product, UX, Backend).

• Customer Focus: A dedication to understanding user needs and delivering intuitive, valuable, and reliable user experiences that drive success for construction industry professionals.

• Continuous Improvement: A proactive approach to identifying areas for enhancement, whether in code, processes, or tooling, and a drive to learn and adapt to new technologies.

• Ownership & Accountability: Taking responsibility for features and components from conception through deployment and maintenance, ensuring successful outcomes.

Collaboration Style:

• Cross-functional Integration: Working closely with Product Managers to refine requirements and UX Designers to ensure design fidelity and usability. This involves regular feedback loops and joint problem-solving.

• Agile Teamwork: Participating actively in daily stand-ups, sprint planning, retrospectives, and code reviews to ensure team alignment and continuous iteration.

• Knowledge Sharing: Encouraging an environment where team members openly share insights, learnings, and best practices, potentially through brown bag sessions, internal documentation, or pair programming.

• Constructive Feedback Culture: Providing and receiving feedback in a manner that promotes growth and improvement, focusing on the work and process rather than individuals.

📝 Enhancement Note: The culture emphasizes a blend of technical rigor, collaborative problem-solving, and a user-centric approach. For operations professionals, understanding these values is key to fitting into the team and contributing effectively. The focus on continuous improvement and ownership aligns well with the proactive nature required in operations roles.

⚡ Challenges & Growth Opportunities

Challenges:

• Modernizing Legacy Code: The significant task of refactoring and updating older Angular components and architecture presents a challenge that requires careful planning, robust testing, and strategic execution to avoid introducing regressions.

• Balancing New Features with Technical Debt: Effectively prioritizing the development of new features against the ongoing need to address and reduce technical debt requires strong judgment and stakeholder alignment.

• Cross-team Dependencies: Ensuring seamless integration and communication with backend engineering teams, product management, and UX design, especially in a hybrid work environment, can be complex.

• Keeping Pace with Angular Evolution: Continuously adapting to and implementing the latest advancements in Angular (like Signals and zoneless approaches) while maintaining stability for existing users.

Learning & Development Opportunities:

• Advanced Angular Specialization: Deep dive into cutting-edge Angular features, performance optimization techniques, and architectural patterns.

• UI Architecture and Design: Opportunities to shape the future of Dodge's UI architecture and contribute to design system evolution.

• Mentorship and Technical Leadership: Formal opportunities to mentor junior engineers, lead technical discussions, and influence the team's technical direction.

• Industry Trends: Exposure to AI tools for development and other emerging technologies relevant to front-end engineering.

• Cross-domain Learning: Gaining a deeper understanding of the construction industry's data landscape and how UI development supports business objectives.

📝 Enhancement Note: The primary challenge is the strategic modernization of a substantial codebase. Growth opportunities are geared towards deepening technical expertise, developing leadership skills, and gaining strategic influence within the engineering organization.

💡 Interview Preparation

Strategy Questions:

• "Describe a complex legacy codebase you've worked with. What were the biggest challenges, and what step-by-step process did you follow to refactor and modernize it? What were the outcomes?" (Focus on structured approach, risk mitigation, and measurable improvements).

• "How would you approach integrating new features built with Angular 21 Signals into an existing NgRx-managed application? What are the potential conflicts or considerations?" (Assess understanding of modern Angular patterns and state management integration).

Company & Culture Questions:

• "Based on your understanding of Dodge Construction Network and the construction industry, what opportunities do you see for UI/UX innovation to drive value for your customers?" (Showcase research and industry understanding).

• "How do you contribute to a positive and collaborative team culture, especially in a hybrid work setting?" (Highlight communication, mentorship, and teamwork skills).

Portfolio Presentation Strategy:

• Narrative Arc: Structure your portfolio walk-through with a clear story for each project: the problem, your solution, your specific contributions, the technologies used, and the impact/results.

• Quantify Impact: Use metrics whenever possible. Instead of "improved performance," say "reduced initial load time by 30%." Instead of "made it easier to use," say "decreased task completion time by 15%."

• Technical Depth: Be ready to dive into the code and explain design decisions, trade-offs, and architectural patterns. Explain why you made certain choices.

• Interactive Demonstration: If possible, prepare a brief live demo of a key feature or component from your portfolio.

• Address the Role: Explicitly connect your portfolio examples to the requirements of the Lead UI Software Engineer role, highlighting your experience with Angular 21, NgRx, responsive design, and refactoring.

📝 Enhancement Note: Interview preparation should focus on articulating problem-solving methodologies, demonstrating technical leadership through past experiences, and showcasing a clear understanding of the company's mission and industry. A well-prepared portfolio presentation is key to illustrating practical skills and impact.

📌 Application Steps

To apply for this Lead UI Software Engineer position:

• Submit your application through the provided link (e.g., Workable platform).

• Customize Your Resume: Tailor your resume to highlight your 7-10 years of experience, emphasizing your expertise in Angular, NgRx, RxJS, TailwindCSS, Sass, responsive design, and legacy code refactoring. Use keywords from the job description.

• Prepare Your Portfolio: Curate 2-3 of your strongest projects that showcase modern Angular development, successful refactoring efforts, and responsive UI creation. Be ready to present and discuss them in detail, focusing on impact and your process.

• Practice Technical Concepts: Review core front-end principles, modern Angular features (Signals, standalone components, zoneless), state management with NgRx, and responsive design techniques. Be prepared for live coding or technical assessment challenges.

• Research Dodge Construction Network: Understand their mission, products, and the construction industry context. Prepare thoughtful questions about the role, team, and company challenges.

⚠️ Important Notice: This enhanced job description includes AI-generated insights and operations industry-standard assumptions. All details should be verified directly with the hiring organization before making application decisions.