Senior Front-End Developer, Design Systems

📍 Job Overview

Job Title: Senior Front-End Developer, Design Systems

Company: Bank of New York Mellon (BNY)

Location: New York, NY, United States

Job Type: Full time

Category: Engineering / Technology (Design Systems Focus)

Date Posted: 2026-05-27T15:53:33

Experience Level: 8+ years (Senior/Lead)

Remote Status: On-site

🚀 Role Summary

• Spearhead the architecture, development, and ongoing evolution of BNY's comprehensive design system, ensuring scalability, reusability, and maintainability across all digital products.

• Architect and implement robust, reusable web components that serve as the foundational building blocks for user interfaces, adhering to best practices in front-end development.

• Drive sophisticated theming solutions, leveraging advanced CSS techniques like CSS variables, variable stacking, and complex color systems to support diverse brand identities and user preferences.

• Manage the complete lifecycle of design system components, from initial development and versioning through to production deployment and continuous maintenance, ensuring a stable and efficient development environment.

• Foster cross-functional collaboration with design, product management, and other engineering disciplines to translate design principles into practical, high-quality technical solutions that enhance user experience and development efficiency.

📝 Enhancement Note: While the job title is "Senior Front-End Developer," the emphasis on "Design Systems" and leading their evolution, coupled with the extensive experience requirement, positions this role as a lead or architect within the front-end engineering domain, specifically focused on establishing and governing UI consistency and efficiency. This role is critical for GTM strategy by ensuring a cohesive brand experience across all client-facing applications, which directly impacts customer acquisition and retention.

📈 Primary Responsibilities

• Lead the technical strategy and execution for the design system, defining its architecture, component library, and governance model.

• Develop, test, and deploy high-quality, accessible, and performant web components using modern JavaScript (TypeScript), Angular, and React.

• Implement and refine advanced CSS architectures, including theming capabilities, to support multi-brand environments and dynamic user customization.

• Establish and maintain robust documentation for design system components, guidelines, and best practices, facilitating adoption by product teams.

• Create clear, executable code demonstrations and examples to illustrate component functionality and usage patterns effectively.

• Ensure rigorous version management and dependency tracking for the component library to maintain stability and facilitate seamless updates.

• Champion and enforce front-end development best practices, including accessibility (WCAG standards), performance optimization, and code quality.

• Mentor and provide technical guidance to other front-end developers on design system principles, component implementation, and best practices.

• Collaborate with UX designers to ensure design intent is accurately translated into functional and aesthetically consistent UI components.

• Drive continuous improvement initiatives for the design system, incorporating feedback and emerging technologies to enhance its value and adoption.

📝 Enhancement Note: The responsibilities highlight a strategic leadership role in design system development. This goes beyond typical front-end tasks by including architecture, lifecycle management, and cross-functional influence, indicating a significant impact on the overall product development process and GTM efficiency through consistent UI/UX.

🎓 Skills & Qualifications

Education: While no specific degree is mandated, a Bachelor's degree in Computer Science, Engineering, or a related field, or equivalent practical experience, is strongly implied by the experience level and technical requirements.

Experience: 8+ years of progressive experience as a Front-End Developer, with a substantial and demonstrable focus on building, scaling, and maintaining design systems. Proven experience in leading architectural decisions for component libraries and UI frameworks.

Required Skills:

• Expert-level proficiency in JavaScript (ES6+) and TypeScript, with a deep understanding of modern language features and patterns.

• Deep expertise in at least one, preferably both, modern front-end frameworks: Angular and React.

• Mastery of CSS, including pre-processors (e.g., Sass, Less), advanced styling techniques, CSS variables, variable stacking, and sophisticated color systems.

• Extensive hands-on experience with Web Components and their practical application in building reusable UI elements for large-scale applications.

• Proven track record in scaling design systems, managing complex theming architectures, and ensuring smooth production deployments.

• Strong understanding of version management strategies and library dependency management within a component library context.

• Experience with packaged version control for design system assets (e.g., NPM, Yarn workspaces).

• A strong passion for creating high-quality technical documentation and executable code demonstrations.

• Excellent communication and interpersonal skills, with the ability to articulate complex technical concepts clearly to both technical and non-technical stakeholders.

Preferred Skills:

• Experience within the Financial Services or FinTech industry, understanding the unique demands and compliance requirements.

• Contributions to open-source design systems or component libraries, showcasing community engagement and expertise.

• A keen sense of design aesthetics and a strong understanding of visual design principles.

