BU57P2 UI Developer

📍 Job Overview

Job Title: UI Developer

Company: American Chemical Society

Location: Washington, DC, USA

Job Type: FULL_TIME

Category: Digital Product & Experience / Front-End Development

Date Posted: 2026-05-29

Experience Level: Mid-Level (4+ years)

Remote Status: Hybrid (2 days in office per week)

🚀 Role Summary

• Develop and implement high-quality, responsive, and accessible front-end user interfaces for ACS digital platforms.

• Translate UX/UI designs, wireframes, and prototypes into production-ready code, adhering to design system standards.

• Build and maintain reusable UI components and front-end patterns within an enterprise Content Management System (CMS), specifically Adobe Experience Manager (AEM).

• Collaborate closely with UX/UI designers, UX researchers, content strategists, product managers, and backend developers to deliver exceptional digital experiences.

• Ensure all digital products meet stringent web accessibility standards, including WCAG 2.2 AA and Section 508 requirements.

📝 Enhancement Note: This role is positioned within the Digital Product & Experience Team of the ACS Communications Division, focusing on enhancing user interactions and delivering value across digital channels. The emphasis on AEM, accessibility, and collaboration with design and product teams indicates a role that bridges technical development with user-centric design and content strategy.

📈 Primary Responsibilities

• Develop responsive, accessible, and performant front-end interfaces utilizing HTML5, CSS3, and JavaScript, adhering to modern web standards and best practices.

• Translate wireframes, high-fidelity designs, and prototypes from tools like Figma or Adobe XD into accurate, production-ready UI code.

• Build, maintain, and enhance reusable UI components, templates, and front-end patterns within Adobe Experience Manager (AEM).

• Actively contribute to and ensure consistency with the organization’s design system, bridging design assets and front-end implementation.

• Conduct thorough front-end Quality Assurance (QA) to verify visual accuracy, usability, accessibility, performance, and consistency across various browsers and devices.

• Troubleshoot and resolve UI issues identified during QA or reported by users across different browsers, devices, and CMS templates.

• Participate actively in Agile ceremonies, including sprint planning, design reviews, backlog refinement sessions, and technical discussions.

• Document front-end patterns, CMS component usage, implementation guidelines, and UI best practices for internal teams to foster consistency and knowledge sharing.

• Stay abreast of emerging trends in front-end development, CMS best practices, accessibility standards, and AI-assisted development tools to drive continuous improvement.

📝 Enhancement Note: The responsibilities highlight a hands-on development role with a strong emphasis on collaboration, quality assurance, and adherence to established design and accessibility standards. The mention of AEM and design systems points to a need for experience in structured content delivery and component-based development.

🎓 Skills & Qualifications

Education: Bachelor's degree in Computer Science, Web Development, Digital Media, Interaction Design, Human-Computer Interaction, or equivalent professional experience.

Experience: 4+ years of experience in front-end development, UI development, or related web development roles.

Required Skills:

• Strong proficiency in HTML5, CSS3, and JavaScript, with a deep understanding of modern front-end development practices.

• Proven experience with responsive design principles, mobile-first development strategies, and cross-browser compatibility considerations.

• Demonstrated experience in translating design files from tools like Figma or Adobe XD into accurate front-end implementations.

• Experience working with enterprise Content Management Systems (CMS) such as Adobe Experience Manager (AEM), Adobe Magento Commerce, WordPress, or similar platforms.

• Solid understanding and practical application of web accessibility standards, including WCAG 2.2 AA and Section 508 requirements.

• Experience with design systems, component libraries, reusable UI patterns, and front-end frameworks.

• Familiarity with APIs, JSON data structures, design tokens, headless CMS concepts, and component-based architecture.

• Proficiency in CSS architecture, reusable styles, and scalable front-end patterns.

• Experience with front-end build tools and workflows, including NPM, Vite, Webpack, or comparable tools.

• Familiarity with Agile methodologies, such as Scrum or Kanban.

• Strong attention to detail, excellent interpersonal skills, and a proven ability to collaborate effectively within a team.

• A growth mindset, demonstrating curiosity for improving user experience, front-end quality, and development workflows, with a proactive approach to innovation.

Preferred Skills:

• Experience utilizing AI-assisted coding tools such as GitHub Copilot, Cursor, ChatGPT, Claude, or similar for enhanced development speed, code quality, prototyping, testing, or documentation.

• Experience with modern JavaScript frameworks or libraries like React, Vue, Angular, or Web Components.

• Experience in performance optimization, understanding Core Web Vitals, implementing SEO-friendly front-end solutions, and utilizing semantic HTML.

• Familiarity with analytics or behavioral insight platforms, including Adobe Analytics, Google Analytics, ContentSquare, or similar tools.

