Senior Design Systems Designer (d/f/m)

Haufe Group
Full-timeβ€’Barcelona, Spain

πŸ“ Job Overview

Job Title: Senior Design Systems Designer (d/f/m)

Company: Haufe Group

Location: Barcelona, Catalonia, Spain

Job Type: Full-time

Category: Design Operations / Product Design

Date Posted: March 20, 2026

Experience Level: Professionals (5-10 years)

Remote Status: Hybrid (12 days/quarter in office, up to 8 weeks fully remote annually)

πŸš€ Role Summary

  • Lead the evolution, adoption, and governance of a comprehensive design system across multiple products and platforms, ensuring a unified and high-quality user experience.

  • Drive the creation and maintenance of scalable, inclusive, and accessible UI components, patterns, and design tokens, directly impacting product development velocity and quality.

  • Foster strong collaborative relationships with product designers, front-end engineers, accessibility experts, and brand stakeholders to ensure seamless integration and consistent application of the design system.

  • Champion best practices in design systems, accessibility (WCAG, ARIA), and token-driven architectures to elevate the overall design and development process.

πŸ“ Enhancement Note: This role is positioned as a "Senior" professional, indicating a significant level of autonomy, strategic input, and leadership responsibility within the design systems function. The "d/f/m" (divers/female/male) designation signifies an inclusive hiring approach. The focus on "Design Operations" is inferred from the core responsibilities of leading, governing, and driving adoption of a design system, which is a key function within Design Ops.

πŸ“ˆ Primary Responsibilities

  • Design System Development & Maintenance: Create, refine, and meticulously maintain UI components, design patterns, and design tokens (including theming strategies) to ensure usability, scalability, and accessibility across all Haufe Group products.

  • System Thinking & Strategy: Translate overarching brand guidelines, interaction models, and user needs into reusable, flexible, and consistent system elements and comprehensive documentation.

  • Cross-Functional Collaboration: Partner closely with front-end engineers to ensure design-code parity, facilitate component implementation, and troubleshoot integration challenges effectively.

  • Adoption & Governance: Actively champion the design system internally through engaging documentation, training sessions, and continuous support for designers and developers, driving widespread adoption and adherence to system guidelines.

  • Accessibility & Inclusivity Leadership: Embed and enforce accessibility best practices (WCAG, ARIA) into every component and pattern, ensuring all digital products are inclusive and usable by a diverse user base.

  • Mentorship & Knowledge Sharing: Provide guidance and support to other designers and team members on leveraging the design system effectively, fostering a culture of shared knowledge and best practices.

  • Continuous Improvement & Innovation: Proactively identify gaps, opportunities for innovation, and areas for enhancement within the design system based on user feedback, analytics data, and emerging industry trends.

  • Travel & Collaboration: Travel to Haufe Group's Headquarters in Germany approximately once every two months for key collaborative sessions and strategic planning.

πŸ“ Enhancement Note: The responsibilities emphasize a blend of strategic leadership, hands-on design execution within the systems context, and cross-functional enablement. The explicit mention of travel to HQ suggests that while the role is based in Barcelona, direct, in-person collaboration with central teams is a critical component.

πŸŽ“ Skills & Qualifications

Education: While no specific degree is mandated, a strong portfolio and demonstrable experience in product design and design systems are paramount. A degree in Design, HCI, Computer Science, or a related field would be beneficial.

Experience:

  • 5+ years of progressive experience in product design.

Required Skills:

  • Expert Proficiency in Figma: Demonstrated mastery of Figma for component creation, prototyping, and system management.

  • Design System Expertise: Deep understanding of design system principles, methodologies, and best practices for building scalable and maintainable systems.

  • UI Component & Pattern Design: Proven ability to design and document a wide range of reusable UI components and design patterns.

  • Accessibility Standards (WCAG, ARIA): In-depth knowledge and practical application of accessibility guidelines and inclusive design principles.

  • System Thinking: Ability to conceptualize and articulate how individual components contribute to a cohesive and functional system.

  • Front-end Engineering Collaboration: Proven experience working effectively with front-end developers to implement designs and ensure design-code parity.

  • Strong Communication & Documentation: Excellent verbal and written communication skills, with a talent for creating clear, concise, and actionable design guidelines and documentation.

  • Token-driven Systems & Theming: Familiarity with token-based design systems and strategies for managing themes and variations.