• Proven experience collaborating effectively with UX designers to bridge the gap between design and development.

• Advanced expertise in interaction design principles and their implementation in front-end components.

• Experience leveraging AI tools and technologies to enhance development workflows or component capabilities.

📝 Enhancement Note: The requirement for "8+ years of experience" and "expert-level proficiency" in core front-end technologies, coupled with a strong emphasis on design systems, positions this as a senior individual contributor or technical lead role. The "Bonus Points" suggest a preference for candidates with domain experience in financial services and a broader interest in AI and open-source contributions, indicating a forward-thinking team.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Showcase of at least two significant design system projects, detailing the problem, proposed solution, technical implementation, and outcomes.

• Demonstrations of complex component development, including examples of reusability, theming capabilities, and state management.

• Evidence of contributions to version control systems (e.g., Git) for component libraries, highlighting branching, merging, and versioning strategies.

• Examples of well-documented components, including usage guidelines, API references, and code snippets.

Process Documentation:

• Examples of technical documentation created for design system components, outlining architecture, usage, and accessibility standards.

• Workflow diagrams or descriptions illustrating the process of component development, review, and deployment within a design system lifecycle.

• Documentation showcasing collaboration with design teams, such as handoff processes, feedback loops, and joint problem-solving.

• Evidence of establishing and maintaining coding standards and best practices for front-end development and design system contribution.

📝 Enhancement Note: For a Senior Front-End Developer role focused on Design Systems, a portfolio is crucial. It needs to go beyond just showcasing finished UIs and instead demonstrate deep technical understanding of component architecture, scalability, theming, and documentation processes. This allows hiring managers to assess the candidate's ability to lead and govern a critical design system.

💵 Compensation & Benefits

Salary Range: $95,000 - $209,000 per year.

📝 Enhancement Note: The provided salary range of $95,000 to $209,000 USD per year for a Senior Front-End Developer in New York, NY, is within industry standards for a major financial hub. This range reflects the significant experience required (8+ years), the senior/lead nature of the role, and the specialized expertise in design systems. BNY Mellon's location in New York City, a high cost-of-living area, supports the upper end of this range for highly experienced candidates. The compensation structure also includes potential discretionary bonuses and incentive packages, which are common in the financial services industry.

Benefits:

• Medical Insurance: Comprehensive health coverage.

• Dental Insurance: Dental care benefits.

• Vision Insurance: Vision care benefits.

• Basic Life Insurance: Core life insurance coverage.

• 401(k) Plan: Retirement savings plan with potential company match.

• Paid Time Off: Generous paid leave.

• Vacation Time: Dedicated time for rest and rejuvenation.

• Sick Time: Paid leave for illness.

• Paid Volunteer Time: Opportunities to contribute to the community.

Working Hours: Approximately 40 hours per week, with flexibility for operations and data analysis needs.

📝 Enhancement Note: The benefits package is standard for a large, established financial institution like BNY Mellon, offering a robust set of protections and long-term financial planning tools. The inclusion of "Paid Volunteer Time" aligns with corporate social responsibility initiatives. The "approximately 40 hours per week" is typical, but the note about flexibility suggests that for a senior role, especially one involving critical system development and maintenance, occasional off-hours work might be expected or accommodated.

🎯 Team & Company Context

🏢 Company Culture

Industry: Financial Services / FinTech. BNY Mellon is a leading global investment company at the heart of the financial system, influencing a significant portion of the world's investible assets. This context means a focus on security, compliance, stability, and innovation within a highly regulated environment.

Company Size: Large enterprise (BNY Mellon is a Fortune 500 company with tens of thousands of employees globally). This implies a structured environment with established processes, extensive resources, and opportunities for career growth across various departments and geographies.

Founded: BNY Mellon was formed in 2007 through the merger of Bank of New York (founded 1784) and Mellon Financial Corporation (founded 1869), giving it a deep historical foundation combined with modern financial services capabilities.

Team Structure:

• The role likely sits within a larger Engineering or Technology division, potentially part of a Product Engineering group or a dedicated Design Systems team.

• This team would collaborate closely with Product Management, UX Design, and other engineering teams across various business units.

Methodology:

• Data-Driven Design: Emphasis on using data to inform design decisions and component development, ensuring solutions are user-centric and meet business objectives.

• Agile Development: Likely utilizing Agile methodologies (Scrum, Kanban) for iterative development, continuous feedback, and rapid deployment.

