UI Engineer

📍 Job Overview

Job Title: UI Engineer

Company: Barclays

Location: Prague, Czechia

Job Type: Full time

Category: Technology / Software Engineering

Date Posted: 2026-10-02

Experience Level: 5-10 Years

Remote Status: On-site

🚀 Role Summary

• Contribute to the development and maintenance of a foundational component library and design system for next-generation digital experiences.

• Collaborate with designers, senior engineers, and product teams to translate design specifications into reusable, production-ready UI components.

• Ensure all developed components adhere to modern design system principles, focusing on accessibility, performance, and comprehensive documentation.

• Actively participate in code reviews, fostering a culture of technical excellence and maintaining high standards of code quality across the component library.

• Engage with consuming teams to gather feedback, understand their needs, and continuously improve component APIs and documentation.

📝 Enhancement Note: This role is positioned within a "Digital Experience Platform" team, indicating a strategic focus on creating standardized, high-quality UI elements that will be adopted across various Barclays digital products. The emphasis on a "component library" and "design system" suggests a need for deep expertise in modular frontend development and a strong understanding of how to create scalable, maintainable UI architectures. The Assistant Vice President Expectations section implies a senior individual contributor role with potential for influencing technical direction and guiding other engineers.

📈 Primary Responsibilities

• Design, develop, and maintain React-based UI components, ensuring adherence to modern design system principles, accessibility standards (WCAG 2.1 AA), and performance best practices.

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

• 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, reliability, and compliance.

• Participate actively in code reviews, providing constructive feedback to peers and upholding high standards of code quality and best practices within the component library.

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

• Engage with internal engineering teams to gather feedback on components, understand their evolving needs, and iteratively enhance component APIs and documentation.

• Implement and advocate for inclusive design principles, ensuring all components are usable across a wide range of assistive technologies and user needs.

📝 Enhancement Note: The responsibilities highlight a dual focus on both hands-on development of UI components and the strategic aspects of building and maintaining a design system. This includes not just coding but also documentation, testing, collaboration, and process improvement, all crucial for a successful component library. The mention of WCAG 2.1 AA compliance is a critical requirement for accessibility.

🎓 Skills & Qualifications

Education: Bachelor's degree in Computer Science, Engineering, or a related field, or equivalent practical experience.

Experience: 5-10 years of professional experience in frontend 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, reusable UI components.

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

• Proven experience working with design tokens and translating design specifications into code.

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

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

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

• Excellent collaboration skills, with the ability to work effectively with designers and incorporate feedback.

• High attention to detail and a commitment to delivering polished, high-quality UI components. 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 a good understanding of designer workflows.

📝 Enhancement Note: The experience level of 5-10 years suggests a mid-to-senior level role, likely an individual contributor with significant autonomy and the expectation to mentor junior team members. The emphasis on React, TypeScript, and CSS fundamentals, alongside specific tools like Storybook and Vite, indicates a need for deep technical expertise in modern frontend development practices. The preferred skills point towards a desire for candidates who are not only technically proficient but also adaptable and have a broad understanding of the frontend ecosystem.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Showcase of reusable UI components developed with React and TypeScript, demonstrating modularity and scalability.

• Examples of design system implementation, highlighting the translation of design tokens and specifications into code.

• Case studies detailing the process of building accessible components, including specific accessibility features implemented and testing methodologies used.

• Documentation examples (e.g., Storybook stories, usage guidelines) that illustrate clear communication of component APIs and best practices.

• Demonstrations of component testing strategies, including unit tests and visual regression tests, with clear explanations of the results and improvements achieved. Process Documentation:

• Workflows outlining the process from design inception to component implementation, including collaboration points with designers.

• Documentation of testing procedures for ensuring component quality, accessibility, and performance.

• Records of contributions to build pipelines, release processes, and tooling improvements for component libraries.

• Examples of feedback gathering and iteration processes with consuming engineering teams.

📝 Enhancement Note: For a UI Engineer role focused on a design system, a portfolio is paramount. It needs to clearly demonstrate not just the ability to code but also the understanding of design system principles, accessibility, documentation, and the full lifecycle of component development. The emphasis should be on quality, reusability, and maintainability.

💵 Compensation & Benefits

