Front-end UI designer

Summary

DSFederal is seeking a Front-End UI/UX Designer to support the National Water Prediction Service platform. The role involves designing, prototyping, and implementing accessible, responsive web interfaces that present complex hydrologic, geospatial, mapping, and data visualization information across desktop, tablet, and mobile platforms.

Responsibilities

• Create high-fidelity wireframes, interactive UI prototypes, user flow diagrams, and design specifications in Figma for new NWPS features, including NOAA Atlas 15 interactive charts, Flood Inundation Mapping (FIM) dual-tier public/power-user views, and Western Water Supply dashboards
• Design and implement touch-friendly, adaptive layouts specifically optimized for mobile phones and tablets, ensuring complex map layers, data tables, and time-series hydrographs remain legible and performant on smaller viewports
• Construct dynamic frontend UI components, map control panels (layer toggles, opacity sliders, boundary filters), and interactive chart widgets using HTML5, CSS3/Tailwind, JavaScript/TypeScript, and modern web mapping libraries (MapLibre, OpenLayers, or Esri ArcGIS API for JavaScript)
• Ensure all designed and developed frontend components strictly comply with federal Section 508 and WCAG 2.1 AA accessibility mandates. Incorporate semantic HTML, ARIA live regions, explicit keyboard focus states, and high-contrast color palettes for dynamic graphics
• Establish and maintain a standardized OWP design system and component library, aligning with the U.S. Web Design System (USWDS) and OWP branding guidelines to ensure visual and functional consistency across all web properties
• Analyze user feedback from Integrated Work Teams (IWTs), regional River Forecast Centers (RFCs), and public web forms to identify usability bottlenecks, conduct A/B usability evaluations, and refine navigation hierarchies
• Collaborate closely with full-stack developers, geospatial data engineers, and QA testers in Agile sprint cycles (VLab GitLab/GitHub) to ensure implemented code matches approved Figma designs and satisfies the mandatory =80% statement test coverage requirement

Skills

• Bachelor's Degree in User Experience (UX) Design, Human-Computer Interaction (HCI), Computer Science, Graphic Design, or a related computational/design discipline
• Minimum of 3 to 5 years of professional experience designing and building public-facing web interfaces, data dashboards, or geospatial applications
• Demonstrated portfolio showcasing responsive web designs, interactive data visualizers (charts/maps), design systems, and Figma wireframes for complex data-heavy platforms
• Practical experience applying Section 508 and WCAG 2.1 AA accessibility guidelines to dynamic, canvas- or SVG-heavy web interfaces
• Advanced proficiency in Figma, Canva, Adobe Creative Cloud, user story mapping, and wireframing methodologies
• Strong proficiency in HTML5, CSS3 / SASS / Tailwind CSS, JavaScript (ES6+), TypeScript, and modern frontend frameworks (React, Vue, or Svelte)
• Hands-on experience integrating web mapping frameworks (MapLibre GL, OpenLayers, Leaflet, or Esri ArcGIS JS API) and charting tools (D3.js, Chart.js, or Plotly)
• Expertise in WCAG 2.1 Level AA, Section 508, ARIA attributes, color contrast verification, screen-reader compatibility (JAWS, NVDA), and automated audit tools (Axe Core, WAVE)
• Familiarity with the U.S. Web Design System (USWDS), design token management, and mobile-first responsive design principles
• Proficiency with Git repositories (VLab GitLab / GitHub), component testing frameworks (Jest / Cypress), and Agile issue tracking tools (Jira / VLab Redmine)
• 5+ years preferred

Qualifications

Must Haves

• Bachelor's Degree in User Experience (UX) Design, Human-Computer Interaction (HCI), Computer Science, Graphic Design, or a related computational/design discipline
• Minimum of 3 to 5 years of professional experience designing and building public-facing web interfaces, data dashboards, or geospatial applications
• Demonstrated portfolio showcasing responsive web designs, interactive data visualizers (charts/maps), design systems, and Figma wireframes for complex data-heavy platforms
• Practical experience applying Section 508 and WCAG 2.1 AA accessibility guidelines to dynamic, canvas- or SVG-heavy web interfaces
• Advanced proficiency in Figma, Canva, Adobe Creative Cloud, user story mapping, and wireframing methodologies
• Strong proficiency in HTML5, CSS3 / SASS / Tailwind CSS, JavaScript (ES6+), TypeScript, and modern frontend frameworks (React, Vue, or Svelte)
• Hands-on experience integrating web mapping frameworks (MapLibre GL, OpenLayers, Leaflet, or Esri ArcGIS JS API) and charting tools (D3.js, Chart.js, or Plotly)
• Expertise in WCAG 2.1 Level AA, Section 508, ARIA attributes, color contrast verification, screen-reader compatibility (JAWS, NVDA), and automated audit tools (Axe Core, WAVE)
• Familiarity with the U.S. Web Design System (USWDS), design token management, and mobile-first responsive design principles
• Proficiency with Git repositories (VLab GitLab / GitHub), component testing frameworks (Jest / Cypress), and Agile issue tracking tools (Jira / VLab Redmine)

Nice to Haves

• 5+ years preferred