• Process Optimization: A strong focus on improving development workflows, component reusability, and overall efficiency through the design system.

• Collaboration & Documentation: A culture that values clear communication, knowledge sharing, and comprehensive documentation to ensure consistency and adoption.

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

📝 Enhancement Note: BNY Mellon's heritage and scale suggest a culture that balances stability and tradition with a drive for innovation, particularly in leveraging advanced technologies like AI. The "LifeAtBNY" branding emphasizes a forward-looking, collaborative environment focused on transforming the future of finance.

📈 Career & Growth Analysis

Operations Career Level: This role is at a Senior/Lead level within Front-End Engineering, with a specialization in Design Systems. It implies significant technical leadership, architectural input, and mentorship responsibilities. Candidates are expected to drive best practices and influence technical direction within their domain.

Reporting Structure: The Senior Front-End Developer will likely report to a Manager or Director of Engineering/Product Development. They will work cross-functionally with designers, product managers, and other engineering teams, acting as a subject matter expert for the design system.

Operations Impact: The design system directly impacts the efficiency and consistency of Go-To-Market (GTM) efforts by:

• Accelerating Development: Providing pre-built, tested components significantly speeds up the development of new features and products, enabling faster time-to-market.

• Ensuring Brand Consistency: Maintaining a unified visual identity and user experience across all client touchpoints, which is critical for brand trust and recognition in the financial sector.

• Improving User Experience: Delivering intuitive, accessible, and performant interfaces that enhance customer satisfaction and engagement.

• Reducing Technical Debt: Promoting standardization and best practices, leading to more maintainable and scalable codebases.

Growth Opportunities:

• Technical Leadership: Transition into an Architect role, leading the strategic vision for design systems and front-end architecture across BNY Mellon.

• Management Track: Move into an Engineering Management role, leading teams of front-end developers and overseeing project delivery.

• Specialization Deepening: Become a recognized expert in specific areas like accessibility, front-end performance, or advanced component architecture.

• Cross-Functional Mobility: Opportunities to move into product management, program management, or other technology leadership roles within BNY Mellon.

• Mentorship & Training: Lead internal training sessions, workshops, and mentorship programs for junior developers.

📝 Enhancement Note: The role offers significant potential for career advancement, moving beyond individual contribution to leadership and strategic influence, particularly within the critical area of GTM enablement through a robust design system.

🌐 Work Environment

Office Type: This is an on-site role in New York City, indicating a traditional office environment within a major corporate campus or office building. It suggests a structured workday with opportunities for in-person collaboration.

Office Location(s): New York, NY. This location offers access to a vibrant tech and finance ecosystem, with excellent public transportation links.

Workspace Context:

• Collaborative Spaces: The office environment likely includes meeting rooms, breakout areas, and potentially open-plan seating designed to foster collaboration among team members.

• Technology Access: Access to standard corporate IT infrastructure, high-speed internet, and potentially specialized hardware or software for development.

• Team Interaction: Opportunities for face-to-face interactions with designers, product managers, and fellow engineers, facilitating quick problem-solving and knowledge sharing.

• Professional Atmosphere: A corporate setting typical of a large financial institution, emphasizing professionalism and adherence to company standards.

Work Schedule: Standard business hours (approximately 40 hours per week), with potential for some flexibility to accommodate project deadlines or critical system updates.

📝 Enhancement Note: The on-site requirement in New York City suggests a preference for in-person collaboration, which is often beneficial for complex design system work involving close interaction with designers and other engineers.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A recruiter or HR representative will conduct an initial review of your application and conduct a brief phone screen to assess basic qualifications and cultural fit.

• Technical Interview (Phone/Video): Expect one or more technical interviews focusing on core JavaScript, TypeScript, framework knowledge (Angular/React), CSS expertise, and design system principles. This may involve live coding exercises or in-depth discussions about past projects.

• Design System Deep Dive: A dedicated interview focusing specifically on your experience with design systems. This will likely involve discussing your portfolio, architectural decisions, challenges faced, and how you've managed component lifecycles and theming.

• System Design / Architecture Interview: A session where you might be asked to design a scalable component library, outline a theming strategy for a complex application, or solve a hypothetical design system problem.

• Behavioral / Cultural Fit Interview: Interviews with potential team members and hiring managers to assess your collaboration style, problem-solving approach, leadership potential, and alignment with BNY Mellon's culture and values.

• Final Interview: Potentially with a senior leader to discuss overall fit, career aspirations, and impact.