📝 Enhancement Note: The "Required" skills list is extensive and covers core front-end technologies, CMS experience, accessibility, and design systems. The "Highly Preferred" section points towards candidates who are forward-thinking, embracing AI tools and modern JavaScript frameworks, and have experience with performance and analytics, which are increasingly critical for digital product success. The portfolio requirement is a key differentiator.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Showcase a range of development projects that demonstrate your ability to translate complex designs into functional, responsive, and accessible web interfaces.

• Include examples of reusable UI components, design system implementation, and front-end patterns you have developed.

• Present case studies that detail your process, including wireframing, prototyping, coding, and QA, highlighting problem-solving approaches and final outcomes.

• Demonstrate experience with enterprise CMS platforms, ideally showing how you've built or extended components within systems like AEM.

Process Documentation:

• Provide examples of how you document your front-end development process, including implementation notes, component usage guides, and UI best practices.

• Show evidence of your participation in Agile workflows, such as contributions to sprint planning, design reviews, or backlog refinement.

• Illustrate your approach to front-end QA, including methodologies for testing across browsers, devices, and CMS templates.

📝 Enhancement Note: The emphasis on a portfolio and process documentation is crucial for this role. Candidates should prepare to showcase not just finished products but also the methodology, problem-solving, and collaborative aspects of their work, particularly in the context of design systems and accessibility.

💵 Compensation & Benefits

Salary Range: $95,000 - $115,000 per year.

Benefits:

• Paid vacation leave

• Paid sick leave

• Paid holidays

• Health insurance

• Flexible Spending Account (FSA) or Health Care Savings Account (HSA)

• Dental insurance

• Life insurance

• Vision insurance

• Retirement benefits

• Short-term disability

• Long-term disability

• 4-week work from anywhere policy

• Additional benefits may apply based on skills, experience, and location.

Working Hours: Standard full-time hours (likely 40 hours per week), with a hybrid work arrangement allowing for remote work for the majority of the week.

📝 Enhancement Note: The provided salary range is specific to Washington, DC, and reflects mid-level developer compensation. The comprehensive benefits package is standard for a professional organization like the American Chemical Society. The "4-week work from anywhere" policy is a notable perk for flexibility.

🎯 Team & Company Context

🏢 Company Culture

Industry: Professional Association / Scientific Publishing & Services

Company Size: American Chemical Society is a large organization, likely employing over 1,000 individuals globally, indicating a well-established structure with significant resources.

Founded: The American Chemical Society was founded in 1876, signifying a long history and deep-rooted presence in the chemical sciences community.

Team Structure: The role is within the Digital Product & Experience (DPX) Team, part of the ACS Communications Division. This team likely comprises a mix of UX/UI designers, UX researchers, content strategists, product managers, and front-end developers, fostering cross-functional collaboration. The reporting structure would likely place this UI Developer under a Digital Product Manager or a Lead Front-End Developer.

Methodology: The DPX team operates within an Agile framework, focusing on user-centered design, continuous improvement, and data-driven insights to enhance digital experiences. Collaboration with backend AEM developers suggests an integrated approach to content management and front-end delivery.

Company Website: https://www.acs.org/

📝 Enhancement Note: ACS's mission in communicating the role of chemical sciences suggests a culture valuing scientific advancement, education, and public outreach. The DPX team's focus on user experience implies a commitment to making complex scientific information accessible and engaging through digital platforms.

📈 Career & Growth Analysis

Operations Career Level: This UI Developer role is positioned at a mid-level, requiring 4+ years of experience. It involves significant contribution to digital product development, component building, and adherence to design systems and accessibility standards. The role is individual contributor focused but requires strong collaboration.

Reporting Structure: The UI Developer will likely report to a Digital Product Manager or a Lead Front-End Developer within the DPX team. Close collaboration is expected with UX/UI designers, UX researchers, content strategists, and backend AEM developers.

Operations Impact: The UI Developer's work directly impacts the user experience of ACS.org and other digital products. By ensuring interfaces are intuitive, accessible, and visually consistent with brand standards, they contribute to the organization's mission of communicating the value of chemistry and serving its constituents effectively. High-quality front-end development enhances user engagement, information accessibility, and overall satisfaction with ACS digital offerings.

Growth Opportunities:

• Skill Development: Opportunity to deepen expertise in AEM component development, advanced CSS architectures, modern JavaScript frameworks (if preferred), and cutting-edge accessibility practices.

• Design System Contribution: Potential to contribute more significantly to the evolution and maintenance of the organization's design system.

• Technical Leadership: As experience grows, opportunities may arise to mentor junior developers, lead specific front-end initiatives, or specialize in areas like performance optimization or accessibility auditing.

