UX Design Engineer

📍 Job Overview

Job Title: UX Design Engineer

Company: Coates Group

Location: Chicago, IL

Job Type: Full-time

Category: Engineering / Design Operations

Date Posted: April 13, 2026

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

Remote Status: Hybrid

🚀 Role Summary

• This role bridges the gap between User Experience (UX) design and front-end engineering, focusing on the development and stewardship of a robust design system.

• Responsibilities include building, documenting, and maintaining reusable UI components using Storybook, ensuring high standards for performance, responsiveness, and accessibility.

• The position requires close collaboration with product teams and front-end developers to translate design patterns into production-ready code, acting as a key advocate for design quality within the engineering function.

• A significant aspect of the role involves optimizing the design-to-code workflow through advanced tooling, comprehensive documentation, and process automation to enhance team productivity and efficiency.

📝 Enhancement Note: While the title is "UX Design Engineer," the core responsibilities and required skills (React, TypeScript, Storybook, HTML/CSS/JS, design tokens, Atomic Design) position this role firmly within specialized front-end engineering with a strong UX/design systems focus, rather than a traditional UX researcher or designer. It's critical for candidates to understand this blend of design thinking and production code development.

📈 Primary Responsibilities

• Design System Stewardship: Lead the maintenance and evolution of Coates Group's design system to ensure consistent, accessible, and scalable user experiences across all digital products and touchpoints.

• Component Library Development: Create, document, and manage a library of reusable UI components within Storybook, ensuring optimal performance, responsiveness, and adherence to accessibility standards (WCAG).

• Cross-Functional Collaboration: Actively partner with UX designers, product managers, and front-end developers to translate UX patterns and wireframes into high-quality, maintainable, and reusable code components.

• Design-Development Alignment: Serve as the primary liaison between the design and engineering teams, championing the fidelity and intent of designs and ensuring successful implementation in the final product.

• Tooling & Workflow Optimization: Proactively identify and implement improvements to the design-to-code workflow, leveraging better tooling, enhancing documentation, and automating processes to increase efficiency and reduce development cycles.

• Accessibility & Quality Assurance: Embed accessibility best practices and usability principles into the component development lifecycle, conducting regular reviews and quality assurance checks to ensure compliance and superior user experience.

• Technical Documentation: Develop and maintain comprehensive documentation for the design system and its components, making it easy for other engineers and designers to understand and utilize.

📝 Enhancement Note: The emphasis on "Tooling & Workflow Optimization" and "Design-to-code workflows" suggests a proactive role in improving operational efficiency within the product development lifecycle, which is a key area for operations professionals. Candidates should be prepared to discuss how they've improved processes in previous roles.

🎓 Skills & Qualifications

Education:

Experience:

• 5-10 years of experience in front-end development with a strong focus on design systems, component libraries, and UI/UX implementation.

Required Skills:

• Proficiency in React and TypeScript: Extensive experience building complex user interfaces with these technologies.

• Expertise in Storybook: Proven ability to develop, document, and maintain component libraries within Storybook.

• Advanced HTML5, CSS3, and JavaScript: Deep understanding of modern web standards, including modular design patterns, CSS animations, and performance optimization techniques.

• Design Token Management: Experience defining and implementing design tokens for consistent theming and branding across applications.

• Figma-to-Code Workflows: Familiarity and practical experience in bridging design tools like Figma with development workflows.

• Accessibility Standards (WCAG): Strong knowledge of and practical application of web accessibility guidelines to ensure inclusive design.

• Responsive Design Principles: Ability to create UIs that adapt seamlessly across various devices and screen sizes.

• System Thinking: Ability to design components and systems for reuse, scalability, and consistency.

Preferred Skills:

• Component-Driven Development (Atomic Design): Experience working within or implementing component-driven methodologies like Atomic Design.

• Content Management Systems (CMS) or Digital Signage: Understanding of how design systems integrate with CMS platforms or digital signage applications.

• Cross-browser Compatibility & Debugging: Proficiency in ensuring consistent user experiences across different browsers and platforms.

• User-Centered Design Methodologies: Familiarity with user research, usability testing, and incorporating user feedback into design and development.

• Motion Design Principles: Understanding of how to effectively integrate animations and transitions to enhance user experience.

• Integration into Engineering Pipelines: Experience with integrating design systems via mechanisms like npm packages or monorepos.

