UI Engineer

📍 Job Overview

Job Title: UI Engineer

Company: Barclays

Location: Gemini Building A, Prague, Czechia

Job Type: Full time

Category: Technology / Software Engineering / UI Engineering

Date Posted: 2026-08-17

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

Remote Status: On-site

🚀 Role Summary

• Design, develop, and maintain a scalable React-based component library and design system to power next-generation digital experiences.

• Collaborate closely with UX/UI designers to translate design tokens, specifications, and interaction patterns into reusable, production-ready UI components.

• Implement and champion web accessibility standards (WCAG 2.1 AA) and inclusive design principles across all developed components.

• Contribute to the improvement of build pipelines, release processes, and tooling for a versioned component library.

• Actively engage with consuming engineering teams to gather feedback and continuously enhance component APIs and documentation.

📝 Enhancement Note: The "Assistant Vice President Expectations" section, while not directly part of the core UI engineering duties, implies a level of seniority and responsibility that suggests this role may involve leading collaborative assignments, guiding junior team members, and influencing decision-making within the team or project. This aligns with a mid-level to senior individual contributor or a potential lead role, reflected in the implied experience level.

📈 Primary Responsibilities

• Develop and maintain React-based UI components following modern design system principles, ensuring accessibility, performance, and thorough documentation.

• Translate design tokens, specifications, and interaction patterns from designers into reusable, production-ready components that uphold design fidelity.

• Create and improve developer documentation, code examples, and usage guidelines to facilitate efficient adoption of design system components by engineering teams.

• Implement comprehensive testing strategies, including unit tests, visual regression tests, and accessibility audits, to guarantee component quality and reliability.

• Participate actively in code reviews, providing constructive feedback to uphold high standards of code quality within the component library.

• Adhere strictly to accessibility standards (WCAG 2.1 AA) and inclusive design principles, ensuring all components meet accessibility requirements and function with assistive technologies.

• Contribute to build pipelines, release processes, and tooling enhancements that support a scalable, versioned component library.

• Engage with consuming teams to understand their needs, gather feedback, and drive continuous improvement of component APIs and documentation.

📝 Enhancement Note: The responsibilities highlight a strong focus on design systems, component reusability, and accessibility, which are critical for large organizations like Barclays aiming for consistency and efficiency across their digital platforms. The emphasis on collaboration with designers and consuming teams indicates a role that bridges design and development effectively.

🎓 Skills & Qualifications

Education: While not explicitly stated, a Bachelor's degree in Computer Science, Software Engineering, or a related field, or equivalent practical experience, is typically expected for this level of role in a financial institution.

Experience: 5-10 years of professional experience in UI engineering, with a significant focus on building and maintaining component libraries or design systems.

Required Skills:

• Extensive proficiency in React and TypeScript for building complex, dynamic user interfaces.

• Solid understanding of modern CSS, including CSS custom properties, CSS-in-JS solutions, or utility-first frameworks like Tailwind CSS.

• Experience working with design tokens and understanding how design decisions translate into code and component APIs.

• Good understanding of web accessibility standards (WCAG 2.1 AA) and practical experience implementing accessible components with proper ARIA attributes and keyboard navigation.

• Familiarity with component documentation tools such as Storybook, including writing comprehensive stories and usage examples.

• Experience with modern frontend build tools and package management (e.g., Vite, Rollup, npm/pnpm).

• Strong collaboration skills with the ability to work effectively with designers and incorporate feedback into component development.

• Meticulous attention to detail and a commitment to delivering polished, high-quality, and performant components. Preferred Skills:

• Experience with Vue.js or other modern frontend frameworks, demonstrating adaptability across technologies.

• Knowledge of animation libraries and experience implementing smooth micro-interactions.

• Experience with visual regression testing tools (e.g., Chromatic, Percy, or similar).

• Understanding of semantic versioning and library release processes for managing component updates.

• Contributions to open-source projects or personal projects demonstrating frontend expertise and passion.

• Familiarity with monorepo structures and tooling (e.g., Nx, Turborepo, pnpm workspaces).