Preferred Skills:

  • German Language Fluency: While not a strict requirement, proficiency in German is considered a significant asset, facilitating smoother communication with the German HQ and broader team.

  • Experience with other Design Tools: Familiarity with additional design or prototyping tools can be beneficial.

  • Understanding of Brand Guidelines: Ability to translate and integrate brand identity into a digital design system.

  • Analytics & User Feedback Integration: Experience using data and user feedback to inform design system improvements.

πŸ“ Enhancement Note: The emphasis on Figma, accessibility, and collaboration with engineers points towards a role that is technically grounded and integration-focused. The "nice to have" for German language skills highlights the international nature of the company and the importance of cross-cultural communication.

πŸ“Š Process & Systems Portfolio Requirements

Portfolio Essentials:

  • A dedicated section showcasing your experience in building, managing, or significantly contributing to design systems.

  • Detailed case studies illustrating the design, development, and adoption process of specific UI components or patterns.

  • Examples demonstrating your understanding and application of accessibility standards (WCAG, ARIA) within design system components.

  • Visualizations or documentation examples of token-driven systems and theming strategies you have implemented or contributed to.

  • Evidence of collaboration with engineering teams, including how you ensured design-code parity.

Process Documentation:

  • Demonstrate your approach to documenting design system elements, including rationale, usage guidelines, and accessibility considerations.

  • Showcase your understanding of the lifecycle of design system components, from initial concept and design to implementation and ongoing maintenance.

  • Provide examples of how you've established or contributed to governance processes for design system evolution, ensuring consistency and scalability.

πŸ“ Enhancement Note: For a Senior Design Systems Designer role, a portfolio is not just a collection of work but a demonstration of strategic thinking, process ownership, and impact. The emphasis should be on how the candidate has systematically built, scaled, and governed design systems, not just individual UI elements.

πŸ’΅ Compensation & Benefits

Salary Range: While a specific salary range is not provided, for a Senior Design Systems Designer role in Barcelona, Spain, with 5-10 years of experience and specialized skills, a competitive annual salary would typically range from €60,000 to €85,000. This estimate is based on industry benchmarks for similar roles in major European tech hubs, considering the company's size and the specialized nature of design systems expertise.

Benefits:

  • Flexible Benefits Plan: A customizable benefits package allowing employees to choose options that best suit their individual needs.

  • Company-Paid Private Health Insurance: Comprehensive health coverage provided and fully funded by Haufe Group.

  • Sponsored Gym Membership: Financial support or a fully covered membership for a local gym to promote employee well-being.

  • Relocation Assistance: Support for candidates relocating to Barcelona, including assistance with apartment searches and navigating administrative paperwork.

  • New MacBook Pro or PC: Provision of a high-performance laptop to facilitate design work.

  • Talent Development Opportunities: Access to training and development programs within a goal-oriented team environment.

  • Generous Remote Work Policy: Up to 8 weeks per year of fully remote work from anywhere, in addition to the hybrid office policy.

Working Hours: The standard working hours are likely based on a 40-hour work week, with flexibility offered through the hybrid and remote work policies. The primary requirement is 12 days per quarter in the Barcelona office, allowing for significant autonomy in structuring individual work time.

πŸ“ Enhancement Note: The salary estimation is based on research for senior-level design roles in Barcelona, factoring in the specialized nature of design systems and the company's context. The benefits package is detailed and highlights attractive perks like relocation support and extensive remote work flexibility.

🎯 Team & Company Context

🏒 Company Culture

Industry: Software & Digital Workplace Solutions. Haufe Group is a leader in organizational development in the DACH market, providing digital workplace solutions. This industry context implies a focus on efficiency, user productivity, and modern digital experiences.

Company Size: +2,600 employees. This signifies a large, established organization with the resources and structure to support complex initiatives like a mature design system, while retaining a dynamic, startup-like ambition.

Founded: Not specified, but the company's leadership position in the DACH market suggests a long-standing history and stable foundation.