Salary Range: Kč 1,200,000.00 - Kč 1,683,000.00 annually.

Benefits:

• Incentive award eligibility.

• Suite of competitive country-specific benefits provided by Barclays.

• Opportunities for professional development and continuous learning within a global financial institution.

• Access to modern development tools and technologies.

• Collaborative work environment with experienced designers and engineers.

Working Hours: Standard full-time, approximately 40 hours per week.

📝 Enhancement Note: The salary range is provided in Czech Koruna (CZK) for the Prague location. The average salary for a UI Engineer in Prague with 5-10 years of experience typically falls within or slightly above this range, depending on the specific company and benefits package. The provided range appears competitive for a senior role at a large, established financial institution like Barclays. The benefits mentioned are standard for such roles, with the "incentive award" suggesting performance-based bonuses.

🎯 Team & Company Context

🏢 Company Culture

Industry: Financial Services (Banking)

Company Size: Large Enterprise (Barclays is a multinational bank with tens of thousands of employees globally).

Founded: 1836 (Barclays has a long and established history, suggesting a culture that balances tradition with innovation).

Team Structure:

• The role is part of the "Digital Experience Platform" team, which likely comprises UI Engineers, UX/UI Designers, potentially frontend architects, and possibly product managers focused on the platform.

• This team will collaborate closely with various product development teams across Barclays to ensure consistent UI/UX across digital channels.

• Reporting structure likely involves a lead engineer or engineering manager, with potential for interaction with higher-level architects and directors, especially given the Assistant Vice President (AVP) expectations. Methodology:

• Agile methodologies are highly probable for software development, including Scrum or Kanban, to manage iterative development of the component library.

• Emphasis on data-driven decisions for component improvements and adoption, likely involving metrics on usage, performance, and bug reports.

• Strong focus on collaboration, code reviews, and knowledge sharing to maintain high standards and foster continuous improvement.

Company Website: https://home.barclays/

📝 Enhancement Note: Barclays, as a major financial institution, likely operates with a culture that values stability, security, and compliance, but also recognizes the necessity of digital innovation. The "Digital Experience Platform" team is a key enabler of this innovation. The AVP expectations suggest a culture that encourages leadership, strategic thinking, and ownership, even for individual contributors.

📈 Career & Growth Analysis

Operations Career Level: Assistant Vice President (AVP) - Senior Individual Contributor. This level typically signifies a high degree of technical expertise, autonomy, and the ability to influence technical direction. For this role, it means leading the development and adoption of critical UI components and potentially mentoring junior engineers.

Reporting Structure: The UI Engineer will report to a lead or manager within the Digital Experience Platform team. They will also work closely with UX/UI designers and collaborate extensively with engineering teams across Barclays.

Operations Impact: This role has a direct and significant impact on the user experience of Barclays' digital products. By building a robust and accessible component library, this engineer will enable faster development cycles, ensure brand consistency, improve usability, and enhance accessibility across numerous customer-facing and internal applications. This contributes directly to customer satisfaction and operational efficiency.

Growth Opportunities:

• Technical Specialization: Deepen expertise in frontend architecture, design systems, performance optimization, and web accessibility.

• Leadership: Transition into a Tech Lead or Engineering Manager role within the Digital Experience Platform team or other engineering departments.

• Cross-Functional Exposure: Gain broader experience by working with different product teams and understanding their unique UI/UX challenges.

• Mentorship: Develop leadership skills by mentoring junior UI Engineers and sharing best practices.

• Strategic Influence: Contribute to the long-term technical roadmap and strategy for digital experiences at Barclays.

📝 Enhancement Note: The AVP designation is key here. It signals that this isn't just a coding role; it requires strategic thinking, influencing skills, and the ability to guide others. Growth opportunities should reflect this senior individual contributor path, emphasizing technical leadership and broader impact.

🌐 Work Environment

Office Type: On-site at Barclays' Prague office. This suggests a traditional office setting designed for collaboration and focused work.

Office Location(s): Gemini Building A, Prague, Czechia. This is a modern office space likely equipped with amenities to support employees.

Workspace Context:

• The environment will be collaborative, involving close interaction with designers, fellow engineers, and potentially product managers.