• Experience with Figma and a strong understanding of designer workflows.

📝 Enhancement Note: The distinction between required and preferred skills suggests that while core React, TypeScript, CSS, and accessibility are non-negotiable, experience with specific tools like Storybook, Vite, and monorepo structures, as well as broader framework knowledge, will significantly strengthen an application. The implied experience level (5-10 years) supports the depth of these required skills.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Showcase of reusable UI components, ideally demonstrating a design system approach or a well-structured component library.

• Examples of implemented accessibility features and adherence to WCAG guidelines within developed components.

• Case studies or examples detailing the process of translating design specifications and design tokens into functional code.

• Demonstration of thorough testing strategies, including unit tests and visual regression tests, for component reliability.

• Clear documentation examples, such as Storybook entries, illustrating component usage, props, and accessibility considerations. Process Documentation:

• Workflow examples demonstrating how you approach component development from initial design to implementation and testing.

• Documentation outlining your process for collaborating with designers and other engineers on component library projects.

• Evidence of contribution to build processes, release management, or tooling improvements for component libraries.

• Examples of how you gather feedback from consuming teams and iterate on component designs and APIs.

📝 Enhancement Note: For a UI Engineer role focused on a design system and component library, a portfolio is crucial. It should not just display finished work but also highlight the process of creation, testing, documentation, and collaboration, demonstrating a systematic approach to building robust and user-friendly UI elements.

💵 Compensation & Benefits

Salary Range:

• Entry Salary: Kč 1,200,000.00 per year

• Upper Salary: Kč 1,683,000.00 per year

This range is based on the provided figures and is typical for a UI Engineer with 5-10 years of experience in Prague, Czechia, considering the financial sector's compensation standards. The final salary will be determined by the candidate's specific experience, skills, and the exact responsibilities of the role.

Benefits:

• Incentive award program.

• Competitive country-specific benefits package.

• Access to Barclays' global employee benefits. Working Hours:

• Standard full-time position, implying approximately 40 hours per week.

• The on-site nature suggests adherence to typical office hours, with potential for some flexibility.

📝 Enhancement Note: The provided salary range is specific and substantial, indicating a competitive offering for a skilled UI Engineer in Prague. The benefits package, while broadly described, is enhanced by the mention of an incentive award, suggesting performance-based compensation opportunities. The base salary is a good indicator of the expected level of expertise and responsibility.

🎯 Team & Company Context

🏢 Company Culture

Industry: Financial Services. Barclays is a global financial services provider, offering personal banking, credit cards, corporate and investment banking, and wealth management services. This context implies a highly regulated environment with a strong emphasis on security, reliability, and compliance.

Company Size: Large Enterprise (Barclays is a global bank with tens of thousands of employees). This means opportunities for diverse career paths, exposure to large-scale systems, and a structured work environment.

Founded: 1836. Barclays has a long and rich history, indicating stability and a deep-rooted presence in the financial industry.

Team Structure:

• The role is within the "Digital Experience Platform" team, suggesting a dedicated group focused on creating foundational elements for Barclays' digital products.

• This team likely comprises UI Engineers, UX/UI Designers, Frontend Architects, and potentially Product Managers or Technical Leads.

• Collaboration is expected across various business divisions and technology departments within Barclays to ensure consistency and adoption of the design system. Methodology:

• Focus on modern engineering methodologies for software development, including Agile practices.

• Emphasis on design system principles, component-based architecture, and reusable code.

• Strong commitment to web accessibility (WCAG 2.1 AA) and inclusive design, reflecting a user-centric approach.

• Adoption of modern frontend tooling and build processes for efficiency and scalability.

Company Website: https://home.barclays/

📝 Enhancement Note: Working within a large, established financial institution like Barclays means operating within a framework that prioritizes stability, security, and compliance. The "Digital Experience Platform" team's focus suggests a forward-thinking approach to modernizing digital interfaces, balancing innovation with the stringent requirements of the banking sector.

📈 Career & Growth Analysis

