Product Engineer (UX/UI)

📍 Job Overview

Job Title: Product Engineer (UX/UI)

Company: Gradial

Location: Seattle, WA

Job Type: Full-time

Category: Product Engineering / Front-End Development

Date Posted: 2026-07-29

Experience Level: Mid-level (2-5 years)

Remote Status: On-site

🚀 Role Summary

• Drive the development and implementation of high-quality, interactive UI components within Gradial's AI-powered marketing operations platform, ensuring seamless user experiences from concept to delivery.

• Collaborate closely with cross-functional teams, including Product, Engineering, and AI Researchers, to iterate on user interfaces, championing accessibility, performance, and usability best practices.

• Contribute to the definition and evolution of a scalable design system, maintaining consistency and efficiency across Gradial’s entire product suite.

• Develop rapid prototypes using modern front-end technologies to validate product concepts, test usability, and iterate on innovative design solutions.

• Advocate for user-centric design principles, leveraging user feedback and usability testing to continuously enhance the product experience within a fast-paced, AI-native environment.

📝 Enhancement Note: This role bridges product engineering and UX/UI design, focusing on the front-end implementation of an AI-powered marketing operations system. The emphasis is on building intuitive and responsive interfaces that leverage AI capabilities, requiring a strong understanding of both technical development and user-centered design principles.

📈 Primary Responsibilities

• Own the end-to-end development and implementation of robust, interactive UI components, ensuring they meet high standards for quality, performance, and user experience.

• Actively participate in design reviews and sprint planning, providing technical input and collaborating with designers and product managers to refine user flows and interface designs.

• Translate complex UI/UX designs into functional, responsive, and accessible web components using TypeScript, React, and Next.js.

• Develop and maintain a comprehensive design system, including component libraries, style guides, and documentation, to ensure product consistency and accelerate development cycles.

• Create and iterate on interactive prototypes to quickly test new features, gather user feedback, and validate design hypotheses before full-scale development.

• Define and collaborate on API specifications and data structures with backend engineers to ensure seamless integration and optimal front-end performance.

• Conduct thorough code reviews, providing constructive feedback to peers and ensuring adherence to coding standards and best practices.

• Stay abreast of emerging front-end technologies, UI/UX methodologies, and AI trends to propose and implement innovative solutions that enhance the Gradial platform.

• Troubleshoot and resolve front-end bugs and performance issues, ensuring a stable and reliable user experience.

• Contribute to defining and upholding accessibility standards (WCAG), ensuring the platform is usable by all individuals.

📝 Enhancement Note: The responsibilities highlight a blend of hands-on development, design system ownership, and cross-functional collaboration, emphasizing the product engineer's role in translating user needs and AI capabilities into tangible product experiences.

🎓 Skills & Qualifications

Education: Bachelor's degree in Computer Science, Human-Computer Interaction, Design, or a related field, or equivalent practical experience.

Experience: 3+ years of professional experience in product engineering, front-end development, or a closely related role, with a focus on building interactive web applications.

Required Skills:

• Proven proficiency in modern front-end development technologies, including TypeScript, React, and Next.js.

• Strong experience in building and maintaining scalable design systems and component libraries.

• Demonstrated ability to develop rapid, interactive prototypes for user experience validation.

• Deep understanding of web performance optimization techniques and their practical application.

• In-depth knowledge of web accessibility standards (WCAG) and experience implementing accessible features.

• Expertise in responsive design principles and cross-browser compatibility.

• Experience collaborating with backend engineers on API definitions and data structures.

• A strong portfolio showcasing a range of interactive and user-friendly web applications, with clear examples of UI/UX contributions.

• Obsessive attention to detail in user experiences and a commitment to delivering polished, high-quality interfaces. Preferred Skills:

• Experience with UI/UX design principles and user research methodologies.

• Familiarity with AI concepts and their application in user interface design.

• Experience with state management libraries (e.g., Redux, Zustand).

• Knowledge of testing frameworks for front-end applications (e.g., Jest, React Testing Library).

• Understanding of CI/CD pipelines for front-end deployment.

• Experience working in a fast-paced, startup environment.

📝 Enhancement Note: The required skills heavily emphasize front-end development expertise with specific technologies, alongside a critical need for portfolio evidence of UI/UX contributions and a deep understanding of web standards.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• A curated collection of projects demonstrating your ability to build interactive, user-friendly web applications with a focus on UI/UX.

• Case studies that clearly articulate the problem, your design/development process, the technical solutions implemented, and the impact on user experience or business metrics.

• Examples of contributions to design systems or component libraries, showcasing reusability, scalability, and consistency.

• Demonstrations of responsive design implementations across various devices and screen sizes.