Team Structure:

  • Design Team: The Senior Design Systems Designer will likely be part of a broader product design team, potentially with dedicated design operations support.

  • Reporting Structure: The role reports to a design lead or manager, with close collaboration expected with product managers and engineering leads.

  • Cross-functional Collaboration: The role is inherently cross-functional, requiring deep partnerships with engineering, product management, marketing/brand, and accessibility specialists.

Methodology:

  • Data-Driven Design: Emphasis on using user feedback and analytics to inform design system evolution and improvements.

  • Agile Development: Likely operates within an agile framework, requiring adaptability and iterative development of system components.

  • Collaborative Workflows: Encourages teamwork, with intentional office days designed for planning, pairing, and face-to-face problem-solving.

Company Website: [Haufe Group Website URL - Assumed to be haufegroup.com based on domain_derived]

πŸ“ Enhancement Note: The company description highlights a blend of startup ambition with the stability of a market leader. This suggests a culture that values innovation, expertise, and strong teamwork. The Barcelona office functions as a significant hub, but its integration with the German HQ is also crucial.

πŸ“ˆ Career & Growth Analysis

Operations Career Level: This is a Senior-level position, implying a professional who is expected to operate with a high degree of autonomy, influence strategic decisions related to design systems, and mentor junior team members. It sits at the cusp of individual contribution and team leadership within the design function.

Reporting Structure: The Senior Design Systems Designer will report to a Design Manager or Lead, and will work in close partnership with Engineering Leads and Product Managers. This structure allows for both strategic direction from leadership and tactical collaboration with development teams.

Operations Impact: The role's impact is directly tied to accelerating product development cycles, ensuring brand consistency, enhancing user experience across all Haufe products, and improving overall product quality and accessibility. A well-governed design system reduces redundant design and development efforts, leading to significant efficiency gains.

Growth Opportunities:

  • Leadership in Design Systems: Potential to grow into a Design Systems Lead or Manager role, overseeing a larger team and driving the strategic vision for design systems across the entire organization.

  • Specialization & Expertise: Deepen expertise in advanced design system methodologies, accessibility, or front-end integration patterns.

  • Cross-functional Impact: Expand influence across product teams, contributing to broader product strategy and user experience initiatives.

  • Mentorship & Team Building: Take on more formal mentorship responsibilities and contribute to building a strong design culture within Haufe Group.

πŸ“ Enhancement Note: The "Senior" title and the responsibilities suggest a clear path for leadership growth within the design systems domain. The company's size and market position offer opportunities for significant impact and career advancement.

🌐 Work Environment

Office Type: The Barcelona office is described as a place for "intentional" collaboration, suggesting a modern, well-equipped workspace designed to foster teamwork and focused work. It's not just a place for administrative tasks but for synergistic activities.

Office Location(s): Carrer de Sancho de Ávila, 52-8, Barcelona, Catalonia, Spain (Sant Martí district). This location is specified, indicating a physical presence and a designated team working space.

Workspace Context:

  • Collaborative Environment: The hybrid model, with 12 days per quarter in the office, is specifically designed for collaborative activities like planning, pairing, whiteboarding, and decision-making.

  • Technology & Tools: Employees receive a new MacBook Pro or PC, indicating a commitment to providing high-quality tools for design and development work.

  • Team Interaction: The intentional office days are for "the good stuff" – meaningful interactions with teammates, fostering strong working relationships and efficient problem-solving.

Work Schedule: The hybrid model requires 12 days per quarter in the Barcelona office, with the remaining time allowing for flexible individual work, either remotely or in the office as needed. The company also offers up to 8 weeks of fully remote work per year, providing substantial flexibility.

πŸ“ Enhancement Note: The description of the office environment emphasizes a balance between focused individual work and the benefits of in-person collaboration, with a deliberate approach to office time. The extensive remote work allowance is a significant aspect of the work environment.

πŸ“„ Application & Portfolio Review Process

Interview Process:

  • Initial Application: Submit application via "Easy Apply" – no cover letter or questionnaire required.

  • First Phone Call: A screening call with the hiring team to assess mutual fit between the role expectations and the candidate's skills and career goals.

  • Second Call (HR & Team): An opportunity to learn more about Haufe's company culture, team dynamics, and the specifics of working there, with HR and team members.

  • Case Study Assignment: Candidates will receive a case study to demonstrate their design systems skills.

  • Case Study Review & Feedback: The assigned case study will be reviewed, and feedback will be provided.

  • Final Interview (On-site): Presentation of the case study at the Barcelona office to future product and engineering colleagues and team members. This stage includes an opportunity for Q&A, particularly with the hiring manager (future supervisor), to discuss the product, team dynamics, and role expectations.

