UX/UI Frontend Developer

📍 Job Overview

Job Title: UX/UI Frontend Developer

Company: Ruby Labs

Location: Serbia (Remote)

Job Type: FULL_TIME

Category: Frontend Development / UX/UI Design

Date Posted: 2026-04-20

Experience Level: Mid-Level (3+ years)

Remote Status: Fully Remote

🚀 Role Summary

• Drive the creation and enhancement of consumer-facing products through expert UX/UI design and robust frontend development, directly impacting user engagement and business outcomes.

• Take end-to-end ownership of the user interface, translating product requirements and design concepts into high-performance, scalable frontend code using Next.js, TypeScript, and Tailwind CSS.

• Leverage AI-powered design tools to accelerate the ideation, prototyping, and implementation phases, ensuring a cutting-edge and efficient product development lifecycle.

• Collaborate cross-functionally with Product and Engineering teams to deliver seamless, visually appealing, and intuitive user experiences that align with strategic business objectives.

📝 Enhancement Note: This role is explicitly for a "Mid-Level UX/UI Frontend Developer," indicating a need for hands-on technical skills combined with design sensibility. The emphasis on "ownership" and "from idea to final implementation" suggests a high degree of autonomy and responsibility, typical of mid-level roles where individuals are expected to contribute significantly without constant supervision. The focus on "consumer products" and "business outcomes" highlights the impact of this role on the company's success.

📈 Primary Responsibilities

• Conceptualize and create intuitive UI designs from initial product requirements, references, or innovative ideas, filling a potential gap in the absence of a dedicated designer.

• Accelerate design exploration and prototyping by utilizing AI-powered UI tools such as Claude, v0.dev, and Figma AI to enhance creative output and efficiency.

• Implement and maintain a component-based UI architecture using modern frontend technologies including Next.js 16+, TypeScript, and Tailwind CSS for scalable and maintainable code.

• Manage both client-side and server-side state effectively using Zustand and TanStack React Query to ensure seamless data flow and responsive user interactions.

• Integrate and manage A/B testing solutions to facilitate data-driven decision-making and continuous optimization of user experiences and conversion funnels.

• Implement and refine UI animations using Framer Motion to enhance user engagement and provide a polished, dynamic interface.

• Take full ownership of the UI delivery pipeline, from initial concept and design to meticulous final implementation and deployment.

• Proactively identify and address UI polish issues and UX friction points to ensure a consistently high-quality user experience.

📝 Enhancement Note: The responsibilities clearly delineate a dual role in both UX/UI conceptualization and frontend implementation. The explicit mention of AI tools and specific technologies like Next.js, TypeScript, Tailwind, Zustand, TanStack React Query, and Framer Motion indicates a strong preference for modern, efficient development practices. The responsibility to "create UI concepts from scratch" without an existing designer suggests this role is pivotal in shaping the product's visual and interactive identity.

🎓 Skills & Qualifications

Education: While no specific degree is mentioned, a strong portfolio and practical experience are prioritized over formal education. Candidates with degrees in Computer Science, Design, Human-Computer Interaction, or related fields may find their background aligns well.

Experience: 3+ years of hands-on UX/UI Frontend experience within a product or SaaS environment is required. This experience should demonstrate a proven ability to translate design concepts into functional, user-friendly interfaces.

Required Skills:

• UX/UI Design Principles: Proven ability to create user-centric designs, understand user flows, and conceptualize interfaces from scratch.

• Frontend Development: Strong proficiency in Next.js 16+, TypeScript, and Tailwind CSS for building responsive, performant, and scalable web applications.

• Design-to-Code Implementation: Expertise in translating Figma designs into pixel-perfect, responsive frontend code, ensuring high accuracy and adherence to design specifications.

• State Management: Hands-on experience with client-side and server-state management libraries such as Zustand and TanStack React Query.

• Conversion-Focused Design: Demonstrated experience in designing and developing interfaces optimized for conversion, including subscription funnels, landing pages, or complex dashboards.

• Attention to Detail: Meticulous approach to typography, spacing, micro-interactions, and overall visual harmony.

• Communication Skills: Excellent written and verbal English communication to articulate design decisions, document components, and collaborate effectively.

• Ownership Mindset: Proactive identification and resolution of UI/UX issues without direct prompting.