• Evidence of applying web performance optimization techniques and accessibility standards (WCAG) in your work. Process Documentation:

• Be prepared to discuss your process for translating design mockups and user requirements into functional code.

• Showcase your approach to prototyping, user testing, and iterating on designs based on feedback.

• Detail your methods for collaborating with designers, product managers, and backend engineers to ensure cohesive product development.

• Articulate your strategy for maintaining code quality, implementing best practices, and contributing to a scalable design system.

📝 Enhancement Note: The portfolio requirements are central to this role, demanding tangible proof of UI/UX development skills, design system contributions, and a well-defined process for translating concepts into functional, user-centric interfaces.

💵 Compensation & Benefits

Salary Range: $120,000 – $170,000 annually.

Explanation of Range: This range is based on industry benchmarks for Product Engineers with 3+ years of experience in the Seattle, WA area, considering the specific technology stack (React, Next.js, TypeScript) and the specialized nature of AI-powered platform development. The final compensation will be determined by factors including the candidate's specific experience, skill set, and overall qualifications.

Benefits:

• Comprehensive medical, dental, and vision insurance.

• 401K retirement plan with potential company match (details to be confirmed).

• Generous paid time off (PTO) and paid sick leave.

• Employee wellness programs designed to support overall well-being.

• Eligibility for performance-based bonuses, rewarding individual and company achievements.

• Meaningful equity awards, offering a stake in the company's success.

Working Hours: Standard full-time work, typically 40 hours per week, with flexibility offered around daily start and end times to accommodate work-life balance, especially given the on-site requirement.

📝 Enhancement Note: The salary range is provided, reflecting mid-level experience in a high-cost-of-living tech hub. The benefits package is comprehensive, typical for a growth-stage tech company.

🎯 Team & Company Context

🏢 Company Culture

Industry: Software / Marketing Technology (Martech) / Artificial Intelligence. Gradial operates at the intersection of marketing operations, AI, and workflow automation, aiming to revolutionize how marketers execute campaigns and manage content.

Company Size: The provided data does not specify company size, but the mention of "leading investors" and "fast-paced environment" suggests a growth-stage startup or a well-funded early-stage company, likely ranging from 50-200 employees. This size implies a dynamic, collaborative, and often agile operational structure where individual contributions have significant visibility.

Founded: The founding date is not provided. However, the company's focus on "AI-native content operations" and "category-defining AI infrastructure" indicates a modern, forward-thinking organization built around cutting-edge technology.

Team Structure:

• The Product Engineering team likely consists of engineers who specialize in front-end development, UI/UX implementation, and potentially integration with AI model outputs.

• This role will report into a Product Engineering Manager or Head of Engineering, working closely with Product Managers, UX/UI Designers, and AI Researchers.

• Cross-functional collaboration is a cornerstone, with regular interaction with backend engineers to define APIs and data structures, and with AI specialists to understand and integrate AI capabilities into the user experience. Methodology:

• Data-Driven Iteration: Utilizing user feedback and performance metrics to continuously refine UI/UX and product features.

• Agile Development: Employing agile methodologies for rapid development cycles, prototyping, and iterative improvements.

• First Principles Thinking: Solving complex problems by breaking them down to their fundamental components, particularly relevant given the AI focus.

• User-Centric Design: Prioritizing the user experience in all development decisions, ensuring the platform is intuitive and powerful.

Company Website: gradial.com

📝 Enhancement Note: The company culture is described as fast-paced, ownership-driven, and focused on innovation, particularly in AI. The team structure emphasizes collaboration across technical disciplines, with a strong user-centric approach.

📈 Career & Growth Analysis

Operations Career Level: This role is a mid-level Product Engineer (UX/UI), positioned to take significant ownership of front-end development and user experience implementation. It requires a solid foundation in modern web technologies and a growing ability to influence design and product direction. The role is instrumental in translating the company's AI vision into a tangible, user-friendly product.

Reporting Structure: The Product Engineer will likely report to a Product Engineering Manager or a Lead Engineer. They will work in close collaboration with Product Managers, UX/UI Designers, and AI Researchers, forming a core product development pod.

Operations Impact: The Product Engineer's impact is direct and critical to the success of Gradial's AI-powered marketing operations platform. By creating intuitive and effective user interfaces, they enable marketers to leverage complex AI capabilities more efficiently, directly contributing to the company's value proposition of reducing execution time and focusing human talent on higher-value tasks. Their work directly influences user adoption, satisfaction, and the overall perception of the platform's power and usability.

Growth Opportunities:

• Technical Specialization: Deepen expertise in advanced front-end frameworks (React, Next.js), state management, performance optimization, and AI integration within UIs.

