UI Developer

📍 Job Overview

Job Title: UI Developer

Company: Citi

Location: Amruthahalli, Karnataka, India / Bangalore, Karnataka, India

Job Type: FULL_TIME

Category: Technology / Frontend Development / Data & Analytics

Date Posted: April 15, 2026

Experience Level: Mid-Senior Level (5-10 years)

Remote Status: Hybrid

🚀 Role Summary

• Develop and engineer cutting-edge AI-first user interfaces, including conversational and agentic flows, for the TTS Analytics team.

• Collaborate with AI and software engineers to implement and scale production-grade AI applications, focusing on end-to-end development from data ingestion to user-facing interfaces.

• Drive measurable improvements in developer productivity by shipping production features that leverage Generative AI and deep learning techniques.

• Enhance and maintain the React/TypeScript codebase, focusing on componentization, testing, Storybook integration, and robust architecture patterns.

• Expand evaluation metrics and techniques to streamline the development process for Agentic AI solutions.

📝 Enhancement Note: This role is positioned within Citi's Treasury & Trade Services (TTS) Analytics team, focusing on applying Generative AI and deep learning to drive business outcomes. The UI Developer will be instrumental in translating complex AI capabilities into intuitive and usable interfaces, bridging the gap between advanced AI engineering and business needs. The role demands strong frontend expertise coupled with an understanding of AI/ML concepts and their application in user experience design.

📈 Primary Responsibilities

• Design and engineer AI-first UX, including conversational/agentic flows and rich visualizations, transforming complex AI capabilities into usable and reliable interfaces.

• Ship production features that measurably improve developer productivity and enhance user experience with AI-driven applications.

• Collaborate closely with AI engineers, software engineers, and product partners to effectively leverage the latest Generative AI techniques and best practices.

• Raise the standard of the React/TypeScript codebase through rigorous componentization, comprehensive testing, Storybook utilization, and adherence to modern architecture patterns.

• Expand evaluation metrics and techniques to simplify and accelerate Agentic AI development and deployment.

• Contribute to the design and implementation of end-to-end AI applications, including data ingestion, model services, user-facing interfaces, observability, and secure deployments.

• Identify and implement performance optimizations for frontend applications to ensure a seamless and responsive user experience.

📝 Enhancement Note: The core responsibilities highlight a blend of traditional UI development expertise and a forward-thinking approach to AI-driven user experiences. Emphasis is placed on shipping production-ready features, influencing architecture, and actively contributing to the evolution of AI development processes through UI design and evaluation metrics.

🎓 Skills & Qualifications

Education:

Experience:

Required Skills:

• Strong proficiency in JavaScript, React (or another comparable UI framework), and TypeScript for building well-structured applications.

• Expertise with state management libraries such as Redux, Context API, or Zustand.

• Proven experience with Storybook or similar component-driven development approaches.

• Proficiency in implementing streaming and real-time user experiences (e.g., word/token streaming, live updates, progress/status indicators).

• Demonstrated ability to design intuitive UIs for AI-first experiences, including chat, streaming, and agentic workflows.

• Proven track record of shipping production UI features and influencing frontend architecture decisions.

• Strong understanding of frontend architecture principles, state management patterns, performance optimization techniques, and responsive design.

Preferred Skills:

• Experience with AI/ML frameworks and SDKs such as LangChain, LangGraph, Google ADK (Agent Development Kit), or Vercel AI SDK.

• Familiarity with Next.js, Vite, and internal design systems.

• Experience with CI/CD tools like Jenkins, Tekton, ArgoCD, or Harness.

• Experience developing evaluation metrics specifically for Agentic AI applications.

• Familiarity with AI tools like GitHub Copilot and Cognition.ai's Devin.