📝 Enhancement Note: The required skills strongly emphasize front-end development expertise, particularly in React and TypeScript, coupled with deep knowledge of design system tools like Storybook and Figma. Candidates should highlight projects where they've built and maintained design systems, demonstrating their ability to bridge design and engineering. The "5-10 years" experience level suggests a mid-to-senior role.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Design System Case Studies: Showcase examples of design systems you have contributed to or led, detailing the problem, your approach, the technologies used, and the impact on product consistency and development speed.

• Component Library Demonstrations: Provide links or detailed descriptions of component libraries you've built, ideally hosted in Storybook, highlighting reusability, accessibility features, and responsiveness.

• Figma-to-Code Workflow Examples: Illustrate how you've effectively translated Figma designs into functional code, demonstrating efficiency and accuracy in the handoff process.

• Performance Optimization Projects: Include examples where you've significantly improved the performance of UI components or front-end applications, detailing the metrics and methods used.

• Accessibility Implementation Proof: Showcase projects where accessibility (WCAG compliance) was a key requirement and how you ensured it was met through design and code.

Process Documentation:

• Workflow Design & Optimization: Be prepared to discuss how you approach designing efficient workflows for component development, documentation, and integration into engineering pipelines.

• Implementation & Automation: Demonstrate your ability to implement and automate processes related to design system updates, component versioning, and deployment.

• Measurement & Performance Analysis: Explain how you measure the success and impact of a design system, including metrics for adoption, consistency, performance, and developer productivity.

📝 Enhancement Note: Operations professionals often need to demonstrate their ability to create efficient processes and leverage technology. For this UX Design Engineer role, the portfolio should clearly showcase how candidates have applied these principles to design systems, component development, and workflow optimization, using concrete examples of process improvements and their quantifiable outcomes.

💵 Compensation & Benefits

Salary Range: $114,000 - $130,000 per year

Salary Breakdown:

• Minimum: $114,400/year

• Midpoint: $122,200/year

• Maximum: $130,000/year

Benefits:

• Annual Market Competitive Bonus Program: Performance-based bonus opportunities.

• "Thrive Program" with Flexible Work Options: A suite of flexible work arrangements to support work-life balance.

• Dedicated Health and Wellbeing Time: Time allocated for personal health and wellbeing activities, such as virtual yoga or meditation.

• Global Wellness Paid Day Off: An annual paid day off specifically for employees to recharge.

• "Give Back Day": An opportunity for employees to dedicate time to community impact.

• Inclusivity Initiatives: Participation in programs focused on Equality and Empowerment.

Working Hours:

• Standard full-time role, likely around 40 hours per week, with flexibility offered through the "Thrive Program."

📝 Enhancement Note: The salary range is competitive for a UX Design Engineer role in Chicago, aligning with mid-to-senior level expertise. The benefits package emphasizes work-life balance and employee wellbeing, which are increasingly important factors for operations and engineering professionals. The "Thrive Program" suggests a focus on employee experience and retention.

🎯 Team & Company Context

🏢 Company Culture

Industry: Technology, Digital Hardware, Content Management Systems, Digital Signage Solutions. Coates Group provides digital hardware, proprietary content management systems, and leading signage solutions that create personalized and engaging customer experiences for global brands.

Company Size: The description mentions "9 offices around the world" and a "global headquarters" but doesn't specify employee count. Based on the global reach and the description of their impact (e.g., largest hardware deployment in QSR history), it's likely a medium to large enterprise.

Founded: Nearly 60 years ago, indicating a long-standing presence and deep industry expertise, combined with an innovative spirit.

Team Structure:

• The UX Design Engineer will be part of a product development team, likely collaborating closely with front-end developers, UX designers, product managers, and potentially QA engineers.

• The role emphasizes cross-functional collaboration, suggesting a matrixed or agile team structure where individuals work together on specific projects or product areas.

Methodology:

• Data-Driven Design & Engineering: The company emphasizes creating "smart, personalized and engaging customer experiences," implying a data-informed approach to both design and development.

• Agile & Evolving Practices: Phrases like "Always Evolving," "continual growth and evolution," and "nimble" suggest an agile development environment that embraces change and continuous improvement.

• User-Centricity: The focus on customer experiences and user-centered design principles is paramount.

• Collaboration & Iteration: The culture values "collaborators" and "creators" working together to "revolutionize" customer experiences.

Company Website: https://coatesgroup.com/

📝 Enhancement Note: Coates Group appears to be a well-established but forward-thinking technology company with a strong focus on customer experience. The culture values innovation, collaboration, and continuous improvement, which are key for operations roles that drive efficiency and effectiveness. The global presence suggests opportunities for exposure to diverse markets.