• Cross-functional Exposure: Gaining deeper insights into UX research, content strategy, and product management through close collaboration.

📝 Enhancement Note: The role offers a solid foundation for a front-end developer focused on enterprise web platforms and user experience within a large, established organization. Growth is likely to come from deepening technical expertise and contributing to process improvements within the digital product lifecycle.

🌐 Work Environment

Office Type: The American Chemical Society operates on a hybrid work model, requiring employees to be in the Washington, DC office for two designated days per week. The remaining days can be worked remotely. This model supports a blend of in-person collaboration and remote flexibility.

Office Location(s): The primary office location for this role is Washington, DC (20036). This central location offers access to professional networks and amenities within the capital city.

Workspace Context:

• The hybrid model allows for a flexible workspace, balancing focused remote work with collaborative in-office sessions.

• The office environment is expected to be professional, supporting teamwork and cross-functional interaction with designers, product managers, and other developers.

• Access to necessary development tools and technologies is implied, supporting efficient workflow.

Work Schedule: A standard full-time work schedule is expected, with flexibility on remote days. The hybrid arrangement (2 days in-office) is a key feature, allowing for dedicated time for focused development work remotely and collaborative activities in the office.

📝 Enhancement Note: The hybrid model is a significant aspect of the work environment, offering flexibility while requiring in-person presence for specific collaboration needs. This structure is common for roles that benefit from both independent work and team interaction.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A review of your resume and portfolio to assess technical skills, experience, and alignment with role requirements.

• Technical Interview(s): Likely to include coding challenges focused on HTML, CSS, and JavaScript, problem-solving scenarios related to UI development, and discussions about your approach to responsive design, accessibility, and CMS integration.

• Portfolio Review: A dedicated session where you will walk through selected projects from your portfolio, explaining your design choices, development process, challenges faced, and solutions implemented. Be prepared to discuss your contributions and the outcomes.

• Team/Hiring Manager Interview: An opportunity to discuss your experience in more detail, assess your fit with the team's collaborative style, and understand your approach to problem-solving and growth.

• Final Interview: Potentially with a senior leader to discuss overall fit and career aspirations.

Portfolio Review Tips:

• Curate Strategically: Select 2-3 projects that best showcase your proficiency in HTML, CSS, JavaScript, responsive design, accessibility, and AEM component development.

• Highlight Process: For each project, clearly articulate the problem, your role, the design and development process, the tools and technologies used, challenges overcome, and measurable outcomes or impact.

• Demonstrate Accessibility: Explicitly call out how you addressed accessibility standards (WCAG 2.2 AA, Section 508) in your projects.

• Showcase Reusability: If possible, include examples of reusable components or design system elements you've created.

• Be Ready to Code: Be prepared for live coding exercises or to discuss code snippets from your portfolio.

Challenge Preparation:

• Front-End Fundamentals: Brush up on core HTML, CSS (including Flexbox, Grid, responsive techniques), and modern JavaScript (ES6+).

• Accessibility Auditing: Familiarize yourself with common accessibility issues and how to test for them using browser developer tools and accessibility checkers.

• CMS Concepts: Understand how components are built and managed within an enterprise CMS like AEM.

• Agile Understanding: Be ready to discuss your experience working in Agile teams and your role in ceremonies.

📝 Enhancement Note: The interview process will heavily weigh practical skills and demonstrated experience. A strong, well-documented portfolio that emphasizes process and outcomes, especially related to AEM and accessibility, will be critical for success.

🛠 Tools & Technology Stack

Primary Tools:

• Core Languages: HTML5, CSS3, JavaScript (modern standards)

• CMS: Adobe Experience Manager (AEM) - essential for component development and templating.

• Design Tools: Figma, Adobe XD - for translating designs into code.

• Build Tools: NPM, Vite, Webpack - for managing front-end workflows.

• Version Control: Git - for code management and collaboration.

Analytics & Reporting:

CRM & Automation:

• While not explicitly mentioned, understanding how front-end integrates with backend systems and APIs is crucial. Experience with headless CMS concepts and API integration is beneficial.

📝 Enhancement Note: The technology stack is heavily focused on front-end development within an enterprise CMS environment. Proficiency in AEM is a key differentiator, alongside standard web development tools and a willingness to adapt to newer technologies like AI-assisted coding tools.

👥 Team Culture & Values

Operations Values:

• User-Centricity: A strong focus on creating intuitive, accessible, and valuable digital experiences for users.

• Collaboration: Emphasis on teamwork, open communication, and cross-functional partnership with design, product, and development teams.

• Quality & Craftsmanship: Commitment to producing high-quality, maintainable, and performant code that adheres to design and accessibility standards.

• Continuous Improvement: A growth mindset, encouraging learning, experimentation, and proactive efforts to enhance development workflows, code quality, and user experience.

