Senior Front-End Engineer - Global Design System

As Senior Front-End Engineer - Global Design System at Manulife, your primary responsibility is translating design specifications into functional, reusable react based components. You will be responsible for coding, maintaining, documenting and driving adoption of components that serves multiple business units across North America and Asia. This system will enable consistency, efficiency, accessibility, and innovation across Manulife’s public, secure, and mobile digital experiences. You will partner closely with engineering, design, and product teams across regions to build components to their requirements, and evolve the system to meet diverse business and customer needs.

As part of Manulife’s Technology organization, this role is within a cross-functional team supporting enterprise digital transformation. The ideal candidate has a front-end, react-based technical acuity and has worked in software development on an enterprise-wide design system and understands the organizational, technical and cultural complexities of embedding a design system into the fabric of a global enterprise.

Responsibilities:

Global Design System Front-End Development

• Building and maintaining reusable UI components, ensuring consistency across applications in our enterprise-grade design system that supports Manulife’s digital transformation across all regions
• Collaboration with designers and other developers to define and implement design system specifications
• Contribute to the overall software development cycle for Manulife’s Global Design System React component library, including mobile apps, web, CMS
• Maintain the design system's code, documentation, and tokens, including updating components, adding new ones, and addressing bugs
• Balance global standardization with regional flexibility, ensuring usability across diverse markets and regulatory landscapes
• Ensure all components and the overall design system adhere to accessibility standards (e.g., WCAG)

Governance, Adoption & Documentation

• Apply best practices to your code and ensure components adhere to the highest quality standards through code and design reviews to ensure system sustainability
• Ensure alignment to the pre-defined technical architecture and delivery by supporting, coaching, and mentoring cross-discipline teams
• Support the team and oversee training, onboarding, and community engagement initiatives to drive system adoption across teams
• Develop and track KPIs that measure adoption, efficiency gains, and business impact
• Maintain comprehensive documentation for the design system, including usage guidelines, code examples, and API references.

Technical & Operational Execution

• Utilize tooling like Github, documentation site, and workflows, ensuring seamless integration with enterprise platforms (Figma, React, Angular, etc)
• Work closely with design leadership to ensure design-to-code consistency, accessibility compliance (WCAG), and performance optimization
• Identify and support external partnerships and vendors as needed to support system expansion

• Stay abreast of industry trends and emerging technologies, providing strategic guidance on their integration for business advantage
• Ensure the design system and its components are performant and efficient

Required Qualifications:

• 7+ years of industry experience in technology, preferably within a global enterprise or multi-jurisdictional organization.
• High-degree of experience in React JS and working with Design Systems
• Hands-on experience delivering front-end solutions
• Practical experience with Responsive Design and Single Page Application development using best practices and modern frameworks such as React and Angular
• 5+ years experience using React with Javascript and/or Typescript
• Demonstrated use of modern CSS and HTML practices to build performant and accessible web experiences
• Experience with web accessibility compliance, performance, and cross-device support
• Understanding of modern front-end build tooling (Rollup, ESlint, etc.)

Preferred Qualifications:

• Experience with alternative JS frameworks (Angular, Vue) a plus
• Strong expertise in Agile, Lean UX, and enterprise digital delivery models
• Experience navigating multi-lingual, multi-cultural, and regulatory complexities in global design and technology

When you join our team:

• We’ll empower you to learn and grow the career you want.

• We’ll recognize and support you in a flexible environment where well-being and inclusion are more than just words.

• As part of our global team, we’ll support you in shaping the future you want to see.

#LI-Hybrid

About Manulife and John Hancock

Manulife Financial Corporation is a leading international financial services provider, helping people make their decisions easier and lives better. To learn more about us, visit https://www.manulife.com/en/about/our-story.html.

Manulife is an Equal Opportunity Employer

At Manulife/John Hancock, we embrace our diversity. We strive to attract, develop and retain a workforce that is as diverse as the customers we serve and to foster an inclusive work environment that embraces the strength of cultures and individuals. We are committed to fair recruitment, retention, advancement and compensation, and we administer all of our practices and programs without discrimination on the basis of race, ancestry, place of origin, colour, ethnic origin, citizenship, religion or religious beliefs, creed, sex (including pregnancy and pregnancy-related conditions), sexual orientation, genetic characteristics, veteran status, gender identity, gender expression, age, marital status, family status, disability, or any other ground protected by applicable law.

It is our priority to remove barriers to provide equal access to employment. A Human Resources representative will work with applicants who request a reasonable accommodation during the application process. All information shared during the accommodation request process will be stored and used in a manner that is consistent with applicable laws and Manulife/John Hancock policies. To request a reasonable accommodation in the application process, contact [email protected].

Referenced Salary Location

Salary range is expected to be between

If you are applying for this role outside of the primary location, please contact [email protected] for the salary range for your location. The actual salary will vary depending on local market conditions, geography and relevant job-related factors such as knowledge, skills, qualifications, experience, and education/training. Employees also have the opportunity to participate in incentive programs and earn incentive compensation tied to business and individual performance.

Manulife offers eligible employees a wide array of customizable benefits, including health, dental, mental health, vision, short- and long-term disability, life and AD&D insurance coverage, adoption/surrogacy and wellness benefits, and employee/family assistance plans. We also offer eligible employees various retirement savings plans (including pension and a global share ownership plan with employer matching contributions) and financial education and counseling resources. Our generous paid time off program in Canada includes holidays, vacation, personal, and sick days, and we offer the full range of statutory leaves of absence. If you are applying for this role in the U.S., please contact [email protected] for more information about U.S.-specific paid time off provisions.