Portfolio Review Tips:

  • Highlight Design System Impact: Clearly articulate the problems your design system solved, the processes you used, and the measurable impact (e.g., increased efficiency, improved consistency, faster development cycles).

  • Showcase Process & Governance: Include examples of how you've documented components, established guidelines, and contributed to the governance and evolution of a design system.

  • Demonstrate Collaboration: Provide evidence of your partnership with engineers, including how you translated designs into code and managed feedback loops.

  • Emphasize Accessibility: Dedicate specific examples to how you've embedded accessibility standards (WCAG, ARIA) into your design system work.

  • Tell a Story: Structure your case studies to tell a clear narrative about the challenge, your approach, and the outcome.

Challenge Preparation:

  • Understand Haufe's Context: Research Haufe Group's products, target audience, and market position to tailor your case study response.

  • Focus on Systemic Thinking: The case study will likely assess your ability to think holistically about a system, not just individual elements.

  • Prepare to Articulate Rationale: Be ready to explain the "why" behind your design decisions, especially concerning system structure, component design, and accessibility.

  • Practice Presentation Skills: Rehearse presenting your case study clearly and concisely, anticipating questions about your process, decisions, and impact.

πŸ“ Enhancement Note: The interview process is structured to be efficient for the applicant (no cover letter) while still thorough. The case study is a critical component, emphasizing practical application of design systems skills. The final interview at the office underscores the importance of in-person connection.

πŸ›  Tools & Technology Stack