• Access to modern development tools, high-speed internet, and standard office infrastructure will be provided.

• The office setting facilitates in-person brainstorming, whiteboarding sessions, and team alignment meetings, which are crucial for design system development.

Work Schedule: The standard 40-hour work week is typical for full-time positions. While the role is on-site, there may be some flexibility in daily start/end times, which is common in tech roles, but the primary expectation is presence in the office.

📝 Enhancement Note: The on-site requirement in a specific, modern building implies a structured work environment. For a role focused on collaboration and design systems, an on-site presence is often preferred to facilitate spontaneous discussions and build team cohesion.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: HR or recruiter screen to assess basic qualifications, cultural fit, and understanding of the role's core responsibilities.

• Technical Interview(s): Deep dive into React, TypeScript, CSS, accessibility, and design system principles. This may involve live coding exercises, system design questions, and scenario-based problem-solving.

• Portfolio Review: A dedicated session to walk through selected projects from your portfolio. Be prepared to discuss your design process, technical decisions, challenges faced, and outcomes achieved, especially regarding component reusability, accessibility, and performance.

• Hiring Manager/Team Interview: Discussion focused on team dynamics, collaboration style, leadership potential (especially relevant for AVP level), and how you align with Barclays' values and the team's objectives.

• Final Round: May involve senior leadership or architectural review to confirm technical depth and strategic alignment.

Portfolio Review Tips:

• Curate 2-3 key projects that best represent your experience with component libraries, design systems, or complex UI development.

• For each project, clearly articulate the problem statement, your role, the technologies used, your design and development process, and the impact/outcomes.

• Be ready to specifically demonstrate how you ensured accessibility (WCAG 2.1 AA) and performance in your work.

• Prepare to discuss how you documented your components and facilitated their adoption by other developers.

• Highlight any contributions to design systems, even if internal or personal projects. Challenge Preparation:

• Practice coding challenges focused on React component creation, state management, and DOM manipulation.

• Prepare to discuss how you would approach building a new component from a design specification, considering edge cases, accessibility, and testing.

• Be ready to explain concepts like CSS specificity, accessibility APIs, and the benefits of design systems.

• Familiarize yourself with Barclays' values and recent digital initiatives to demonstrate genuine interest and cultural alignment.

📝 Enhancement Note: The AVP level implies a rigorous interview process that will test not only technical skills but also problem-solving abilities, communication, and strategic thinking. A strong, well-prepared portfolio is crucial for demonstrating practical application of skills.

🛠 Tools & Technology Stack

Primary Tools:

• Frontend Framework: React (Extensive proficiency required).

• Language: TypeScript (Extensive proficiency required).

• Styling: Modern CSS (CSS Custom Properties, CSS-in-JS, Utility-First CSS like Tailwind CSS).

• Component Documentation: Storybook (Familiarity required).

• Build Tools: Vite, Rollup (Experience with modern frontend build tools).

• Package Management: npm, pnpm (Experience with package managers).

Analytics & Reporting:

• While not explicitly stated for this role, expect to interact with tools that track component usage, performance metrics, and bug reporting. This might involve internal Barclays analytics platforms. CRM & Automation:

• Not directly applicable to this UI Engineer role, but understanding how components integrate into broader application workflows is important.

📝 Enhancement Note: The core technologies are clearly defined: React, TypeScript, and modern CSS. The emphasis on Storybook and tools like Vite/Rollup points to a modern, efficient frontend development workflow. Experience with package managers like npm and pnpm is also a standard requirement.

👥 Team Culture & Values

Operations Values:

• Respect: Valuing diverse perspectives in design and development, fostering an inclusive environment.

• Integrity: Upholding high standards of code quality, documentation, and ethical development practices.

• Service: Focusing on enabling other engineering teams through well-crafted, reliable components and excellent support.

• Excellence: Striving for high performance, accessibility, and maintainability in all developed UI components.

• Stewardship: Taking ownership of the component library as a critical asset for Barclays' digital presence.

Collaboration Style:

• Highly collaborative, requiring close partnership with UX/UI designers to translate vision into reality.

• Open to feedback and iterative development, actively participating in code reviews and team discussions.

• Proactive in communicating technical decisions and potential challenges to stakeholders.