📈 Career & Growth Analysis

Operations Career Level: This role is classified as a mid-to-senior level position (5-10 years of experience). It requires a blend of specialized technical skills in front-end development and design systems, along with the ability to influence processes and collaborate effectively across functions. The "Engineer" title suggests a focus on building and maintaining systems, rather than pure strategic design.

Reporting Structure: The UX Design Engineer will likely report to an Engineering Manager, a Head of Front-End Engineering, or a Product Development Lead. They will work closely with UX Designers and Product Managers.

Operations Impact: This role has a direct impact on operational efficiency and product quality by:

• Streamlining Development: A well-maintained design system and efficient component library reduce development time and costs, enabling faster iteration and deployment.

• Ensuring Consistency & Quality: Standardized components and design patterns lead to more consistent, reliable, and high-quality user experiences across all products.

• Enhancing Collaboration: A strong design system acts as a single source of truth, improving communication and collaboration between design and engineering teams.

• Driving Scalability: The design system's architecture is crucial for the scalability of Coates Group's digital solutions as they expand their product offerings and global reach.

Growth Opportunities:

• Technical Specialization: Deepen expertise in advanced front-end architecture, design systems, performance optimization, and accessibility.

• Team Leadership: Potentially move into a Lead UX Design Engineer or Front-End Engineering Lead role, mentoring junior team members and taking ownership of larger system initiatives.

• Cross-Functional Transition: With strong understanding of product development, there could be opportunities to move into Product Management or specialized roles within Engineering Operations.

• Impact on Global Products: Contribute to the evolution of digital experiences for major global brands, gaining experience with large-scale deployments and diverse user bases.

📝 Enhancement Note: The role offers a clear path for technical growth within front-end engineering and design systems. The "operations impact" section highlights how this technical role contributes to business efficiency, a key aspect for operations professionals. Growth opportunities lean towards technical leadership or expanding into product development leadership.

🌐 Work Environment

Office Type: The job is listed as "Hybrid," indicating a mix of on-site work in Chicago and remote work. This suggests a modern office environment designed for collaboration, with amenities that support both individual focused work and team interaction.

Office Location(s): Chicago, Illinois, United States. This location offers access to a major metropolitan hub with extensive transportation networks, potentially facilitating easier commutes for hybrid employees.

Workspace Context:

• Collaborative Spaces: Expect modern office spaces equipped with meeting rooms, breakout areas, and open-plan zones conducive to collaboration between design, engineering, and product teams.

• Technology-Rich Environment: Access to high-performance workstations, necessary software (Figma, IDEs, Storybook), and robust network infrastructure to support development workflows.

• Team Interaction: Hybrid work model implies structured opportunities for in-person team meetings, design reviews, and brainstorming sessions, balanced with the flexibility of remote work.

• Focus on Innovation: The company culture emphasizes creativity and problem-solving, suggesting an environment that supports experimentation and the adoption of new technologies and methodologies.

Work Schedule:

• While a standard full-time schedule (likely 40 hours/week) is expected, the "Thrive Program" offers flexibility, allowing employees to manage their work hours and arrangement in a way that balances professional responsibilities with personal life. This flexibility is particularly beneficial for roles that require deep focus, such as coding and design system development.

📝 Enhancement Note: The hybrid nature of the role, combined with the "Thrive Program," indicates a company that values employee well-being and flexibility, a common trait in progressive operations-focused companies. Candidates should be prepared to discuss their preference for hybrid work and how they maintain productivity in such an environment.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A recruiter or hiring manager will review applications and conduct an initial screening call to assess basic qualifications, experience, and cultural fit.

• Technical Assessment (Portfolio Review): Candidates will likely be asked to present their portfolio, focusing on specific projects that demonstrate their expertise in design systems, component development, React/TypeScript, and Storybook.

This is a critical stage.

• Technical Interview(s): Expect one or more interviews with engineers and/or design leads. These may include:

  • Code Challenges: Live coding exercises or take-home assignments focusing on React, TypeScript, and UI component creation.
  • System Design Questions: Discussing how to architect and build scalable design systems, manage component libraries, and optimize workflows.
  • Behavioral Questions: Assessing collaboration, problem-solving, and communication skills.

• Final Interview: Potentially a conversation with a senior leader (e.g., Head of Engineering, VP of Product) to discuss strategic alignment and overall fit.

Portfolio Review Tips:

• Curate Strategically: Select 3-5 of your strongest projects that directly align with the job description's requirements, especially those involving design systems, Storybook, React, and TypeScript.

• Showcase Impact: For each project, clearly articulate the problem you solved, your specific contributions, the technologies and processes used, and the measurable outcomes or impact (e.g., improved development speed, reduced bugs, enhanced consistency).

• Highlight Design System Contributions: Detail your experience in building, maintaining, or evolving design systems. Explain your approach to component architecture, documentation, and governance.

• Demonstrate Code Quality: Be ready to walk through code snippets that showcase clean, efficient, and well-documented React/TypeScript code. Emphasize modularity, reusability, and adherence to best practices.

• Address Accessibility & Responsiveness: Explicitly discuss how you incorporated accessibility (WCAG) and responsive design principles into your work, providing concrete examples.

• Storybook Expertise: Show examples of Storybook usage, including component documentation, theming, and interaction testing.

Challenge Preparation:

• Practice React/TypeScript: Refresh your knowledge of core React concepts (hooks, context API, state management) and TypeScript.

• Design System Scenarios: Prepare to discuss how you would handle common design system challenges, such as component versioning, introducing new components, handling design variations, and managing design debt.

• Workflow Optimization Ideas: Think about specific tools, processes, or automation techniques you could implement to improve a design-to-code workflow.

• Behavioral Questions: Prepare STAR method (Situation, Task, Action, Result) responses for questions related to teamwork, problem-solving, handling design disagreements, and managing your workload.

📝 Enhancement Note: The emphasis on a portfolio review with specific project examples is crucial. Candidates should prepare to demonstrate tangible results and a deep understanding of design system principles, not just theoretical knowledge. This stage is critical for evaluating their ability to bridge design and engineering effectively.

🛠 Tools & Technology Stack

Primary Tools:

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

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

• Storybook: An open-source tool for developing, testing, and documenting UI components in isolation.

• Figma: A widely used design tool for creating wireframes, mockups, and prototypes; the source for design-to-code translation.

• HTML5 & CSS3: Foundational web technologies for structuring and styling content.

• JavaScript (ES6+): For dynamic interactivity and logic.

Analytics & Reporting:

CRM & Automation:

Design System Infrastructure:

• Design Tokens: Tools and methodologies for managing design variables (colors, typography, spacing) centrally.

• NPM Packages/Monorepos: Likely used for distributing and managing the design system components within the engineering codebase.

• Version Control: Git (e.g., GitHub, GitLab, Bitbucket) is standard for code management.

📝 Enhancement Note: The tech stack is heavily focused on modern front-end development and design system tooling. Candidates must demonstrate proficiency in React, TypeScript, and Storybook. Understanding how these tools integrate and contribute to efficient development workflows is key.

👥 Team Culture & Values

Operations Values:

• Curiosity & Innovation: Encouraging a mindset of exploration, learning, and finding new ways to solve problems.

• Collaboration & Partnership: Valuing teamwork, open communication, and building strong relationships across departments and with clients.

• Authenticity & Inclusivity: Fostering an environment where individuals can be themselves, and diversity is celebrated and leveraged.

• Expertise & Continuous Improvement: Striving for excellence in their respective fields and a commitment to ongoing learning and evolution.

• Customer Focus: A deep dedication to creating impactful and engaging customer experiences.

Collaboration Style:

• Cross-Functional Integration: The role demands seamless collaboration between design and engineering. Expect a culture that encourages open dialogue and shared ownership of product development.

• Process-Oriented: The emphasis on design systems and workflow optimization suggests a team that values structured approaches and efficiency.

• Feedback Culture: A willingness to give and receive constructive feedback is essential for iterating on designs and code.

• Knowledge Sharing: Encouraging the sharing of best practices, learnings, and technical expertise to elevate the entire team.

📝 Enhancement Note: Coates Group emphasizes values like curiosity, collaboration, authenticity, and continuous improvement. This suggests an environment where operations professionals can thrive by contributing to process enhancements and working effectively with diverse teams to achieve common goals.

⚡ Challenges & Growth Opportunities

Challenges:

• Balancing Design Fidelity with Engineering Constraints: Ensuring that the implemented components perfectly match design intent while adhering to technical feasibility, performance budgets, and scalability requirements.

• Maintaining Design System Scalability: As the company and its product offerings grow, ensuring the design system can adapt and scale without becoming unwieldy or difficult to manage.

• Driving Adoption and Governance: Encouraging widespread adoption of the design system across various product teams and establishing clear governance processes for component updates and contributions.