• Design System Leadership: Grow into a lead role for the design system, influencing its architecture, scalability, and adoption across the engineering team.

• Product Influence: Develop a stronger understanding of product strategy and user needs, contributing more significantly to product roadmap decisions and feature conceptualization.

• AI Literacy & Application: Gain deeper insights into AI technologies and learn to apply them creatively to enhance user experiences and product functionality.

• Mentorship: Progress to mentoring junior engineers, sharing knowledge on front-end best practices and UI/UX principles.

📝 Enhancement Note: The growth trajectory for this role emphasizes deepening technical expertise, taking on leadership within front-end architecture, and increasing influence on product strategy, particularly concerning AI integration.

🌐 Work Environment

Office Type: Gradial is described as an "on-site" position, suggesting a traditional office environment. However, the company also mentions "flexibility and ownership," which could imply a hybrid model or flexible daily hours within the office. The emphasis on a "fast-paced environment with flexibility" suggests a modern, dynamic office space designed for collaboration and innovation.

Office Location(s): Seattle, WA. This location places the engineer within a major technology hub, offering access to a vibrant tech community and talent pool.

Workspace Context:

• Collaborative Spaces: The office is likely designed with collaborative zones, meeting rooms, and open areas to facilitate teamwork and cross-functional interaction between Product, Engineering, Design, and AI teams.

• Technology Enabled: Expect access to modern development tools, high-performance workstations, and potentially dedicated environments for AI research and development, supporting the "AI-first" company ethos.

• Innovation Hub: The workspace will likely foster an environment of continuous learning and experimentation, encouraging engineers to explore new technologies and approaches to building AI-powered experiences.

Work Schedule: Standard full-time, likely with some flexibility in daily hours, but requiring presence in the Seattle office. The focus is on impact and ownership, suggesting that while hours are important, the quality and effectiveness of work are paramount.

📝 Enhancement Note: The on-site requirement in Seattle, combined with mentions of flexibility, suggests a modern office environment geared towards collaboration and innovation, within a key tech ecosystem.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A brief call with a recruiter to assess basic qualifications, experience alignment, and cultural fit.

• Technical Interview (Portfolio Review): A deep dive into your portfolio. Expect to present 1-2 key projects, discussing your role, technical challenges, design decisions, and the impact of your work. This is where your understanding of UI/UX, React, TypeScript, and design systems will be thoroughly assessed.

• Coding Challenge/Take-Home Assignment: Potentially a timed coding exercise or a take-home project focused on front-end development, UI component creation, or integrating with a mock API. This will gauge your practical coding skills and problem-solving approach.

• Cross-Functional Interviews: Discussions with Product Managers, Designers, and potentially AI Researchers to evaluate your collaboration style, communication skills, and ability to translate complex requirements into user-friendly interfaces.

• Hiring Manager Interview: A final conversation to discuss career goals, team fit, and overall alignment with Gradial's mission and values.

Portfolio Review Tips:

• Select Wisely: Choose projects that best showcase your UI/UX development skills, proficiency in React/TypeScript/Next.js, and experience with design systems or complex interactive components.

• Tell a Story: For each project, clearly articulate the problem, your specific contributions, the technical challenges overcome, and the measurable impact or user benefits. Focus on your thought process and decision-making.

• Highlight Process: Be prepared to walk through your development workflow, from understanding requirements to implementation, testing, and iteration.

• Showcase Design System Work: If you have experience with design systems, be ready to explain your approach to component creation, documentation, and ensuring consistency.

• Address AI Nuances: Given Gradial's AI focus, be ready to discuss how you've approached user experiences for AI-driven features or how you would approach them, emphasizing usability and transparency.

Challenge Preparation:

• Practice Core Technologies: Revisit React, TypeScript, Next.js fundamentals, and common patterns for component development, state management, and API integration.

• Simulate Scenarios: Practice building responsive UI components and consider how you would optimize them for performance and accessibility.

• Prepare for Design System Questions: Understand the principles of scalable design systems and how to build reusable, maintainable components.

• AI Integration Thinking: Consider how AI might enhance user interfaces and how you would design for those interactions, focusing on clarity and user control.

📝 Enhancement Note: The interview process is rigorous, with a strong emphasis on portfolio demonstration and practical application of skills. Candidates should be prepared to articulate their process and decision-making clearly.

🛠 Tools & Technology Stack

Primary Tools:

• Front-End Frameworks: React, Next.js.

• Languages: TypeScript, JavaScript.

• Styling: CSS/Sass, potentially CSS-in-JS solutions or utility-first CSS frameworks (e.g., Tailwind CSS).

• State Management: Libraries like Redux, Zustand, or React Context API.

• Build Tools: Webpack, Vite, or similar.

Analytics & Reporting:

• Web Analytics: Tools like Google Analytics, Amplitude, or Mixpanel for tracking user behavior and feature adoption.

• Performance Monitoring: Browser developer tools, Lighthouse, and potentially specialized performance monitoring services.

• Error Tracking: Sentry, Bugsnag, or similar for identifying and resolving front-end issues.

CRM & Automation:

• While not a direct tool for this role, understanding how front-end interactions feed into marketing automation platforms and CRMs (e.g., Salesforce, HubSpot) is beneficial for context.

• API Integration Tools: Familiarity with tools and concepts for integrating with RESTful APIs or GraphQL.

📝 Enhancement Note: The technology stack is modern and focused on building scalable, high-performance front-end applications within an AI-driven product. Proficiency in React, Next.js, and TypeScript is paramount.

👥 Team Culture & Values

Operations Values:

• AI Literacy: Embracing AI as a core tool for problem-solving, innovation, and scaling operations, encouraging engineers to explore and apply AI in their work.

• Customer Obsession: A deep focus on understanding and meeting the needs of marketers and creatives, ensuring the platform delivers tangible value and an exceptional user experience.

• High Ownership/Accountability: Taking full responsibility for one's work, from concept to delivery, and proactively driving solutions and improvements.

• Bias for Action: A proactive approach to problem-solving and execution, moving with urgency and making progress even with incomplete information.

• Continuous Improvement: A drive to be "1% better than the day before," constantly seeking to refine processes, enhance product quality, and build towards greatness in both individual contributions and team output.

Collaboration Style:

• Curious and Direct Communication: Encouraging open, honest, and constructive dialogue, assuming good intentions while seeking clarity and understanding.

• Cross-Functional Synergy: Working closely with Product, Design, and AI teams to ensure alignment and a unified vision for the product.

• Feedback Exchange: Actively seeking and providing feedback to foster a culture of learning and continuous improvement.

• Knowledge Sharing: A commitment to sharing insights, best practices, and learnings across the team to elevate collective expertise.

📝 Enhancement Note: The company culture emphasizes innovation, ownership, and a strong user focus, underpinned by AI literacy and a collaborative, learning-oriented approach.

⚡ Challenges & Growth Opportunities

Challenges:

• Balancing Innovation with Stability: Developing cutting-edge AI-powered features while maintaining a stable, performant, and accessible user interface.

• Rapidly Evolving AI Landscape: Staying current with AI advancements and effectively integrating new capabilities into the platform's UX.

• Scalability of Design Systems: Ensuring the design system can effectively support rapid product expansion and new feature development.

• Cross-Functional Alignment: Effectively bridging the gap between complex AI research, product vision, and front-end implementation.

Learning & Development Opportunities:

• Advanced AI-UI Integration: Opportunities to explore and implement novel ways AI can enhance user interfaces and workflows.

• Design System Architecture: Potential to lead or significantly contribute to the evolution of a complex, scalable design system.

• Performance & Accessibility Mastery: Deepen expertise in optimizing web applications for speed and ensuring universal access.

• Industry Exposure: Access to conferences, workshops, and learning resources related to front-end development, UI/UX, and AI.

• Mentorship: Opportunities to learn from experienced engineers and potentially mentor junior team members as the company grows.

📝 Enhancement Note: The challenges are tied to the company's innovative AI focus and growth stage, offering significant opportunities for professional development in cutting-edge areas of software engineering.

💡 Interview Preparation

Strategy Questions:

• "Describe a time you had to implement a complex UI component. What were the challenges, and how did you approach them using React and TypeScript?" (Focus on process, technical solutions, and problem-solving.)

• "How would you design a user interface for an AI feature that suggests content optimizations? What are the key UX considerations for AI-driven suggestions?" (Assess understanding of AI-UX, user control, and transparency.)

• "Walk us through your process for ensuring web accessibility (WCAG) in your front-end development. Provide specific examples." (Demonstrate knowledge of accessibility standards and practical implementation.) Company & Culture Questions:

• "What interests you about Gradial's mission and our approach to AI-powered marketing operations?" (Show research and alignment with company vision.)

• "How do you approach collaboration with designers and product managers? Describe a situation where you had to advocate for a technical or UX decision." (Evaluate teamwork and communication skills.)

• "Given our values of 'AI Literacy' and 'Bias for Action,' how would you apply these in your day-to-day work as a Product Engineer?" (Connect personal work style with company values.) Portfolio Presentation Strategy:

• Structure Your Narrative: For each project, clearly define the problem, your role, the technical stack, your specific contributions, challenges faced, solutions implemented, and the resulting impact (user experience improvements, performance gains, etc.).

• Show, Don't Just Tell: Use live demos or well-annot