📝 Enhancement Note: The requirements emphasize a strong foundation in modern frontend technologies (React, TypeScript) and a critical need for experience with AI-specific UX patterns and tools. The distinction between "Must have" and "Good to have" skills indicates that while core frontend skills are non-negotiable, experience with cutting-edge AI development frameworks and CI/CD tools will significantly differentiate candidates. The 5-8 years of experience requirement suggests a mid-to-senior level role where candidates are expected to lead and innovate.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Showcase at least 2-3 significant projects demonstrating end-to-end UI development, ideally involving complex data visualization or real-time interactive elements.

• Highlight projects where you influenced technical architecture, componentization strategy, or state management patterns.

• Include examples of responsive design and performance optimization techniques implemented in your projects.

Process Documentation:

• Provide examples of how you've documented frontend architecture, state management logic, or component usage for team collaboration.

• Illustrate your approach to state management and how you ensure data integrity and efficient updates in complex applications.

• Detail your experience with testing methodologies (unit, integration, end-to-end) and how they contribute to code quality and stability.

📝 Enhancement Note: For a UI Developer role, especially one involving AI-first experiences, the portfolio should clearly articulate the candidate's ability to translate complex requirements into functional, intuitive, and performant user interfaces. Demonstrating experience with state management, componentization, and real-time interactions is crucial. Projects involving AI or data-intensive applications will be highly valued.

💵 Compensation & Benefits

Salary Range:

Based on industry benchmarks for a UI Developer with 5-8 years of experience in Bangalore, India, the estimated annual salary range is ₹15,00,000 to ₹28,00,000. This range accounts for the specific skills required, including Generative AI familiarity, and the cost of living in Bangalore.

Benefits:

• Comprehensive health insurance (medical, dental, vision) for employees and dependents.

• Retirement savings plans (e.g., Provident Fund contributions).

• Paid time off, including vacation days, sick leave, and public holidays.

• Opportunities for professional development, including training, certifications, and conference attendance.

• Access to employee assistance programs for mental health and well-being support.

• Potential for performance-based bonuses and incentives.

Working Hours:

• Standard full-time employment, typically 40 hours per week.

• The role is hybrid, requiring a balance of remote work and in-office presence as determined by team needs and company policy. Flexibility may be offered based on project demands and team collaboration requirements.

📝 Enhancement Note: The salary estimate is based on current market data for experienced UI Developers in major Indian tech hubs like Bangalore, considering the specialized skills in AI and Generative AI. Citi, as a global financial institution, typically offers a robust benefits package that aligns with industry standards for professional roles.

🎯 Team & Company Context

🏢 Company Culture

Industry: Financial Services / Technology

Company Size: Large Enterprise (over 10,000 employees)

Founded: 1812

Citi is a leading global financial services corporation with a rich history spanning over two centuries. The TTS Analytics team operates at the intersection of finance and cutting-edge technology, leveraging data and AI to drive strategic business decisions within the Treasury & Trade Services sector. This environment fosters innovation, data-driven decision-making, and a commitment to client experience.

Team Structure:

• The TTS Analytics team is a specialized unit focused on deriving actionable insights from complex data.

• The team likely comprises data scientists, AI/ML engineers, data engineers, and UI/UX specialists, working collaboratively.

• Reporting structure involves an AVP/VP leading the team, with the UI Developer reporting to this leadership.

Methodology:

• Data Analysis & Insights: Employing advanced analytical frameworks, AI/ML techniques, and big data tools to extract meaningful insights from large datasets.

• Workflow Planning & Optimization: Translating business problems into analytical models and designing efficient workflows for data processing, AI application development, and UX implementation.

• Automation & Efficiency: Utilizing AI and automation tools to enhance business outcomes, improve client experience, and drive revenue growth.

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

📝 Enhancement Note: Citi's established position in the financial industry combined with its investment in advanced analytics and Generative AI suggests a culture that balances stability and security with innovation and technological advancement. The TTS Analytics team's focus implies a data-centric environment where analytical rigor and business impact are highly valued.

📈 Career & Growth Analysis