Operations Career Level: This role is positioned as a mid-level to senior UI Engineer, focusing on the foundational elements of digital experiences. The "Assistant Vice President Expectations" section indicates a level of responsibility that goes beyond junior development, involving influencing decisions, potential team guidance, and contributing to policy.

Reporting Structure: The UI Engineer will likely report to a Lead UI Engineer, Frontend Manager, or a Technical Architect within the Digital Experience Platform team. They will collaborate closely with UX/UI Designers and engineering teams across different business units.

Operations Impact: By building a robust design system and component library, this role has a significant impact on the consistency, quality, and development speed of all digital products and services across Barclays. This directly influences customer experience, operational efficiency, and brand consistency.

Growth Opportunities:

• Specialization: Deepen expertise in UI engineering, design systems, web accessibility, and frontend architecture.

• Leadership: Transition into a Lead UI Engineer role, mentoring junior developers and taking ownership of specific platform areas.

• Cross-functional Movement: Potentially move into roles within specific product development teams, UX/UI design leadership, or frontend architecture.

• Continuous Learning: Opportunities to learn new frameworks, tools, and best practices in the ever-evolving frontend landscape, supported by Barclays' resources.

📝 Enhancement Note: The "Assistant Vice President Expectations" section is key here. It suggests that while this might be an individual contributor role, it's at a level where strategic input, technical leadership within projects, and mentoring are expected, providing a clear path for growth towards more senior or leadership positions within the technology function.

🌐 Work Environment

Office Type: The role is based in the "Gemini Building A, Prague" office, indicating a modern, potentially large-scale corporate office environment typical for major financial institutions.

Office Location(s): Prague, Czechia. This specific location suggests a significant Barclays presence in Central Europe, likely offering a vibrant urban work setting.

Workspace Context:

• Collaborative Environment: The description emphasizes collaboration with designers and other engineering teams, suggesting an open or semi-open office layout designed to facilitate interaction.

• Technology & Tools: Access to modern development tools, hardware, and potentially specialized software for design system development and testing.

• Team Interaction: Opportunities for daily interaction with fellow UI Engineers, designers, and other technical professionals, fostering knowledge sharing and problem-solving.

Work Schedule: As an on-site, full-time role, it will likely adhere to standard business hours (e.g., 9 AM to 5 PM), with potential for some flexibility depending on team and project needs. The emphasis on modern development practices might also allow for flexible working arrangements within the office.

📝 Enhancement Note: Being on-site in a major city like Prague means the UI Engineer will be part of a physical team, benefiting from direct collaboration and the company's established infrastructure. The "Gemini Building A" suggests a dedicated, modern workspace.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: Review of resume and portfolio to assess core skills and experience.

• Technical Interview(s): In-depth discussions covering React, TypeScript, CSS, accessibility, and design system principles. May include live coding challenges or problem-solving exercises.

• Portfolio Review: A dedicated session to walk through selected projects, discussing your approach, challenges, and outcomes. Emphasis will be on the process and impact.

• Behavioral/Cultural Fit Interview: Assessment of collaboration skills, problem-solving approach, and alignment with Barclays' values (Respect, Integrity, Service, Excellence, Stewardship) and Mindset (Empower, Challenge, Drive).

• Final Interview: May involve senior leadership or hiring manager to discuss the role's strategic impact and growth potential.

Portfolio Review Tips:

• Curate Selectively: Choose 3-5 of your strongest projects that best showcase your UI engineering skills, particularly those involving component libraries, design systems, or complex UI development.

• Focus on Process & Impact: For each project, clearly articulate the problem you were solving, your specific role and contributions, the technologies and methodologies used, the challenges you faced, and the measurable outcomes or impact (e.g., improved performance, enhanced accessibility, faster development cycles).

• Highlight Design System Contributions: If you have worked on design systems or component libraries, detail your contributions, how you ensured consistency, and how you collaborated with designers.

• Demonstrate Accessibility: Explicitly showcase how you incorporated accessibility (WCAG 2.1 AA) into your work, providing examples of ARIA attributes, keyboard navigation, and semantic HTML.

• Code Quality: Be prepared to discuss your approach to code quality, testing (unit, visual regression), and documentation. If possible, link to public repositories or provide code snippets.

