UI Engineer

📍 Job Overview

Job Title: UI Engineer

Company: Barclays

Location: Gemini Building A, Prague, Czechia

Job Type: FULL_TIME

Category: Frontend Engineering / UI Development

Date Posted: 2026-05-11

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

Remote Status: On-site

🚀 Role Summary

• Design, develop, and maintain a high-quality, accessible React-based component library and design system that powers Barclays' next-generation digital experiences.

• Translate design tokens, specifications, and interaction patterns into reusable, production-ready UI components, ensuring design fidelity and adherence to modern design system principles.

• Implement comprehensive testing strategies, including unit, visual regression, and accessibility audits, to guarantee component quality and reliability across various assistive technologies.

• Collaborate closely with UX/UI designers, senior engineers, and product teams to gather feedback, understand user needs, and continuously improve component APIs and documentation.

• Contribute to the evolution of build pipelines, release processes, and tooling to support a scalable, versioned component library that impacts teams across the organization.

📝 Enhancement Note: The role is specifically focused on building a foundational component library and design system, indicating a strategic importance for standardizing UI development across Barclays. The emphasis on "next-generation digital experiences" suggests this is a forward-looking initiative. The "Assistant Vice President Expectations" section points towards a role that requires not only technical expertise but also leadership potential, influencing decision-making, and potentially mentoring junior engineers.

📈 Primary Responsibilities

• Develop and maintain reusable, accessible React components adhering to modern design system principles, ensuring high performance and thorough documentation.

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

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

• Implement robust testing strategies, including unit tests, visual regression tests, and accessibility audits (WCAG 2.1 AA), to ensure component quality and reliability.

• Actively participate in code reviews, providing constructive feedback to uphold high standards of code quality across the component library.

• Ensure all developed components meet accessibility standards (WCAG 2.1 AA) and inclusive design principles, functioning correctly across assistive technologies.

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

• Engage with consuming teams to understand their requirements, gather feedback, and iteratively enhance component APIs and documentation.

• Advise and influence decision-making within the team and potentially across other business divisions regarding UI development standards and best practices.

• Lead collaborative assignments and guide team members on structured tasks, identifying opportunities for cross-functional methodology integration.

📝 Enhancement Note: The responsibilities highlight a blend of individual contribution and potential leadership. The emphasis on "developer documentation," "usage guidelines," and "engaging with consuming teams" points to a role that requires strong communication and enablement skills, crucial for a design system's success. The mention of "Assistant Vice President Expectations" suggests that candidates should be prepared to demonstrate strategic thinking and influence beyond just coding.

🎓 Skills & Qualifications

Education: While not explicitly stated, a Bachelor's degree in Computer Science, Software Engineering, or a related field is typically expected for roles at this level, particularly within a large financial institution like Barclays. Equivalent practical experience will also be considered.

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

Required Skills:

• Strong proficiency in React.js and TypeScript for building complex, reusable UI components.

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

• Experience working with design tokens and translating design specifications into functional UI elements.

• Solid understanding of web accessibility standards (WCAG 2.1 AA) and practical experience implementing accessible components using ARIA attributes and ensuring keyboard navigation.

• Familiarity with component documentation tools, specifically Storybook (writing stories, usage examples).

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

• Excellent collaboration and communication skills, with a proven ability to work effectively with designers and product teams.

Preferred Skills:

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

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

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

• Understanding of semantic versioning and component library release processes.

• Contributions to open-source projects or personal projects showcasing frontend expertise.

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

• Experience with Figma and an understanding of designer workflows.

📝 Enhancement Note: The required skills are very specific to UI development within a component library context. The preferred skills suggest that Barclays values candidates who are not only proficient in their core stack but also adaptable, curious, and engaged with the broader frontend ecosystem. The "Assistant Vice President Expectations" also imply a need for strong analytical and problem-solving skills, as well as the ability to influence and lead.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Component Library Showcase: Demonstrate experience building and maintaining a comprehensive component library. This should include examples of React components, their variations, and how they are organized and versioned.

• Design System Implementation: Provide case studies or examples of how you've translated design systems (including design tokens and style guides) into functional UI code. Highlight scalability and consistency.