Portfolio Review Tips:

• Curate Strategically: Select 2-3 of your most impactful design system projects. Prioritize those that demonstrate complex problem-solving, significant impact, and a strong understanding of the required skills.

• Focus on Process & Impact: For each project, clearly articulate the problem statement, your role, the technical approach, the challenges encountered, and the quantifiable results (e.g., development time saved, consistency improvements, adoption rates).

• Showcase Technical Depth: Highlight your expertise in JavaScript/TypeScript, modern frameworks, advanced CSS, and Web Components. Include code snippets or links to repositories if possible, but focus on explaining the why behind your technical decisions.

• Demonstrate Theming & Scalability: Specifically address how you've handled theming, responsiveness, and scaling the design system to accommodate growth and diverse needs.

• Highlight Documentation: Show examples of clear, comprehensive documentation that guides developers and designers effectively.

• Prepare a Walkthrough: Be ready to present your portfolio and walk interviewers through your projects, answering detailed questions about your contributions and thought process.

Challenge Preparation:

• Live Coding: Practice solving common front-end challenges, focusing on clean, efficient, and well-structured code. Be prepared to explain your thought process aloud.

• System Design: Review common system design patterns for scalable libraries, component architectures, and theming strategies. Think about how you would approach building a design system from scratch or evolving an existing one.

• Problem-Solving Scenarios: Prepare for hypothetical scenarios related to design system adoption, component conflicts, or performance issues. Focus on a structured problem-solving approach: understand the problem, brainstorm solutions, evaluate trade-offs, and propose a plan.

📝 Enhancement Note: The interview process is typical for a senior technical role at a large enterprise. The emphasis on portfolio review and system design for a design systems role is critical. Candidates should be prepared to demonstrate not just coding ability but also architectural thinking and strategic understanding of how design systems drive business value.

🛠 Tools & Technology Stack

Primary Tools:

• JavaScript/TypeScript: Expert proficiency required for core development.

• Angular & React: Deep expertise in at least one, familiarity with both is highly advantageous.

• CSS Pre-processors: Sass, Less, or similar.

• Web Components: Core technology for building reusable elements.

• CSS Variables & Advanced Styling: Essential for theming and dynamic styling.

• Version Control: Git (e.g., GitHub, GitLab, Bitbucket) for code management.

• Package Managers: NPM, Yarn for dependency management.

• Build Tools: Webpack, Vite, or similar for module bundling and optimization.

Analytics & Reporting:

CRM & Automation:

• Not directly applicable to this front-end role, but understanding how design systems integrate with broader application architectures and potentially CRM-driven UI elements could be beneficial.

📝 Enhancement Note: The technology stack is modern and robust, reflecting best practices in front-end development and design system architecture. Proficiency in both Angular and React is a significant plus, suggesting a need for flexibility within the organization's front-end landscape.

👥 Team Culture & Values

Operations Values:

• Innovation & Transformation: A drive to leverage cutting-edge technology (like AI) and innovative solutions to redefine finance.

• Collaboration: Strong emphasis on working together across teams, disciplines, and geographies to achieve shared goals.

• Client Focus: Dedication to understanding and serving client needs, driving transformative solutions that benefit them.

• Integrity & Trust: Operating with the highest ethical standards, crucial for a financial institution.

• Excellence & Performance: A commitment to high standards, continuous improvement, and achieving impactful results.

• Efficiency & Scalability: A focus on building robust, maintainable, and scalable systems that support BNY Mellon's global operations.

Collaboration Style:

• Cross-Functional Integration: Expect close collaboration with designers, product managers, and other engineering teams, requiring strong communication and negotiation skills.

• Open Dialogue: A culture that encourages constructive feedback and open discussion to refine designs and solutions.

• Knowledge Sharing: Active participation in code reviews, documentation efforts, and potentially internal tech talks or guilds to share expertise.

• Team-Oriented Problem Solving: Approaching challenges collectively, leveraging the diverse skills and perspectives of the team.

📝 Enhancement Note: BNY Mellon's stated values and culture emphasize innovation within a stable, client-focused financial framework. For this role, it means balancing cutting-edge front-end practices with the rigorous demands of the financial industry, such as security and compliance.

⚡ Challenges & Growth Opportunities

Challenges:

• Adoption & Governance: Ensuring widespread adoption of the design system across diverse product teams and maintaining consistent governance over time.

• Complexity of Theming: Managing intricate theming requirements for a large enterprise with multiple brands and user customization needs.