• Remote Work Adaptability: Comfort and effectiveness working in a fast-paced, remote, high-expectation environment.

Preferred Skills:

• Animation Libraries: Experience with Framer Motion or GSAP for creating engaging UI animations.

• CI/CD & Deployment: Familiarity with CI/CD pipelines (e.g., GitHub Actions, Vercel) and frontend deployment processes.

• Web Performance Optimization: Knowledge of performance optimization techniques and tools like Sentry or Google Lighthouse.

• Mobile-First & PWA: Understanding of mobile-first design principles and Progressive Web App concepts.

• SaaS/Fintech Background: Experience in SaaS, fintech, or environments with high-frequency user interactions.

• SEO Best Practices: Awareness of SEO implications in frontend architecture.

📝 Enhancement Note: The qualifications emphasize a blend of creative design skills and strong technical frontend development capabilities. The explicit mention of "3+ years" and "Mid-Level" experience aligns with expectations for independent contribution and problem-solving. The "Nice to have" section provides clear avenues for candidates to differentiate themselves by showcasing specialized skills relevant to modern web development.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Design-to-Code Case Studies: Showcase projects where you've taken UI designs from concept to fully implemented code, highlighting your process and the technologies used.

• Conversion Optimization Examples: Present projects specifically focused on improving conversion rates, subscription funnels, or dashboard usability, with quantifiable results.

• Component Library Development: Demonstrate experience in building reusable, maintainable UI components, ideally using frameworks like Next.js with Tailwind CSS.

• User Experience Polish: Feature examples of micro-interactions, animations, and detailed UI elements that enhance user engagement and satisfaction.

• AI Tool Integration: If possible, include projects where AI design tools were instrumental in accelerating your workflow.

Process Documentation:

• Workflow Design: Illustrate your process for translating product requirements into functional UI designs and then into clean, efficient frontend code.

• State Management Implementation: Provide examples of how you've managed complex client-side and server-side state in previous projects.

• A/B Testing Integration: Detail your experience with integrating and utilizing A/B testing frameworks to drive product improvements.

• Prototyping & Iteration: Showcase how you iterate on designs and prototypes based on feedback or testing, demonstrating agility.

📝 Enhancement Note: For a UX/UI Frontend Developer role with significant ownership, a portfolio is crucial. It should not only display visual design but also demonstrate the ability to build those designs into functional, efficient code. Highlighting experience with specific technologies and conversion optimization will be key.

💵 Compensation & Benefits

Salary Range: Given the mid-level experience requirement (3+ years), the location (remote within specified European countries/regions), and the specialized skillset (Next.js, TypeScript, UX/UI), a competitive salary range can be estimated. For Serbia and comparable regions, a range of €35,000 - €60,000 annually (gross) would be a reasonable estimate, depending on exact location, specific experience, and demonstrable impact.

Benefits:

• Remote Work Environment: Full flexibility to work from anywhere within the approved regions, promoting work-life balance.

• Unlimited PTO: Generous paid time off policy, emphasizing employee well-being and autonomy.

• Paid National Holidays: Compensation for national holidays, ensuring time for rest and personal pursuits.

• Company-Provided MacBook: Access to high-quality hardware to facilitate productivity and seamless workflow.

• Flexible Independent Contractor Agreement: Offers potential tax advantages, autonomy, networking opportunities, and reduced employment obligations for the contractor.

Working Hours: The company operates within the CET (Central European Time) zone, and applicants should be within approximately ± 4 hours of CET to ensure optimal collaboration. This implies a standard 40-hour work week, with flexibility around specific daily start and end times, as long as core collaboration hours are met.

📝 Enhancement Note: Salary is not provided, so an estimate based on regional standards and role complexity is offered. The benefits package emphasizes flexibility and autonomy, particularly the "Flexible Independent Contractor Agreement," which is a significant aspect for potential applicants to understand. The working hours are tied to the CET zone for collaboration.

🎯 Team & Company Context

🏢 Company Culture

Industry: Technology, focused on creating and operating innovative consumer products across health, education, and entertainment sectors.

Company Size: Not explicitly stated, but the mention of "innovative teams" and "fast-growing" suggests a dynamic, potentially mid-sized to large organization that values agility and rapid development.