• Emphasis on knowledge sharing through documentation and internal presentations to promote component adoption and best practices.

📝 Enhancement Note: Barclays' core values (Respect, Integrity, Service, Excellence, Stewardship) are expected to permeate team culture. For a UI Engineer on a platform team, these translate into building user-centric, high-quality, and maintainable solutions collaboratively.

⚡ Challenges & Growth Opportunities

Challenges:

• Balancing Reusability and Specificity: Creating components that are flexible enough for broad adoption while specific enough to meet diverse product needs.

• Maintaining Consistency: Ensuring brand and design consistency across a large organization with many development teams.

• Driving Adoption: Encouraging and supporting various product teams to adopt the design system components effectively.

• Keeping Pace with Technology: Staying current with evolving frontend technologies, best practices, and accessibility standards.

• Managing Technical Debt: Continuously refactoring and updating components to maintain quality and address new requirements.

Learning & Development Opportunities:

• Advanced Frontend Techniques: Deep dive into performance optimization, advanced React patterns, and modern CSS techniques.

• Accessibility Expertise: Become a subject matter expert in web accessibility, potentially leading accessibility initiatives.

• Design System Strategy: Gain experience in the strategic planning and governance of large-scale design systems.

• Cross-Functional Exposure: Work with a wide array of product teams and understand different business domains within Barclays.

• Leadership Development: Opportunities to mentor junior engineers and take on technical leadership roles.

📝 Enhancement Note: The challenges presented are typical for a role focused on building and maintaining a design system within a large enterprise. Growth opportunities are geared towards deepening technical expertise and expanding into leadership and strategic roles.

💡 Interview Preparation

Strategy Questions:

• "Describe your process for building a new, reusable UI component from a design mock-up. How do you ensure it's accessible and performant?" (Focus on process, accessibility standards, testing, and documentation).

• "How would you handle a situation where a product team wants to deviate significantly from a design system component? What is your approach to managing such requests?" (Focus on collaboration, negotiation, and understanding the balance between standardization and flexibility).

• "Walk us through a project where you significantly improved the performance or accessibility of a UI component or application. What metrics did you use, and what was the impact?" (Focus on quantifiable results and technical problem-solving). Company & Culture Questions:

• "What interests you about working at Barclays, specifically within the Digital Experience Platform team?" (Research Barclays' digital strategy, recent news, and their commitment to technology/innovation).

• "How do you approach collaboration with designers? Can you give an example of a successful collaboration?" (Highlight communication, feedback, and understanding of design intent).

• "How do you stay updated with the latest trends and best practices in frontend development and web accessibility?" (Showcase continuous learning and passion for the craft). Portfolio Presentation Strategy:

• Structure: Begin with an overview of the design system/component library project, then dive into 1-2 specific components or case studies.

• Narrative: Tell a story for each example: the problem, your solution, the technical details, the challenges, and the measurable outcomes (e.g., improved performance, accessibility compliance, faster adoption).

• Visuals: Use screen recordings, live demos (if feasible), or high-quality screenshots to showcase the components in action.

• Technical Deep Dive: Be prepared to discuss the code, architectural decisions, and trade-offs made.

• Interaction: Engage the interviewers by asking clarifying questions and being open to their feedback during the presentation.

📝 Enhancement Note: Interview questions will likely probe for a deep understanding of React, TypeScript, accessibility, and the principles of design systems. The portfolio presentation is a critical opportunity to showcase practical application and problem-solving skills.

📌 Application Steps

To apply for this UI Engineer position:

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

• Tailor your resume: Emphasize your experience with React, TypeScript, component libraries, design systems, and web accessibility. Use keywords from the job description and highlight quantifiable achievements.

• Prepare your portfolio: Select your strongest projects that demonstrate your UI engineering skills, focusing on examples of reusable components, design system contributions, and accessibility implementations. Ensure documentation is clear and concise.

• Practice your interview answers: Rehearse responses to common technical questions and behavioral questions, using the STAR method (Situation, Task, Action, Result) where appropriate. Prepare to articulate your thought process clearly.

• Research Barclays: Understand their business, recent digital initiatives, and company values to demonstrate your interest and fit.

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