Operations Career Level: Data/Information Management Intermediate Analyst (C11). This level typically signifies a professional with a solid foundation and practical experience, capable of independently handling complex tasks and contributing to strategic initiatives. For a UI Developer, this means being a key contributor to product development, influencing technical direction, and mentoring junior team members.

Reporting Structure: The role reports to an AVP/VP leading the TTS Analytics team. This indicates a direct line to leadership with opportunities for visibility and engagement in strategic discussions.

Operations Impact: The UI Developer's work will directly impact the usability and effectiveness of AI-driven tools and platforms used by product, pricing, client experience, and sales functions within TTS. By creating intuitive interfaces for complex AI capabilities, this role will enhance client engagement, drive adoption of new services, and contribute to overall revenue growth and client satisfaction.

Growth Opportunities:

• Operations Skill Advancement: Deepen expertise in Generative AI UX design, AI-first interface development, and advanced frontend architecture. Gain exposure to cutting-edge AI/ML frameworks and tools.

• Leadership Development: Potential to lead UI development initiatives, mentor junior developers, and contribute to architectural decisions within the TTS Analytics team.

• Cross-functional Expertise: Develop a strong understanding of financial services, treasury and trade services, and the application of AI in a regulated industry. Opportunities to collaborate with diverse teams across global business units.

📝 Enhancement Note: The C11 analyst level suggests a role with significant responsibility and potential for growth. The emphasis on AI-first UX and collaboration with AI engineers points towards a career path deeply integrated with emerging technologies within a stable financial institution.

🌐 Work Environment

Office Type: Hybrid work environment. This model combines the benefits of remote work flexibility with the collaborative advantages of in-office presence.

Office Location(s): Amruthahalli, Karnataka, India / Bangalore, Karnataka, India. These locations are in a major technology and business hub in India, offering access to talent and infrastructure.

Workspace Context:

• Collaborative Environment: The hybrid model encourages team cohesion and knowledge sharing through scheduled in-office days, fostering interaction between UI developers, AI engineers, and product partners.

• Tools and Technology: Employees will have access to modern development tools, including potentially AI-assisted coding tools like GitHub Copilot, and robust infrastructure provided by Citi.

• Team Interaction: Opportunities for direct collaboration with AI engineers, data scientists, and business stakeholders to ensure UI solutions effectively meet business needs and leverage AI capabilities.

Work Schedule:

• Full-time, typically 40 hours per week. The hybrid arrangement allows for a structured work week with flexibility to balance personal and professional commitments, while ensuring sufficient time for in-person collaboration and team synchronization.

📝 Enhancement Note: The hybrid nature of the role is typical for technology positions in large organizations, aiming to optimize productivity, collaboration, and employee well-being. The locations in Bangalore suggest a dynamic tech ecosystem.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A recruiter or hiring manager will review applications and resumes for basic qualifications and experience.

• Technical Interview(s): Expect one or more interviews focused on frontend development skills, including deep dives into React, TypeScript, state management, and your approach to building complex UIs. You may be asked to solve coding challenges or discuss architectural patterns.

• AI/ML UX Discussion: Interviews will likely assess your understanding of AI-first UX principles, experience with conversational interfaces, and ability to translate AI capabilities into user-friendly designs. Discussions around LangChain, Vercel AI SDK, or similar technologies may occur.

• Portfolio Presentation: A dedicated session to walk through your portfolio, showcasing key projects, your design process, technical decisions, and the impact of your work. Be prepared to discuss challenges and solutions.

• Behavioral & Cultural Fit Interview: Assess your collaboration style, problem-solving approach, communication skills, and alignment with Citi's values and the team's culture.

• Final Interview: Often with senior leadership (AVP/VP) to discuss strategic alignment and overall suitability for the role.

Portfolio Review Tips:

• Curate Selectively: Choose 3-4 projects that best represent your skills in modern frontend development, AI-first UX, and complex interface design. Prioritize projects that demonstrate impact and technical depth.

• Highlight AI/ML Integration: If you have projects involving AI, ML, or data-intensive applications, emphasize your role in designing the user experience for these complex systems.