Founded: Not explicitly stated, but the emphasis on "leading tech company" and "driving the future" implies a company with established expertise and a forward-looking vision.

Team Structure:

• The Product Engineering team is the primary focus for this role, suggesting a structure where engineering, product management, and design collaborate closely.

• This role will work "hands-on across the frontend" and "collaborate closely with Product, Design, and other Engineers," indicating cross-functional interaction.

Methodology:

• Agile Product Development: Implied by the "fast-paced" environment and focus on iterative improvements.

• Data-Driven Decision Making: Supported by the requirement to integrate and maintain A/B testing solutions.

• User-Centric Design: Central to the UX/UI focus, aiming to create intuitive and engaging experiences.

• Modern Tech Stack Utilization: Emphasis on Next.js, TypeScript, Tailwind, AI tools, indicating a commitment to efficient and contemporary development practices.

Company Website: https://rubylabs.com/

📝 Enhancement Note: Ruby Labs positions itself as a fast-paced, ambitious company focused on innovation in consumer products. The culture appears to value high performance, ownership, and rapid growth, with an emphasis on delivering results. The team structure likely supports cross-functional collaboration to achieve these goals.

📈 Career & Growth Analysis

Operations Career Level: This role is classified as "Mid-Level" UX/UI Frontend Developer, requiring 3+ years of experience. It implies a strong technical foundation and the ability to work independently on significant features and UI components, taking ownership from conception to implementation.

Reporting Structure: The role involves close collaboration with Product and Design, and potentially reporting to a Lead Frontend Engineer, Engineering Manager, or Head of Product Engineering. The exact structure isn't detailed, but cross-functional team integration is a key aspect.

Operations Impact: The UX/UI Frontend Developer's work directly influences user engagement, conversion rates, and the overall success of consumer products. By crafting intuitive and performant interfaces, this role contributes significantly to customer acquisition, retention, and satisfaction, thereby impacting revenue and business growth.

Growth Opportunities:

• Technical Specialization: Deepen expertise in Next.js, TypeScript, and modern frontend architectures, potentially becoming a go-to specialist.

• Design Leadership: With the absence of a dedicated designer, there's an opportunity to grow into a more senior UX/UI role, leading design initiatives for new features or products.

• Cross-Functional Influence: Develop stronger collaboration skills and gain insights into product strategy, potentially moving towards product management or technical leadership roles.

• Process Improvement: Contribute to refining frontend development workflows, CI/CD pipelines, and the integration of new tools and technologies.

📝 Enhancement Note: The "Mid-Level" designation suggests a role with significant contribution capacity. Growth opportunities are tied to both technical depth and the potential to influence design direction, especially given the team's current structure. The impact on business outcomes is direct through user engagement and conversion.

🌐 Work Environment

Office Type: Fully Remote. The company operates internationally and emphasizes remote work as a core benefit, allowing employees to work from anywhere within specified regions.

Office Location(s): While fully remote, the company operates within the CET (Central European Time) zone and requires applicants to be within approximately ± 4 hours of CET. This ensures overlap for real-time collaboration. Approved locations include Serbia, Albania, European Union countries, Georgia, Moldova, and North Macedonia.

Workspace Context:

• Collaborative Environment: Despite being remote, collaboration is highly valued, with an expectation of clear communication and teamwork across Product, Design, and Engineering.

• Tools & Technology: Access to a company-provided MacBook and the use of modern development tools (Next.js, TypeScript, AI tools) create a technologically advanced workspace.

• Team Interaction: Interaction will primarily occur via digital communication tools (e.g., Slack, Zoom), with scheduled meetings for team syncs, technical discussions, and project planning.

Work Schedule: The core requirement is alignment with CET working hours (approximately ± 4 hours). This allows for flexibility in daily scheduling while ensuring sufficient overlap for effective team collaboration and communication, accommodating the demands of a fast-paced development environment.

📝 Enhancement Note: The remote-first nature of Ruby Labs is a significant aspect. The CET time zone alignment is a practical consideration for collaboration, and the emphasis on digital communication tools shapes the remote work experience.

📄 Application & Portfolio Review Process

Interview Process:

• Application Review: Initial screening of applications and portfolios, typically taking 3-5 days.