Primary Tools:

  • Figma: This is the primary and essential tool for design creation, prototyping, and design system management. Expert-level proficiency is required.

  • Design System Management Platforms: While not explicitly named, tools or methodologies for organizing, versioning, and distributing design system assets will be implicitly used (e.g., Storybook integration for code, or Figma's own shared libraries and components).

Analytics & Reporting:

  • User Analytics Tools: Experience with tools like Google Analytics, Mixpanel, or Amplitude would be beneficial for understanding user behavior and informing design system improvements.

  • Performance Monitoring Tools: Familiarity with tools that track application performance and user experience metrics.

CRM & Automation:

  • While not a direct focus of this design role, understanding how design systems integrate with product development workflows that might involve CRM or automation platforms (e.g., Salesforce, HubSpot, Pendo) can be advantageous for broader context.

πŸ“ Enhancement Note: The explicit requirement for Figma expertise makes it the central tool. The mention of "token-driven systems" suggests an understanding of how design tokens interact with code, potentially hinting at integration with development tools like Storybook or design token management platforms.

πŸ‘₯ Team Culture & Values

Operations Values:

  • Teamwork & Collaboration: A strong emphasis on working together, with intentional office time dedicated to collaborative activities and problem-solving.

  • Specialization & Expertise: A drive to be specialists in what they do, fostering a culture of deep skill development and continuous learning.

  • Ambition & Drive: The company culture blends startup energy with the stability of a market leader, suggesting a forward-thinking and results-oriented environment.

  • Quality & Consistency: The core function of a design system designer implies a value placed on high-quality, consistent, and scalable design outcomes.

  • Inclusivity & Accessibility: Explicit commitment to inclusive design practices and accessibility standards.

Collaboration Style:

  • Hybrid & Intentional: A balanced approach that values both focused individual work and the energy derived from face-to-face interaction. Office time is purposeful and designed for high-impact collaboration.

  • Cross-functional Partnership: Deep integration with engineering, product management, and brand teams is crucial for the success of the design system.

  • Open Communication: The interview process and emphasis on documentation suggest a culture that values clear communication and knowledge sharing.

πŸ“ Enhancement Note: The company culture appears to be a significant selling point, emphasizing a positive and collaborative work environment that balances flexibility with focused teamwork. The blend of startup dynamism with established company structure is a key cultural differentiator.

⚑ Challenges & Growth Opportunities

Challenges:

  • Driving Adoption: Persuading diverse teams (designers, developers) to adopt and consistently use the design system can be an ongoing challenge requiring strong advocacy and support.

  • Balancing Consistency & Flexibility: Maintaining a cohesive system while allowing for necessary product-specific variations and innovation.

  • Keeping Pace with Technology: Ensuring the design system remains up-to-date with evolving front-end technologies and design best practices.

  • Scaling the System: As the company grows and product offerings expand, the design system must scale efficiently without becoming unwieldy.

  • Cross-cultural Communication: Navigating communication and collaboration between the Barcelona team and the German HQ, especially given the "nice to have" for German language skills.

Learning & Development Opportunities:

  • Advanced Design Systems: Opportunity to lead the strategic direction and technical evolution of a mature design system.

  • Accessibility Specialization: Deepen expertise in complex accessibility challenges and inclusive design strategies.

  • Cross-functional Leadership: Gain experience influencing product strategy and development processes across multiple disciplines.

  • Mentorship: Develop leadership skills by mentoring junior designers and contributing to team growth.

  • Industry Engagement: Potential to attend conferences or engage with the broader design systems community.

πŸ“ Enhancement Note: The challenges are typical for a Senior Design Systems role and offer opportunities for skill development. The growth opportunities are substantial, pointing towards leadership and strategic impact within the organization.

πŸ’‘ Interview Preparation

Strategy Questions:

  • "Describe your approach to building and scaling a design system from scratch, or significantly evolving an existing one. What were the key challenges and how did you overcome them?" (Focus on process, strategic thinking, and problem-solving.)

  • "How do you ensure design-code parity between your design system components and their implementation by front-end engineers? Can you share an example of a successful collaboration?" (Focus on collaboration, technical understanding, and communication.)

Company & Culture Questions:

  • "What interests you about Haufe Group and our mission?" (Research the company's products, values, and market position.)

  • "How do you see yourself contributing to our company culture, particularly in a hybrid and internationally distributed team?" (Reflect on teamwork, collaboration, and inclusivity.)

Portfolio Presentation Strategy:

  • Structure: Organize your portfolio around key design system projects. For each project, clearly state the problem, your role, the solution (components, patterns, tokens), the process (research, design, collaboration), and the impact/outcomes.

  • Highlight Key Contributions: Explicitly point out your leadership in design system initiatives, your collaboration with engineering, and your integration of accessibility standards.

  • Visual Storytelling: Use clear visuals, diagrams, and concise text to explain complex concepts. Show, don't just tell.

  • Be Prepared for Deep Dives: Anticipate detailed questions about your design decisions, technical implementation considerations, and how you handled feedback or challenges.

  • Connect to Haufe: Where possible, relate your experience and approach to the potential needs and context of Haufe Group.

πŸ“ Enhancement Note: The interview preparation advice is tailored to a Senior Design Systems role, emphasizing strategic thinking, practical application, and the ability to articulate impact. The case study presentation is a key element, requiring thorough preparation.

πŸ“Œ Application Steps

To apply for this Senior Design Systems Designer position:

  • Submit your application through the provided "Easy Apply" link on SmartRecruiters.

  • Curate Your Portfolio: Select 2-3 of your most impactful design system projects. For each, clearly articulate your role, the system's goals, your process (including collaboration with engineers), and the measurable outcomes or impact. Ensure specific examples of component design, token strategy, and accessibility implementation are visible.

  • Tailor Your Resume: Highlight your 5+ years of product design experience, with at least 2 years focused on design systems. Emphasize keywords such as "Design Systems," "Figma," "UI Components," "Accessibility," "WCAG," "Token-driven Systems," and "Front-end Collaboration." Quantify achievements where possible (e.g., "Reduced UI development time by X%").

  • Prepare for the Case Study: Familiarize yourself with common design system challenges and be ready to apply your expertise to a new problem. Practice articulating your thought process and design rationale clearly and concisely.

  • Research Haufe Group: Understand their product offerings, target market, and company values. Consider how your design system philosophy aligns with their goals and culture.

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

Application Requirements

Candidates must have over 5 years of experience in product design, with at least 2 years dedicated specifically to design systems, alongside expert knowledge in Figma. A deep understanding of accessibility standards like WCAG and ARIA, strong documentation skills, and proven experience collaborating closely with front-end engineers are essential.