• Accessibility Focus: Showcase projects where accessibility (WCAG 2.1 AA) was a primary concern. Include examples of accessible component implementation and any audits performed.

• Documentation Examples: Present samples of developer documentation for UI components, such as Storybook stories, usage guides, and API documentation, demonstrating clarity and completeness.

• Testing Methodologies: Include examples of unit tests, visual regression tests, and potentially accessibility test implementations for your components.

Process Documentation:

• Workflow Design & Optimization: Detail your process for designing new components, from understanding requirements to final implementation. Highlight how you optimize workflows for efficiency and reusability.

• Implementation & Automation: Describe your approach to implementing components within a larger project or library, including any automation used for testing, building, or documentation.

• Measurement & Analysis: Explain how you measure the success and impact of your UI components and the design system, including metrics for adoption, performance, and accessibility.

📝 Enhancement Note: For a UI Engineer role focused on a design system, a strong portfolio is critical. Candidates should be prepared to showcase not just finished products but also their process – how they approach design, development, testing, and documentation. Demonstrating an understanding of design systems as a strategic product, not just a collection of components, will be key.

💵 Compensation & Benefits

Salary Range: Based on the mid-level to senior experience requirement (5-10 years), location in Prague, Czechia, and the specialized nature of UI/Frontend Engineering within a major financial institution, a competitive salary range can be estimated. For a UI Engineer with this experience level in Prague, the estimated gross annual salary would likely fall between 1,000,000 CZK to 1,800,000 CZK. This range accounts for the technical expertise, potential leadership responsibilities (Assistant Vice President Expectations), and the industry.

Benefits: While specific benefits are not detailed, typical offerings for a role at Barclays in Prague may include:

• Comprehensive health insurance package.

• Life insurance and disability coverage.

• Generous paid time off (vacation, personal days, public holidays).

• Pension scheme contributions.

• Opportunities for professional development, training, and certifications.

• Employee assistance programs.

• Potential for performance-based bonuses.

• Access to corporate discounts and wellness programs.

• Modern office facilities in Prague.

Working Hours: The standard full-time working hours are typically 40 hours per week. While the role is on-site, there may be some flexibility in start and end times, subject to team coordination and project needs. Adherence to project deadlines and participation in critical team meetings will be expected.

📝 Enhancement Note: Salary estimation is based on publicly available data for mid-to-senior frontend engineers in Prague, adjusted for the financial sector and the specific responsibilities outlined. The "Assistant Vice President Expectations" suggest a salary that reflects leadership and strategic contribution potential. Benefits are inferred based on standard corporate offerings for large international companies in the tech and finance sectors.

🎯 Team & Company Context

🏢 Company Culture

Industry: Financial Services (Banking). Barclays is a global financial services provider engaged in retail banking, investment banking, corporate banking, and wealth management. This context means a strong emphasis on security, compliance, reliability, and robust technology solutions.

Company Size: Large Enterprise. Barclays is a multinational corporation with tens of thousands of employees globally, indicating a complex organizational structure, established processes, and significant resources.

Founded: 1690. With a long history, Barclays has a deep-rooted culture that likely balances tradition with modern innovation, particularly in its technology divisions.

Team Structure:

• Digital Experience Platform Team: This specialized team is responsible for building and maintaining the core UI component library and design system.

• Reporting Structure: The role is likely part of a broader engineering or technology department. The "Assistant Vice President Expectations" suggest the role could report to an AVP or a higher-level manager, with potential to lead a small team or technical initiatives.

• Cross-functional Collaboration: Expect close collaboration with UI/UX designers, product managers, backend engineers, QA testers, and potentially other engineering teams consuming the design system.

Methodology:

• Data Analysis & Insights: While primarily a UI role, data from component usage, performance metrics, and accessibility audits will inform development decisions.

• Workflow Planning & Optimization: Focus on designing efficient processes for component development, documentation, and adoption.

• Automation & Efficiency: Utilization of tools and practices to automate testing, building, and deployment of the component library.

Company Website: https://home.barclays/

📝 Enhancement Note: The financial services industry heavily influences the culture, prioritizing security, compliance, and stability. For a UI Engineer, this means a rigorous approach to development, testing, and documentation, with a strong focus on accessibility and reliability. The "Assistant Vice President Expectations" suggest a culture that values leadership, strategic contribution, and continuous improvement.