• Storybook/Documentation: If you have used Storybook or similar tools, highlight how you've documented components for other developers.

Challenge Preparation:

• Technical Deep Dive: Brush up on React hooks, state management, performance optimization, and modern CSS techniques.

• Accessibility Scenarios: Prepare to discuss how you would address common accessibility issues in UI components.

• Design System Thinking: Be ready to discuss the principles of good design systems, how to maintain consistency, and how to manage component evolution.

• Problem-Solving: Practice breaking down complex UI problems into smaller, manageable parts and articulating your thought process clearly.

📝 Enhancement Note: The emphasis on a "Digital Experience Platform" and "component library" means the portfolio review will be highly practical. Candidates should be ready to demonstrate not just what they built, but how they built it, and the value it delivered, particularly in terms of reusability, consistency, and accessibility.

🛠 Tools & Technology Stack

Primary Tools:

• React: The core JavaScript library for building user interfaces.

• TypeScript: For static typing, enhancing code quality and maintainability.

• CSS: Modern CSS techniques (CSS Custom Properties, CSS-in-JS, utility-first frameworks like Tailwind CSS).

• Storybook: For developing, documenting, and testing UI components in isolation.

• Design System Tools: Experience with design tokens and how they translate into code.

Analytics & Reporting:

• While not a primary focus for this role, understanding how UI components impact user behavior metrics is beneficial. Familiarity with analytics tools used for web applications would be a plus. CRM & Automation:

• Not directly applicable to the core UI Engineering function, but understanding how frontend components integrate with backend systems and potentially CRM data flows is advantageous. Other Relevant Tools:

• Build Tools: Vite, Rollup, Webpack.

• Package Managers: npm, pnpm.

• Testing Frameworks: Jest, React Testing Library, Cypress (for end-to-end/visual regression).

• Version Control: Git.

• Collaboration Tools: Jira, Confluence, Slack.

• Design Tools: Figma (understanding designer workflows is highly valued).

• Monorepo Tooling (Preferred): Nx, Turborepo, pnpm workspaces.

📝 Enhancement Note: The technology stack is heavily focused on modern frontend development. Proficiency in React and TypeScript is paramount, with a strong emphasis on tools that support component library development and maintainability, such as Storybook and modern build tools. Familiarity with Figma and monorepo tooling further enhances a candidate's profile.

👥 Team Culture & Values

Operations Values:

• Respect: Valuing diverse perspectives and fostering an inclusive environment where all team members feel heard and appreciated.

• Integrity: Upholding ethical standards in all development practices, code, and communication, especially crucial in a financial institution.

• Service: Dedication to providing high-quality components and support to internal engineering teams, enabling them to build better products for customers.

• Excellence: Striving for the highest standards in code quality, performance, accessibility, and documentation.

• Stewardship: Taking ownership of the design system and component library, ensuring its long-term health, scalability, and alignment with Barclays' strategic goals.

Collaboration Style:

• Cross-functional Integration: Seamless collaboration with UX/UI designers to ensure design fidelity and with backend engineers for integration points.

• Feedback Loops: Openness to constructive feedback from peers, designers, and consuming teams, with a proactive approach to addressing issues and incorporating suggestions.

• Knowledge Sharing: A culture that encourages sharing best practices, new techniques, and learnings through code reviews, documentation, and team discussions.

• Empowerment: Encouraging team members to take ownership of their work, experiment with solutions, and contribute innovative ideas to improve the platform.

📝 Enhancement Note: The Barclays values and mindset (Empower, Challenge, Drive) are core to the company culture. For this role, it translates to building components that are not only functional and beautiful but also reliable and ethical, reflecting the bank's commitment to its customers and stakeholders.

⚡ Challenges & Growth Opportunities

Challenges:

• Maintaining Consistency: Ensuring brand and design consistency across a vast range of digital products developed by different teams.

• Scalability: Building a component library that can scale to accommodate future growth and evolving design trends.

• Adoption: Encouraging and facilitating the adoption of the design system by diverse engineering teams with varying technical expertise.