• Structure Your Case Studies: For each project, clearly outline the problem, your role, the technologies used, your design/development process, key challenges and solutions, and the measurable outcomes or impact.

• Showcase Componentization: Demonstrate your use of Storybook or component libraries. Explain your approach to building reusable, maintainable UI components.

• Quantify Impact: Whenever possible, use metrics to demonstrate the success of your work (e.g., improved user engagement, reduced load times, increased developer productivity).

Challenge Preparation:

• Coding Challenges: Practice common JavaScript, React, and TypeScript coding problems, focusing on algorithmic thinking, data structures, and efficient code writing.

• System Design: Be prepared to discuss how you would architect a complex UI feature, especially one involving real-time data or AI integrations. Consider state management, API interactions, and performance.

• AI UX Scenarios: Think about how you would design interfaces for AI-powered features, such as chatbots, predictive analytics dashboards, or agentic workflows. Consider user flows, error handling, and feedback mechanisms.

📝 Enhancement Note: The interview process is designed to assess a broad range of skills, from core technical proficiency to specialized AI UX understanding and cultural fit. A strong portfolio that clearly articulates the candidate's contributions and impact is critical for success.

🛠 Tools & Technology Stack

Primary Tools:

• Frontend Frameworks: React (primary), Angular (experience is a plus).

• Programming Languages: TypeScript, JavaScript.

• State Management: Redux, Context API, Zustand, or similar libraries.

• Component Development: Storybook.

• Build Tools: Next.js, Vite.

• AI/ML SDKs (Preferred): LangChain, LangGraph, Google ADK, Vercel AI SDK.

• AI Tools (Access provided): GitHub Copilot, Cognition.ai's Devin.

Analytics & Reporting:

• Experience with data visualization libraries and techniques will be beneficial for presenting insights derived from AI applications.

CRM & Automation:

• While not a direct CRM role, understanding how frontend applications integrate with backend systems and data sources is crucial.

• Experience with CI/CD pipelines (Jenkins, Tekton, ArgoCD, Harness) for automating build, test, and deployment processes.

📝 Enhancement Note: The technology stack is heavily focused on modern frontend development, with a significant emphasis on React and TypeScript. The inclusion of AI-specific SDKs and tools like GitHub Copilot indicates a forward-looking approach, aiming to leverage AI to boost developer productivity and innovation in UI development.

👥 Team Culture & Values

Operations Values:

• Data-Driven Decision Making: Emphasizing the use of data and analytics to inform design choices and measure the impact of UI solutions.

• Innovation & Continuous Learning: Encouraging exploration of new technologies, especially in the AI and Generative AI space, and a commitment to staying updated with industry trends.

• Collaboration & Teamwork: Fostering a supportive environment where team members work together, share knowledge, and contribute to collective success.

• Client Focus: Prioritizing the creation of user-centric interfaces that enhance client experience and drive business value within Treasury & Trade Services.

• Excellence & Quality: Maintaining high standards for code quality, design aesthetics, performance, and reliability in all deliverables.

Collaboration Style:

• Cross-functional Integration: Close collaboration with AI engineers, data scientists, product managers, and business stakeholders to ensure seamless integration of AI capabilities into user-friendly interfaces.

• Process Review & Feedback: An open culture of code reviews, design critiques, and constructive feedback to collectively improve solutions and foster learning.

• Knowledge Sharing: Encouraging the sharing of best practices, new techniques, and insights through internal presentations, documentation, and informal discussions.

📝 Enhancement Note: Citi's core values, combined with the specific focus of the TTS Analytics team, suggest a culture that values technical expertise, strategic thinking, and collaborative problem-solving. The emphasis on AI and data implies a culture of continuous learning and adaptation.

⚡ Challenges & Growth Opportunities

Challenges:

• Bridging AI Complexity with User Simplicity: The primary challenge will be translating sophisticated AI/ML models and agentic workflows into intuitive, accessible, and reliable user interfaces that are easy for business users and developers to interact with.