• Innovation: Openness to adopting new technologies and methodologies, including AI-assisted development tools, to drive efficiency and effectiveness.

Collaboration Style:

• Cross-functional Integration: Expect close collaboration with designers for visual fidelity, UX researchers for user insights, content strategists for information architecture, and backend developers for seamless integration.

• Agile Ceremonies: Active participation in sprint planning, stand-ups, reviews, and retrospectives to ensure alignment and continuous feedback.

• Design System Adherence & Contribution: Working within and contributing to a shared design system to ensure brand consistency and efficient development.

📝 Enhancement Note: The team culture emphasizes a blend of technical excellence, user empathy, and collaborative problem-solving within an Agile framework. Candidates who thrive in a structured yet dynamic environment will be a good fit.

⚡ Challenges & Growth Opportunities

Challenges:

• Balancing Design Fidelity with Technical Constraints: Translating intricate designs into functional code while respecting CMS limitations and performance budgets.

• Ensuring Consistent Accessibility: Maintaining WCAG 2.2 AA and Section 508 compliance across a complex digital ecosystem and evolving web standards.

• Integrating with AEM: Mastering the nuances of AEM component development and templating to build efficient and maintainable UI elements.

• Keeping Pace with Technology: Continuously learning and adapting to new front-end tools, frameworks, and best practices, including AI-assisted development.

Learning & Development Opportunities:

• Deep Dive into AEM: Opportunities to become an expert in Adobe Experience Manager front-end development.

• Accessibility Specialization: Developing advanced skills in web accessibility auditing, testing, and remediation.

• Design System Evolution: Contributing to the strategic direction and implementation of the organization's design system.

• Modern JavaScript Frameworks: Potential to explore and implement frameworks like React, Vue, or Angular if the organization adopts them for specific projects.

• AI in Development: Experimenting with and integrating AI coding assistants to enhance productivity and code quality.

📝 Enhancement Note: The role presents opportunities to tackle complex technical challenges within a well-defined framework, with ample room for professional growth through specialization and adoption of new technologies.

💡 Interview Preparation

Strategy Questions:

• UI Development Process: "Describe your process for taking a UI design from Figma/XD to a live, production-ready component in AEM. What are the key considerations for responsiveness and accessibility at each stage?"

• Accessibility Implementation: "How do you ensure your front-end code meets WCAG 2.2 AA standards? Can you provide an example of a challenging accessibility requirement you've addressed?"

• AEM Component Development: "What are the best practices for building reusable components in AEM? How do you approach templating and content authoring integration?"

• Collaboration & Communication: "Describe a time you collaborated closely with a designer or UX researcher. How did you ensure alignment and resolve any disagreements?"

• Problem-Solving: "Walk me through a complex UI bug you encountered. How did you diagnose it, and what was your solution?"

Company & Culture Questions:

• "What interests you about the American Chemical Society and its mission?"

• "How do you approach working within a design system? What are your thoughts on its importance?"

• "How do you stay current with front-end development trends and best practices?"

Portfolio Presentation Strategy:

• Structure: For each portfolio piece, follow a narrative: Problem/Goal -> Your Role/Process -> Tools/Tech -> Challenges & Solutions -> Outcome/Impact.

• Focus: Emphasize your contributions, the technical implementation, and how you addressed user needs, design system requirements, and accessibility standards.

• AEM Showcase: If possible, highlight projects involving AEM component development or templating.

• Conciseness: Be prepared to present your key projects within a given timeframe, focusing on the most relevant aspects.

📝 Enhancement Note: Candidates should prepare to articulate their technical skills, problem-solving abilities, collaborative approach, and understanding of AEM and accessibility. The portfolio presentation is a critical component for demonstrating practical application of these skills.

📌 Application Steps

To apply for this UI Developer position:

• Submit your resume, cover letter, and an exemplary portfolio of past professional work, open-source contributions, or personal projects through the provided application link.

• Portfolio Customization: Tailor your portfolio to highlight projects demonstrating proficiency in HTML5, CSS3, JavaScript, responsive design, accessibility (WCAG 2.2 AA, Section 508), and AEM component development. Focus on process and outcomes.

• Resume Optimization: Ensure your resume clearly lists your years of experience, key technical skills (HTML, CSS, JS, AEM, Figma, etc.), and specific achievements related to front-end development and UI implementation. Use keywords from the job description.

• Interview Preparation: Practice articulating your experience with specific examples related to the core responsibilities and required skills. Prepare to walk through your portfolio projects and discuss your problem-solving approach.

• Company Research: Understand the American Chemical Society's mission, its role in the scientific community, and the importance of its digital platforms. Research the Communications Division and the DPX team's goals.

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