• Balancing Innovation and Stability: Introducing new features and technologies while maintaining the stability and backward compatibility of a widely used library.

• Accessibility Compliance: Continuously ensuring all components meet and exceed the latest accessibility standards in a complex environment.

Learning & Development Opportunities:

• Skill Advancement: Deepening expertise in React, TypeScript, performance optimization, and advanced CSS techniques.

• Accessibility Mastery: Becoming a go-to expert in web accessibility within the organization.

• Design System Architecture: Learning best practices for designing and architecting scalable, maintainable design systems.

• Tooling & Automation: Exploring and implementing new tools and automation strategies for build, testing, and release processes.

• Mentorship: Opportunities to mentor junior engineers and contribute to leadership development through guidance and technical expertise.

📝 Enhancement Note: The challenges are inherent to building and managing a design system at an enterprise scale. The growth opportunities are directly tied to overcoming these challenges and developing highly sought-after skills in modern frontend development and system architecture.

💡 Interview Preparation

Strategy Questions:

• "Describe your experience building and maintaining a React component library or design system. What were the key challenges, and how did you address them?" (Focus on process, collaboration, and problem-solving).

• "How do you ensure your UI components are accessible according to WCAG 2.1 AA standards? Can you walk me through your process and provide examples?" (Highlight practical application of accessibility principles and ARIA).

• "Imagine a designer provides you with new design tokens and interaction patterns. How would you approach translating these into reusable components within an existing design system?" (Demonstrate understanding of design-to-code workflow and component API design).

• "How do you handle feedback from consuming teams regarding your components? Describe a situation where you had to iterate on a component based on user feedback." (Showcase collaboration and iterative development skills). Company & Culture Questions:

• "What do you know about Barclays' digital presence and its commitment to user experience and accessibility?" (Research Barclays' digital products, design system if public, and accessibility statements).

• "How do you align your work with company values like 'Excellence' and 'Stewardship' when developing UI components?" (Connect your work ethic and quality standards to Barclays' core values).

• "How would you contribute to a collaborative environment within the Digital Experience Platform team and with other engineering departments?" (Emphasize teamwork, communication, and knowledge sharing). Portfolio Presentation Strategy:

• Storytelling Approach: Structure your portfolio walkthrough as a narrative for each project: problem, solution, your role, challenges, and impact/results.

• Quantify Impact: Where possible, use metrics to demonstrate the value of your work (e.g., "reduced development time by X%", "improved Lighthouse scores for accessibility by Y points").

• Live Demo (if applicable): If showcasing interactive components, be prepared for a brief live demonstration.

• Focus on Process: For each project, explain your thought process, design decisions, and how you approached testing and documentation.

• Accessibility Showcase: Clearly point out accessibility features implemented and be ready to explain the rationale behind them.

📝 Enhancement Note: The interview preparation should focus on demonstrating not just technical prowess but also a deep understanding of design systems, accessibility, and collaborative development within a large corporate structure like Barclays. The portfolio is the primary artifact to prove these capabilities.

📌 Application Steps

To apply for this UI Engineer position:

• Submit your application through the provided Workday application link.

• Portfolio Customization: Tailor your resume and portfolio to highlight experience with React, TypeScript, design systems, component libraries, and web accessibility (WCAG 2.1 AA). Ensure your portfolio showcases projects demonstrating these skills with clear explanations of your process and impact.

• Resume Optimization: Integrate relevant keywords such as "React," "TypeScript," "Design System," "Component Library," "Web Accessibility," "WCAG," "Storybook," "Frontend Development," and specific tools mentioned (Vite, Rollup, Figma) into your resume. Quantify achievements where possible.

• Interview Preparation: Practice articulating your experience with the STAR method (Situation, Task, Action, Result) for behavioral questions. Prepare to walk through your portfolio projects, explaining your technical choices, collaborative processes, and the outcomes achieved.

• Company Research: Familiarize yourself with Barclays' digital products, its stated values and mindset, and any public information regarding its design systems or technology initiatives. Understand the context of working within a major financial institution.

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