📈 Career & Growth Analysis

Operations Career Level: Mid-Level to Senior Frontend Engineer. This role requires significant experience in UI development, particularly with React and design systems. The "Assistant Vice President Expectations" indicate a progression beyond pure individual contribution, moving towards influencing technical direction, mentoring, and potentially team leadership.

Reporting Structure: Likely reports to an Engineering Manager or an Assistant Vice President within the Digital Experience Platform team. May involve guiding or mentoring junior engineers on specific projects or component development.

Operations Impact: As a core member of the Digital Experience Platform team, this role has a significant impact on the user experience across all of Barclays' digital products. By building a robust, accessible, and efficient design system, this engineer enables faster development cycles, ensures brand consistency, and improves the overall quality and accessibility of customer-facing applications.

Growth Opportunities:

• Technical Specialization: Deepen expertise in advanced React patterns, state management, performance optimization, and accessibility best practices.

• Design System Leadership: Grow into a lead role within the Digital Experience Platform team, taking ownership of the design system's roadmap and strategic direction.

• Mentorship & Team Leadership: Develop leadership skills by mentoring junior engineers, conducting code reviews, and potentially leading small project teams.

• Cross-functional Expertise: Gain broader understanding of the financial services domain, product management, and other engineering disciplines through collaboration.

• Architectural Influence: Contribute to architectural decisions regarding frontend technology stacks and component library evolution.

📝 Enhancement Note: The "Assistant Vice President Expectations" are key here, suggesting that this role is a stepping stone for individuals looking to move into more influential or leadership positions within engineering, even if not directly managing people initially. The growth opportunities should reflect this dual path of technical deepening and leadership development.

🌐 Work Environment

Office Type: Corporate Office Environment. The role is based in the Gemini Building A in Prague, Czechia, indicating a professional, modern office setting typical of large financial institutions.

Office Location(s): Gemini Building A, Prague, Czechia. This is a specific, established office location.

Workspace Context:

• Collaborative Environment: The emphasis on collaboration with designers, product teams, and other engineers suggests a dynamic workspace that encourages interaction and knowledge sharing.

• Tools & Technology: Access to modern development tools, high-performance workstations, and robust network infrastructure is expected.

• Team Interaction: Opportunities for regular team meetings, design reviews, knowledge-sharing sessions, and hands-on collaborative coding. The on-site nature facilitates spontaneous discussions and problem-solving.

Work Schedule: The standard 40-hour work week is on-site. While core hours likely exist for team synchronization, there may be some flexibility in daily start/end times. The focus will be on delivering high-quality work and meeting project milestones, with a commitment to accessibility and thoroughness expected in all tasks.

📝 Enhancement Note: The on-site requirement in a specific corporate building implies a structured work environment. The "Assistant Vice President Expectations" suggest that the candidate should be comfortable operating within a corporate framework while still driving innovation and collaboration.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: HR or recruiter call to assess basic qualifications, cultural fit, and salary expectations.

• Technical Interview 1 (Coding Challenge): A hands-on coding exercise, likely focusing on React, component development, or problem-solving related to UI implementation. This might be live-coding or a take-home assignment.

• Technical Interview 2 (System Design/Component Architecture): Discussion about building and maintaining a component library or design system. Expect questions on architecture, accessibility, testing strategies, and how to handle complex UI scenarios.

• Hiring Manager/Team Lead Interview: Deeper dive into experience, leadership potential (referencing AVP expectations), problem-solving approach, and motivation. This is where cultural fit is strongly assessed.

• Portfolio Review: A dedicated session to walk through selected projects from your portfolio, explaining your role, technical decisions, challenges, and outcomes.

• Final Interview (Potentially with Senior Leadership): May involve discussing strategic impact, risk management, and alignment with Barclays' values.

Portfolio Review Tips:

• Curate Strategically: Select 2-3 of your strongest projects that best demonstrate your skills in React, component development, design systems, and accessibility.

• Focus on Process: For each project, clearly articulate the problem, your approach, the technical challenges you overcame, your specific contributions, and the results achieved. Use the STAR method (Situation, Task, Action, Result).