• Bridging Evolving Technologies: Staying current with the rapid pace of change in front-end technologies, design tools, and best practices to keep the design system relevant and effective.

• Hybrid Work Dynamics: Navigating the complexities of a hybrid work environment to maintain strong team cohesion, effective communication, and consistent productivity.

Learning & Development Opportunities:

• Advanced Design System Architecture: Opportunities to learn and apply advanced patterns for creating scalable, maintainable, and highly performant design systems.

• Deep Dive into React/TypeScript: Further specialization in complex React patterns, state management solutions, and advanced TypeScript features.

• Accessibility Expertise: Becoming a subject matter expert in web accessibility, potentially leading initiatives to ensure WCAG compliance across the organization.

• Process Improvement Methodologies: Developing skills in identifying bottlenecks and implementing solutions to optimize development workflows, potentially drawing from operations best practices.

• Cross-Functional Exposure: Gaining a deeper understanding of product management, UX research, and broader engineering challenges through close collaboration.

📝 Enhancement Note: The challenges are typical for roles involving design systems and hybrid work. The growth opportunities are substantial, offering deep technical specialization and the chance to influence process and product strategy, which aligns well with career progression in operations-focused roles.

💡 Interview Preparation

Strategy Questions:

• Design System Strategy: "How would you approach building a new component library from scratch for a growing SaaS product? What are the key considerations for scalability and maintainability?" (Focus on process, governance, and technical architecture).

• Workflow Optimization: "Describe a time you identified an inefficiency in a design-to-code workflow and what steps you took to address it. What tools or processes did you implement?" (Highlight problem-solving, initiative, and impact).

• Collaboration Scenarios: "Imagine a situation where a product team wants to deviate significantly from the design system. How would you handle this conversation and what arguments would you use to maintain system integrity?" (Focus on communication, negotiation, and understanding trade-offs).

Company & Culture Questions:

• Company Vision: "Coates Group's purpose is 'Creating Connections. Empowering Partnerships. Always Evolving.' How do you see a robust design system contributing to this purpose?" (Connect your work to the company's mission).

• Hybrid Work Philosophy: "What is your approach to working effectively in a hybrid environment, and how do you ensure strong collaboration with team members who may be remote or in the office?" (Demonstrate adaptability and communication skills).

• Values Alignment: "Our values include curiosity, collaboration, and authenticity. Can you provide an example of how you've embodied one of these values in a previous role?" (Showcase cultural fit).

Portfolio Presentation Strategy:

• Narrative-Driven: Frame your portfolio projects as stories with a clear beginning (problem), middle (your solution and process), and end (impact/results).

• Quantify Impact: Whenever possible, use metrics to demonstrate the success of your work. For example, "Reduced component development time by 20%" or "Achieved 100% WCAG AA compliance for critical components."

• Show, Don't Just Tell: Use visual aids (screenshots, live demos, Storybook links) to illustrate your work. Be prepared to screen-share and walk through code or design system examples.

• Focus on Process: For each project, explain how you achieved the outcome. Detail your thought process, the tools you used, and the challenges you overcame. This is where your operations mindset will shine.

• Tailor to the Role: Emphasize projects that directly showcase your skills in React, TypeScript, Storybook, Figma-to-code, and design system stewardship.

📝 Enhancement Note: The interview process is designed to assess both technical prowess and operational thinking. Candidates should prepare to articulate their process, demonstrate measurable impact, and align their skills with Coates Group's mission and values. The portfolio presentation is a key opportunity to showcase this.

📌 Application Steps

To apply for this UX Design Engineer position:

• Submit Application: Navigate to the official careers page or the provided Lever application link and submit your resume and any requested materials.

• Portfolio Customization: Ensure your resume and cover letter (if applicable) clearly highlight your experience with React, TypeScript, Storybook, design systems, and workflow optimization. Tailor your language to match the job description's keywords.

• Resume Optimization: Emphasize achievements and quantifiable results related to efficiency improvements, code quality, and successful design system implementation. Use operations-relevant keywords like "process optimization," "scalability," "workflow automation," and "cross-functional collaboration."

• Interview Preparation: Thoroughly review the "Interview Preparation" section above. Practice articulating your process, demonstrating your technical skills, and showcasing your portfolio projects with a focus on impact and efficiency.

• Company Research: Deepen your understanding of Coates Group's products, market position, and company culture by exploring their website, recent news, and LinkedIn presence. Consider how your role contributes to their overall mission of "Creating Connections."

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

---