• Recruiter Screening (40 minutes): An initial conversation to assess cultural fit, general experience, and understanding of the role's scope, including motivation for remote work and company alignment.

• Technical Interview (60 minutes): A deep dive into frontend development skills, UX/UI design principles, and problem-solving capabilities. This may involve live coding, discussing past projects, and technical Q&A related to Next.js, TypeScript, state management, and design implementation.

• Final Interview (30 minutes): A discussion likely focused on strategic thinking, ownership, leadership potential, and how the candidate envisions contributing to Ruby Labs' product goals. It may also involve further Q&A from the candidate.

Portfolio Review Tips:

• Showcase Design-to-Code: Clearly present projects where you've translated Figma designs into functional, responsive frontend code. Highlight the specific technologies used (Next.js, TypeScript, Tailwind).

• Quantify Impact: For conversion-focused projects, use metrics to demonstrate improvements in user engagement, conversion rates, or task completion.

• Demonstrate Ownership: Select projects where you took significant initiative, solved complex UI/UX problems, or drove features from concept to completion.

• Highlight AI Tool Usage: If you've used AI tools (Claude, v0.dev, etc.) in your design or development process, explain how they accelerated your workflow or improved outcomes.

• Structure for Clarity: Organize your portfolio logically, perhaps by project type or role, with concise descriptions and clear visuals. Be prepared to walk through specific examples during the interview.

Challenge Preparation:

• Technical Problem Solving: Be ready for coding challenges that test your proficiency in JavaScript, React, Next.js, and potentially state management or API integration.

• Design Rationale: Prepare to articulate the reasoning behind your design choices, focusing on user needs, business goals, and technical feasibility.

• Ownership Scenarios: Think about instances where you proactively identified and solved problems, took initiative beyond your defined role, or drove a project to successful completion.

• Remote Collaboration: Consider how you effectively communicate and collaborate in a remote setting.

📝 Enhancement Note: The interview process is structured in distinct stages, with a clear progression from initial screening to technical assessment and final evaluation. The emphasis on portfolio review and technical challenges requires candidates to thoroughly prepare examples of their design-to-code capabilities and proactive problem-solving.

🛠 Tools & Technology Stack

Primary Tools:

• Frontend Framework: Next.js 16+ (core technology for building applications).

• UI Styling: Tailwind CSS (for rapid, utility-first styling).

• Language: TypeScript (for enhanced code quality and maintainability).

• AI Design Tools: Claude, v0.dev, Figma AI (for accelerating design exploration and prototyping).

• Animation Library: Framer Motion (for creating sophisticated UI animations).

Analytics & Reporting:

• A/B Testing Solutions: Integration and management of platforms for experimentation and data-driven optimization.

• Web Performance Monitoring: Tools like Sentry or Google Lighthouse (preferred) for tracking performance and identifying bottlenecks.

CRM & Automation:

• While not explicitly mentioned for this role, understanding how frontend interfaces interact with backend systems and potentially CRM data for user profiles or analytics is beneficial.

📝 Enhancement Note: The technology stack is modern and focused on efficiency and developer experience. Proficiency in Next.js, TypeScript, and Tailwind CSS is paramount. Familiarity with AI design tools is a unique and valuable asset for this role.

👥 Team Culture & Values

Operations Values:

• Ambition & Drive: Ruby Labs seeks individuals who are highly motivated, aim high, and are ready to give their best consistently.

• Impact-Oriented: Emphasis on achieving tangible results and making a significant contribution to the company's growth and success.

• Embrace Challenges: A culture that views obstacles as opportunities for growth and innovation.

• Speed & Agility: Moving fast, adapting quickly, and operating in a high-expectation, dynamic environment.

• Ownership: Taking full responsibility for tasks and proactively identifying areas for improvement.

Collaboration Style:

• Cross-Functional Integration: Close collaboration between Engineering, Product, and Design is essential for product development.

• Remote Communication Excellence: Strong reliance on clear, precise written and verbal communication (English) to bridge geographical distances.

• Proactive Problem Solving: Team members are expected to identify issues and propose solutions independently.

📝 Enhancement Note: The company culture at Ruby Labs is characterized by high performance, ambition, and a results-driven mindset. The emphasis on speed, ownership, and tackling challenges is central to the employee experience. Collaboration is key, even within a remote setting.