• Highlight Design System Contributions: If you have direct experience with design systems or component libraries, make this the central theme. Showcase how you ensured consistency, reusability, and accessibility.

• Demonstrate Accessibility: Clearly explain your understanding and implementation of WCAG 2.1 AA standards. Show examples of accessible code and testing.

• Be Prepared for Deep Dives: Anticipate detailed questions about your code, architectural choices, and decision-making process.

• Showcase Documentation: Have examples of your component documentation ready, such as Storybook stories or README files.

Challenge Preparation:

• React & TypeScript Fundamentals: Brush up on core React concepts (hooks, context, state management) and TypeScript best practices.

• Component Design Patterns: Review common patterns for building reusable and maintainable UI components.

• Accessibility Best Practices: Familiarize yourself with WCAG 2.1 AA guidelines, ARIA roles, and keyboard navigation principles.

• Design System Principles: Understand concepts like design tokens, atomic design, and how to maintain consistency.

• Problem-Solving: Practice breaking down complex UI problems and articulating your solutions clearly and logically.

• Barclays Values: Understand Barclays' values (Respect, Integrity, Service, Excellence, Stewardship) and Mindset (Empower, Challenge, Drive) and be ready to give examples of how you embody them.

📝 Enhancement Note: The interview process is likely multi-stage and rigorous, typical for a large financial institution. The emphasis on a portfolio review and the "Assistant Vice President Expectations" suggest that candidates need to demonstrate not only technical prowess but also strategic thinking, communication skills, and leadership potential.

🛠 Tools & Technology Stack

Primary Tools:

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

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

• Modern CSS: Including CSS Custom Properties, CSS-in-JS solutions (e.g., Styled Components, Emotion), or utility-first CSS frameworks (e.g., Tailwind CSS).

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

• Vite / Rollup: Modern frontend build tools for efficient bundling and development server capabilities.

• npm / pnpm: Package managers for dependency management.

Analytics & Reporting:

• Component Usage Analytics: Tools to track how components are being used across different applications.

• Performance Monitoring Tools: For analyzing component load times and runtime performance.

• Accessibility Auditing Tools: Such as Axe DevTools, Lighthouse, or custom scripts for WCAG compliance checks.

CRM & Automation:

• Version Control: Git (likely via GitHub, GitLab, or Bitbucket).

• CI/CD Pipelines: Tools like Jenkins, GitLab CI, or Azure DevOps for automating builds, tests, and deployments.

• Design Tools Integration: Potentially tools that integrate with Figma or Sketch for design handoffs.

📝 Enhancement Note: The technology stack is modern and focused on efficient, scalable frontend development. Proficiency in React and TypeScript is paramount, with Storybook being a key tool for the design system aspect. The inclusion of build tools like Vite and package managers like pnpm indicates a focus on modern development workflows.

👥 Team Culture & Values

Operations Values:

• Respect: Valuing diverse perspectives and fostering an inclusive environment for all team members and users of the components.

• Integrity: Upholding high ethical standards in code quality, data handling, and communication. Being honest about challenges and limitations.

• Service: Focusing on delivering excellent components and documentation that effectively serve the needs of internal engineering teams and ultimately, Barclays' customers.

• Excellence: Striving for the highest quality in code, design, accessibility, and performance. Continuous improvement is key.

• Stewardship: Taking ownership of the design system as a valuable asset, ensuring its long-term maintainability, scalability, and impact.

Collaboration Style:

• Cross-functional Integration: Working closely with designers to ensure accurate implementation of visual and interaction designs, and with product teams to understand functional requirements.

• Process Review & Feedback: Actively participating in code reviews, design critiques, and team retrospectives to continuously improve processes and component quality. Openness to feedback from consuming teams.

• Knowledge Sharing: Proactively sharing best practices, new techniques, and insights through documentation, internal presentations, or mentoring. Encouraging a culture of learning and shared ownership.

📝 Enhancement Note: The Barclays values and mindset are standard for the organization. For this specific role, translating these into tangible actions within the UI engineering context is important. For example, "Service" means building components that are easy for other developers to use and integrate. "Excellence" means rigorous testing and attention to detail.

⚡ Challenges & Growth Opportunities

Challenges:

• Balancing Innovation and Stability: Keeping the component library up-to-date with modern frontend trends while ensuring backward compatibility and stability for existing applications.

• Scalability Across a Large Organization: Ensuring the design system can effectively serve diverse teams with varying needs and technical maturity across Barclays.

• Driving Adoption: Encouraging and supporting adoption of the design system by numerous engineering teams, overcoming potential resistance to change.

• Maintaining Accessibility Standards: Continuously ensuring all components meet rigorous accessibility requirements (WCAG 2.1 AA) as standards evolve and new features are added.

• Technical Debt Management: Proactively identifying and addressing technical debt within the component library to maintain code health and performance.

Learning & Development Opportunities:

• Operations Skill Advancement: Deepen expertise in advanced React patterns, performance optimization, accessibility audits, and frontend architecture.

• Industry Conferences & Certifications: Opportunities to attend relevant frontend development and accessibility conferences (e.g., React Conf, JSConf, accessibility summits).

• Mentorship & Leadership Development: Access to mentorship programs, leadership training, and opportunities to guide junior engineers, preparing for AVP-level responsibilities.

• Exposure to Financial Technology: Gain valuable insights into the specific technological challenges and innovations within the financial services sector.

📝 Enhancement Note: The challenges are typical for roles involved in building and maintaining foundational platforms within large organizations. The growth opportunities emphasize both technical depth and the leadership skills hinted at by the "Assistant Vice President Expectations."

💡 Interview Preparation

Strategy Questions:

• "Describe your process for building a new reusable UI component from scratch. How do you ensure it's accessible, performant, and well-documented?" (Focus: Process, React, Accessibility, Documentation)

• "How would you approach translating a complex Figma design into a robust React component? What are the key considerations for maintaining design fidelity and developer experience?" (Focus: Design Handoff, React, Design Systems)

Company & Culture Questions:

• "Barclays values 'Excellence' and 'Stewardship.' How do these values translate into your work as a UI Engineer building a design system?" (Focus: Values Alignment, Impact)

• "How do you stay updated with the latest trends in frontend development and web accessibility, and how would you advocate for adopting beneficial new practices within Barclays?" (Focus: Continuous Learning, Innovation, Influence)

Portfolio Presentation Strategy:

• Structure Your Narrative: For each project, clearly define the problem statement, your role and responsibilities, the technical solutions implemented (highlighting React, TypeScript, accessibility), the challenges faced, and the measurable impact or outcome.

• Show, Don't Just Tell: Use live demos or interactive prototypes if possible. For static examples, use clear screenshots and code snippets that illustrate key points.

• Emphasize Process & Rationale: Be ready to explain why you made certain technical decisions. For instance, why you chose a particular CSS approach, how you implemented ARIA attributes, or your reasoning behind unit testing strategies.

• Quantify Impact: Whenever possible, use metrics to demonstrate the value of your work (e.g., increased component adoption rate, reduction in development time for other teams, improved accessibility scores).

• Connect to Barclays: Briefly explain how your experience and approach align with the requirements of this role and the values of Barclays.

📝 Enhancement Note: Interview preparation should focus on demonstrating not only technical proficiency but also the ability to think strategically, communicate effectively, and align with Barclays' corporate values and expectations for leadership.

📌 Application Steps

To apply for this UI Engineer position at Barclays:

• Submit your application through the provided Workday link (URL: https://barclays.wd3.myworkdayjobs.com/External_Career_Site_Barclays/job/Gemini-Building-A-Prague/Software-Engineer---Adoption_JR-0000040582).

• Tailor your resume to highlight your experience with React, TypeScript, component libraries, design systems, and web accessibility. Use keywords from the job description and incorporate achievements using quantifiable metrics where possible.

• Prepare your portfolio with 2-3 of your strongest projects. Focus on showcasing your ability to build reusable, accessible UI components and your understanding of design system principles. Be ready to articulate your process and impact.

• Practice your interview responses for common technical questions related to React, CSS, accessibility, and component architecture. Prepare examples that demonstrate your problem-solving skills, collaboration, and alignment with Barclays' values.

• Research Barclays thoroughly, understanding their digital presence, recent news, and their commitment to technology and accessibility. 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.