• Rapidly Evolving AI Landscape: Keeping pace with the fast-evolving field of Generative AI and associated development tools requires continuous learning and adaptation.

• Integration with Legacy Systems: Balancing the implementation of modern frontend technologies and AI features with the need to integrate with existing enterprise systems within a large financial institution.

• Defining and Measuring AI UX Metrics: Establishing robust metrics to evaluate the effectiveness and user experience of AI-first interfaces, moving beyond traditional UI metrics.

Learning & Development Opportunities:

• Specialized AI UX Training: Opportunities to receive training and certifications in AI-driven user experience design, conversational AI interfaces, and agentic system design.

• Exposure to Advanced AI/ML Frameworks: Hands-on experience with cutting-edge tools like LangChain, LangGraph, and Vercel AI SDK, directly contributing to the adoption of new AI technologies.

• Mentorship from AI Experts: Learning directly from AI engineers and data scientists within the TTS Analytics team, gaining deep insights into AI model development and application.

• Career Progression: Potential to move into roles with greater architectural responsibility, lead UI development teams, or specialize further in AI product development.

📝 Enhancement Note: The role presents significant challenges related to the nascent field of AI-first UX, balanced by substantial growth opportunities in a high-demand area within a stable and reputable organization. Continuous learning and adaptability will be key to success.

💡 Interview Preparation

Strategy Questions:

• "Describe a complex AI capability you've helped translate into a user-friendly interface. What were the key challenges, and how did you address them?" (Focus on your process, technical decisions, and impact).

• "How would you approach designing a real-time streaming interface for an AI agent? What state management and UI patterns would you consider?" (Demonstrate your understanding of real-time UX and technical implementation).

Company & Culture Questions:

• "What interests you about working at Citi, specifically within the TTS Analytics team and its focus on Generative AI?" (Research Citi's financial services offerings and the team's mission).

• "How do you approach collaboration with AI engineers and product managers who may have different technical backgrounds?" (Highlight your communication and teamwork skills).

Portfolio Presentation Strategy:

• Start with Impact: Begin each project walkthrough by stating the business problem or objective and the measurable impact of your work.

• Detail Your Role & Process: Clearly articulate your specific contributions, the technologies you used, and your design and development methodology. Use diagrams if helpful.

• Showcase Technical Depth: Explain your architectural decisions, choices in state management, and approach to performance optimization. For AI projects, discuss how you handled data flow and user interaction with AI models.

• Be Ready for Deep Dives: Anticipate questions about specific code snippets, architectural choices, or challenges encountered. Have live demos or interactive prototypes ready if possible.

• Connect to the Role: Conclude by explaining how the skills and experience demonstrated in your portfolio align with the requirements of this specific UI Developer role at Citi.

📝 Enhancement Note: Interview preparation should focus on articulating your experience with both core frontend development and the emerging field of AI-first UX. Demonstrating problem-solving skills, a collaborative mindset, and a data-driven approach will be crucial.

📌 Application Steps

To apply for this UI Developer position:

• Submit your application through the provided link on Citi's careers portal.

• Customize Your Resume: Tailor your resume to highlight experience with React, TypeScript, state management, and any previous work involving AI, machine learning, or complex data visualizations. Quantify achievements where possible.

• Prepare Your Portfolio: Curate 2-3 strong projects that showcase your UI development skills, particularly those involving complex interfaces, real-time features, or AI integration. Ensure each project clearly outlines the problem, your solution, technologies used, and impact.

• Practice Interview Questions: Rehearse answers to common UI development questions, AI UX scenarios, and behavioral questions. Prepare to discuss your portfolio in detail and answer technical deep-dive questions.

• Research Citi and the Team: Understand Citi's business, its commitment to technology and innovation, and the specific goals of the TTS Analytics team. This will help you tailor your responses and demonstrate genuine interest.

⚠️ 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.