• Balancing Innovation with Stability: Integrating new technologies and component patterns while ensuring the stability and backward compatibility of the existing system.

• Cross-Team Dependencies: Navigating complex dependencies and communication channels across numerous engineering and product teams.

• Keeping Pace with Evolving Frameworks: Continuously updating and adapting the design system as front-end frameworks and best practices evolve.

Learning & Development Opportunities:

• Advanced Design System Architecture: Deepen expertise in scalable design system patterns, component architecture, and governance models.

• Emerging Front-End Technologies: Stay at the forefront of front-end development by exploring and integrating new JavaScript features, framework updates, and tooling.

• AI in Development: Explore how AI can be leveraged to enhance design system creation, documentation, or performance analysis.

• Leadership & Mentorship: Develop skills in technical leadership, team mentorship, and influencing stakeholders across the organization.

• Financial Services Domain Expertise: Gain a deeper understanding of the unique technical and regulatory landscape of the financial industry.

📝 Enhancement Note: This role presents significant opportunities to tackle complex, enterprise-scale challenges in design systems, offering substantial professional growth and the chance to shape the user experience for a global financial leader.

💡 Interview Preparation

Strategy Questions:

• "Describe a complex theming architecture you've implemented for a design system. What were the key challenges and how did you overcome them?" (Focus on CSS variables, theming strategies, and handling multiple brands.)

• "How would you approach building a new set of core components for a design system from scratch? Walk me through your process from initial concept to production deployment." (Highlight your understanding of component lifecycle, testing, documentation, and versioning.)

• "Imagine a product team is resistant to adopting the design system. How would you address their concerns and encourage adoption?" (Focus on communication, demonstrating value, providing support, and addressing specific pain points.)

Company & Culture Questions:

• "Based on your understanding of BNY Mellon, how would you tailor your design system approach to fit the needs of a large financial institution?" (Research BNY's values, industry, and potential focus areas like security or compliance.)

• "How do you typically collaborate with UX designers? Describe a time you had a disagreement about a design and how you resolved it." (Emphasize partnership, constructive feedback, and finding common ground.)

Portfolio Presentation Strategy:

• Structure Your Narrative: For each project, use a clear STAR (Situation, Task, Action, Result) or similar framework. Clearly define the problem, your specific role and responsibilities, the actions you took, and the measurable outcomes.

• Technical Deep Dive: Be prepared to explain the why behind your technical choices. Discuss trade-offs, architectural decisions, and how you ensured scalability, maintainability, and performance.

• Focus on Design System Principles: Emphasize how your work aligns with core design system concepts: reusability, consistency, accessibility, and documentation.

• Showcase Theming & Customization: Specifically highlight any examples of advanced theming, variable usage, or how your components support diverse branding or user preferences.

• Engage and Explain: Don't just present; engage your audience. Be ready to answer in-depth questions about your code, architecture, and decision-making process.

📝 Enhancement Note: Preparing for these types of questions requires not only technical knowledge but also the ability to articulate strategy, demonstrate leadership, and connect technical work to business objectives, especially within the context of a large, established financial organization.

📌 Application Steps

To apply for this Senior Front-End Developer, Design Systems position at BNY Mellon:

• Submit your application through the provided Oracle Cloud portal link.

• Customize Your Resume: Tailor your resume to highlight your 8+ years of front-end experience, with a strong emphasis on design systems, component libraries, and the required technologies (JavaScript, TypeScript, Angular, React, CSS). Quantify your achievements whenever possible (e.g., "Reduced development time by X%," "Increased component adoption by Y%").

• Prepare Your Portfolio: Curate a portfolio that prominently features your design system projects. Focus on demonstrating your expertise in architecture, component development, theming, documentation, and collaboration. Ensure it's easily accessible and clearly showcases your contributions and impact.

• Practice Your Presentation: Rehearse walking through your portfolio projects, focusing on clear explanations of technical decisions, challenges, and outcomes. Be ready to articulate your understanding of design system principles and their application.

• Research BNY Mellon: Familiarize yourself with BNY Mellon's company mission, values, recent news (especially regarding technology and innovation), and the financial services industry. Understand the importance of stability, security, and client focus in their operations.

• Prepare for Technical & Behavioral Questions: Review common interview questions related to JavaScript, frameworks, CSS, web components, design systems, and system design. Prepare examples that showcase your problem-solving skills, collaboration abilities, and leadership potential.

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