⚡ Challenges & Growth Opportunities

Challenges:

• Bridging Design and Development Gap: Effectively translating abstract design concepts into functional, polished code, especially without a dedicated designer on the immediate team.

• Fast-Paced Environment: Adapting to rapid iteration cycles and high expectations for delivery speed and quality.

• Remote Collaboration Nuances: Maintaining seamless communication and team cohesion in a fully distributed setting.

• Balancing Innovation with Scalability: Implementing cutting-edge features while ensuring the codebase remains robust and scalable for future growth.

Learning & Development Opportunities:

• Mastery of Modern Frontend Stacks: Deepen expertise in Next.js, TypeScript, and associated libraries, staying at the forefront of frontend development.

• AI Tool Integration: Become proficient in leveraging AI for design and development, a rapidly evolving field.

• Product Ownership: Gain experience in taking full ownership of UI features, influencing product direction, and driving user experience improvements.

• Cross-Functional Exposure: Develop a broader understanding of product management and engineering strategies through close collaboration.

📝 Enhancement Note: The primary challenge lies in the dual nature of the role and the remote setup. Growth opportunities are abundant, particularly for those who want to deepen their technical skills, influence product design, and thrive in an autonomous, high-impact environment.

💡 Interview Preparation

Strategy Questions:

• UX/UI Strategy: "Describe a time you had to create a UI concept from scratch. What was your process, and how did you ensure it met user needs and business goals?" (Prepare to discuss your design thinking, use of AI tools, and user research methods).

• Technical Implementation: "Walk me through a complex UI component you built using Next.js and TypeScript. What state management challenges did you face, and how did you solve them with Zustand or TanStack React Query?" (Be ready to discuss code structure, performance considerations, and specific library usage).

• Ownership & Proactivity: "Tell me about a situation where you identified a significant UI polish issue or UX friction point without being prompted. What did you do about it?" (Focus on initiative, problem-solving, and your proactive approach).

Company & Culture Questions:

• Remote Work Philosophy: "How do you stay productive and collaborative in a fully remote, fast-paced environment like Ruby Labs?" (Highlight your communication strategies, time management, and commitment to remote work).

• Ambition & Growth: "Ruby Labs values ambition and high expectations. How do you see yourself contributing to our fast-growing environment, and what are your career aspirations?" (Align your goals with the company's culture of rapid growth and impact).

• Design Rationale: "Explain the design decisions behind a specific feature in one of your portfolio projects, particularly one focused on conversion." (Be prepared to defend your choices based on user-centric principles and business objectives).

Portfolio Presentation Strategy:

• Highlight Design-to-Code: For each relevant project, clearly show the initial design (e.g., Figma mockups) and the final implemented product.

• Explain Your Process: Detail your workflow, including how you used AI tools, managed state, implemented responsiveness, and ensured pixel-perfect accuracy.

• Quantify Results: Use data and metrics (conversion rates, engagement metrics, performance improvements) to demonstrate the impact of your work.

• Focus on Ownership: Select projects where you took significant initiative, solved challenging problems, or had end-to-end responsibility.

📝 Enhancement Note: Interview preparation should focus on demonstrating a strong blend of UX/UI design thinking and hands-on frontend development skills, with an emphasis on ownership, problem-solving, and the ability to thrive in a remote, fast-paced, and ambitious environment.

---

📌 Application Steps

To apply for this UX/UI Frontend Developer position:

• Submit your application through the provided link on Ashby.

• Portfolio Customization: Tailor your resume and portfolio to prominently feature projects that showcase your Next.js, TypeScript, and Tailwind CSS expertise, alongside your UX/UI design process and AI tool usage.

• Resume Optimization: Ensure your resume clearly highlights your 3+ years of relevant experience, focusing on achievements in product/SaaS environments and quantifiable results related to user engagement or conversion.

• Interview Preparation: Practice articulating your design rationale, technical solutions, and ownership mindset. Prepare to walk through specific portfolio examples that align with the responsibilities and required skills.

• Company Research: Familiarize yourself with Ruby Labs' consumer products and their focus on innovation. Understand their culture of ambition and speed to better align your responses during the interview process.

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