Ui/ux Designer & Frontend Developer

Job description

Role Overview We are hiring a full-time UI/UX Designer & Frontend Developer to own the design system and help deliver production-quality interfaces across two B2B SaaS products built on a shared modern engineering stack. This is an end-to-end role: User Flow → Wireframe → Figma → Design System → Reusable Components → Production Frontend This is not a design-only role or a generic frontend-development role. You will design in Figma, govern a centrally managed Bootstrap theme and design-token system, and build or work directly with developers on reusable production components. Your role is to keep the designed experience and the shipped experience aligned. You will be the quality bridge between design and production. Engineers should involve you before introducing custom styling, so shared interface decisions remain consistent, scalable, and maintainable. What You’ll Do Design-System Ownership · Own and evolve a centrally governed Bootstrap theme and design-token system across both products. · Define and maintain visual foundations including colours, typography, spacing, radius, buttons, forms, tables, cards, and responsive patterns. · Maintain Figma as the canonical design reference and keep it aligned with production. · Build and maintain reusable Figma component libraries, variants, and responsive layouts. · Extend a shared design system across products with distinct visual identities. · Support configurable and white-label theming when required. · Establish clear standards for shared components versus product-specific treatments. · Review changes affecting shared themes, components, and styling. · Prevent hardcoded visual values and unnecessary local overrides from accumulating in the product. · Document design-system standards and component usage so developers can implement interfaces consistently. The objective is simple: global design changes should be made once at the appropriate theme or token level and propagate consistently throughout the application. Product Design · Translate product requirements, business goals, and user needs into clear user flows and intuitive interfaces. · Create user flows, wireframes, high-fidelity mock-ups, and interactive prototypes in Figma and FigJam. · Design at the component level, not only at the screen level. · Design complex B2B application workflows, including: · Multi-step onboarding · Dashboards · Data tables · Forms · Search and filtering · Approval queues · Role-based interfaces · Status management · Administrative screens · Define relevant UI states, including loading, empty, error, success, validation, and permission-gated states. · Deliver responsive desktop, tablet, and mobile designs, applying sound judgment to workflows that require full mobile support. · Apply strong visual hierarchy, typography, colour, layout, iconography, and interaction-design principles. · Ensure designs follow accessibility and inclusive-design principles. · Work directly with engineers to resolve implementation constraints without compromising design-system consistency. Frontend Implementation · Build and modify production UI using React. · Implement responsive interfaces using Bootstrap, HTML, CSS, and responsive-design frameworks. · Convert approved Figma designs into reusable frontend components. · Implement or pair with frontend developers on important shared components. · Build reusable components rather than page-specific implementations. · Make shared visual changes at the theme or token level, avoiding one-off local CSS overrides where a shared solution is appropriate. · Integrate frontend components with application data and account for real interface states, not only static mock-ups. · Debug responsive, browser, and layout issues. · Validate implementation against approved Figma designs before release and identify discrepancies. · Participate in design reviews, delivery planning, implementation reviews, and cross-functional product discussions. Required Qualifications · 4–7 years of professional experience spanning UI/product design and frontend implementation. · A strong portfolio demonstrating web-application or product design and shipped production UI. · Advanced proficiency in Figma and FigJam, including: · Component libraries · Auto Layout · Variants · Design tokens · Prototyping · Developer handoff · Experience building and maintaining a governed design system used by multiple developers. · Strong understanding of how CSS and component drift occurs, and how to prevent it structurally. · Strong Bootstrap knowledge, including theme architecture and reusable component patterns. · Production experience with React. · Ability to open a production codebase, build or modify a component, and review another developer’s implementation. · Strong HTML, CSS, and responsive-layout skills. · Experience designing complex B2B interfaces such as dashboards, data tables, multi-step forms, and status-driven workflows. · Experience working directly with software engineers throughout implementation. · Strong communication, presentation, collaboration, and problem-solving skills. Portfolio is required. Applications without relevant web-application UI, design-system, or component-library examples will not be reviewed. Preferred Qualifications · Experience using Figma, Adobe Creative Cloud, Adobe XD, Photoshop, and Illustrator. · Working knowledge of Angular or Vue.js. · Experience interpreting user behaviour and product performance through Google Analytics. · Experience with multi-product or white-label theming based on a shared design system. · Accessibility awareness, including focus states and semantic markup. · Performance-conscious frontend practices. · Experience with data-intensive B2B or SaaS applications. · Experience using AI-assisted design and development tools while independently reviewing and validating the output.