UX / Frontend Engineer

📍 Job Overview

Job Title: UX / Frontend Engineer

Company: Roche

Location: Sant Cugat del Vallès, Spain

Job Type: Full-time

Category: Frontend Engineering / UX Design

Date Posted: 2026-06-01

Experience Level: Mid-Level (2-4 years)

Remote Status: On-site

🚀 Role Summary

• Develop and maintain responsive, high-performance web applications and interactive dashboards leveraging Vue.js and Tailwind CSS frameworks.

• Translate complex bioinformatics workflows and wireframes into intuitive, user-centric code, collaborating closely with UX designers and senior engineers.

• Create and optimize interactive data visualizations using D3.js to represent large-scale scientific datasets.

• Contribute to a robust internal component design system, ensuring UI consistency, accessibility, and reusability across platforms.

• Integrate frontend applications with backend services through RESTful and GraphQL APIs within a cloud environment.

📝 Enhancement Note: This role bridges UX design principles with hands-on frontend development, focusing on complex scientific data visualization for Machine Learning and Data Science teams within Roche Diagnostics Solutions (DSI). The emphasis is on building functional, user-friendly interfaces for specialized scientific applications.

📈 Primary Responsibilities

• Architect, develop, test, and maintain scalable, responsive, and high-performance web applications using Vue.js and Tailwind CSS.

• Translate user stories, wireframes, and complex workflow requirements into clean, efficient, and well-documented frontend code.

• Design and implement interactive data visualizations using D3.js to effectively represent large-scale datasets and complex scientific insights.

• Collaborate with UX designers to ensure a seamless and intuitive user experience, incorporating feedback from user testing and stakeholder reviews.

• Develop and maintain a comprehensive internal component design system, ensuring adherence to brand guidelines, accessibility standards, and reusability principles.

• Integrate frontend applications with backend services via RESTful and GraphQL APIs, working closely with backend engineers to define and consume data endpoints.

• Participate actively in Agile ceremonies (sprint planning, daily stand-ups, retrospectives) to ensure iterative delivery and continuous improvement.

• Troubleshoot and debug issues, optimizing frontend performance and ensuring cross-browser compatibility.

• Contribute to code reviews, providing constructive feedback to peers and maintaining high code quality standards.

• Stay abreast of emerging frontend technologies and best practices, evaluating their potential application to improve existing systems and workflows.

📝 Enhancement Note: The primary responsibilities highlight a blend of core frontend engineering tasks with a strong emphasis on data visualization and user experience design within a specialized scientific context. The role requires a proactive approach to code quality, system integration, and continuous learning.

🎓 Skills & Qualifications

Education: While no specific degree is mandated, a Bachelor's degree in Computer Science, Software Engineering, Human-Computer Interaction, or a related field, or equivalent practical experience, is highly recommended.

Experience: 2–4 years of hands-on software development experience with a strong, demonstrable focus on modern JavaScript frameworks, particularly Vue.js.

Required Skills:

• Vue.js Mastery: Proven experience building complex, scalable applications with Vue.js.

• HTML5 & CSS3 Proficiency: Deep understanding of semantic HTML5 and advanced CSS3 techniques, including preprocessors like SASS.

• Tailwind CSS Expertise: Solid experience utilizing utility-first CSS frameworks, specifically Tailwind CSS, for efficient and responsive UI development.

• JavaScript Fundamentals: Strong command of modern JavaScript (ES6+) and asynchronous programming patterns.

• API Integration: Practical experience integrating frontend applications with backend services using RESTful and GraphQL APIs.

• Version Control: Proficient in using Git for source code management and collaborative development.

• Agile Methodologies: Familiarity with and active participation in Agile/Scrum development processes.

• UX/UI Acumen: A strong eye for UX design principles and the ability to translate design concepts into functional, user-friendly interfaces.

Preferred Skills:

• Data Visualization (D3.js): Experience with or a strong interest in data visualization libraries, particularly D3.js, for creating interactive charts and complex scientific data representations.

• Design System Contribution: Experience contributing to or maintaining component libraries and design systems, including familiarity with tools like Figma or Sketch for design hand-offs.

• Life Sciences Domain Knowledge: A background, previous experience, or strong interest in the life sciences sector (e.g., Sequencing, PCR, Bioinformatics, Digital Healthcare).

• Browser Performance Optimization: Foundational understanding of techniques for optimizing frontend performance and ensuring a smooth user experience.

• Cloud Environment Familiarity: Exposure to working within cloud environments for application deployment and integration.

• Cross-functional Collaboration: Proven ability to work effectively with diverse technical teams, including data scientists and backend engineers.

📝 Enhancement Note: The qualifications emphasize practical, hands-on experience with specific technologies crucial for building sophisticated web applications, especially in data visualization. The preferred skills point towards candidates who can quickly adapt to the life sciences domain and contribute to established design and development practices.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Vue.js Application Showcase: Include at least one significant project demonstrating complex frontend architecture, state management, and component-based development using Vue.js.

• Data Visualization Examples: Showcase specific projects or components that utilize D3.js or similar libraries to visualize complex datasets, highlighting the interactive elements and insights derived.

• Responsive Design Implementation: Provide examples that clearly illustrate the application of responsive design principles across various devices and screen sizes.

• UI/UX Design Translation: Demonstrate how you have translated wireframes or design mockups (from tools like Figma) into fully functional and aesthetically pleasing user interfaces.

• API Integration Examples: If possible, include examples or descriptions of how your frontend applications have integrated with backend APIs (RESTful or GraphQL).

Process Documentation:

• Workflow Design & Optimization: Be prepared to discuss how you approach breaking down complex user requirements or scientific workflows into manageable frontend components and features.

• Component Reusability & Design Systems: Detail your experience in creating reusable UI components and contributing to or utilizing design systems, emphasizing consistency and maintainability.

• Performance Analysis & Improvement: Describe your methods for identifying and addressing frontend performance bottlenecks, including tools and techniques used.

• Collaboration & Code Review: Illustrate your process for collaborative development, including participation in code reviews and how you provide/receive feedback.

📝 Enhancement Note: A strong portfolio is crucial for this role, as it serves as tangible proof of the candidate's ability to execute complex frontend development, particularly in data visualization and UI implementation for specialized applications. The emphasis is on showcasing practical application of skills rather than theoretical knowledge.

💵 Compensation & Benefits

Salary Range: Based on industry benchmarks for skilled Frontend Engineers with 2-4 years of experience in Spain, particularly in technology hubs like Barcelona/Sant Cugat, the estimated annual salary range for this role is between €40,000 - €55,000 gross per year. This range can vary based on the candidate's specific experience, qualifications, and performance during the interview process.

Benefits:

• Comprehensive Health Coverage: Access to Roche's extensive health insurance plans, including medical, dental, and vision coverage.

• Retirement Savings Plan: Participation in a company-sponsored retirement savings or pension scheme.

• Professional Development: Opportunities for continuous learning through workshops, conferences, online courses, and potential certifications, with a focus on frontend technologies and life sciences applications.

• Work-Life Balance Initiatives: Support for work-life balance through potential flexible working arrangements where applicable, and company-wide policies promoting employee well-being.

• Employee Assistance Program (EAP): Access to confidential counseling and support services for personal and professional challenges.

• Performance Bonuses: Potential for annual performance-based bonuses based on individual and company achievements.

• Relocation Assistance: For candidates relocating to Spain, Roche may offer relocation support.

Working Hours: The standard working hours are typically 40 hours per week, aligned with the company's operational needs and local Spanish labor laws. While primarily an on-site role, there may be some flexibility in start and end times, subject to team and manager approval, to accommodate personal needs and optimize productivity.

📝 Enhancement Note: The salary estimate is based on current market data for similar roles in the Barcelona metropolitan area, considering the specified experience level and the specialized nature of the position. Benefits are typical for a large, multinational pharmaceutical company like Roche, with a focus on employee well-being and professional growth.

🎯 Team & Company Context

🏢 Company Culture

Industry: Pharmaceuticals & Biotechnology / Healthcare Diagnostics. Roche is a global leader in healthcare, with a significant presence in both pharmaceuticals and diagnostics. This role sits within Roche Diagnostics Solutions (DSI), focusing on product development services and integrated solutions.

Company Size: Global enterprise with over 100,000 employees. This indicates a stable, well-resourced organization with established processes and a wide array of career opportunities.

Founded: 1896. With a long history, Roche has a strong legacy of innovation and a deep understanding of the healthcare landscape.

Team Structure:

• DSI (Development Services & Integration): This team focuses on maximizing value in product development through efficient services and integrated solutions.

• UX/Frontend Engineering Unit: Within DSI, this unit likely consists of a Lead UX/Frontend Engineer, other Frontend Engineers, and UX Designers who collaborate closely.

• Cross-functional Collaboration: The role requires close alignment with Machine Learning teams, Data Science teams, backend engineers, and product managers, fostering a highly collaborative and interdisciplinary environment.

Methodology:

• Agile Development: The team operates using Agile methodologies, emphasizing iterative development, continuous feedback, and cross-functional teamwork.

• Data-Driven Insights: A strong emphasis on leveraging data and digitalization to drive product development and deliver timely support.

• User-Centric Design: Prioritizing patient and physician needs in the design and development of digital products.

• Standardization & Efficiency: Focus on delivering efficient services and integrated solutions to increase standardization and efficiency.

Company Website: https://www.roche.com/

📝 Enhancement Note: Roche's culture is characterized by innovation, collaboration, and a commitment to improving global health. The DSI unit, specifically, aims for efficiency and integration in product development, suggesting a pragmatic and results-oriented approach. The role's position within this structure implies a need for strong teamwork and a focus on delivering tangible value.

📈 Career & Growth Analysis

Operations Career Level: This role is positioned as a Mid-Level Frontend Engineer, requiring 2-4 years of specialized experience. It represents a crucial individual contributor role within the DSI unit, focused on executing complex development tasks and contributing to the design and implementation of sophisticated digital products.

Reporting Structure: The UX/Frontend Engineer will likely report to a Lead UX/Frontend Engineer or a Development Manager within the DSI team. They will work closely with product managers, data scientists, and backend engineers, forming part of a project-specific or platform-focused squad.

Operations Impact: The work directly impacts the efficiency and effectiveness of Roche's Machine Learning and Data Science teams by providing them with intuitive tools and visualizations for complex scientific data. This, in turn, accelerates the development and personalization of treatments, directly supporting Roche's mission to diagnose earlier, develop faster, and personalize treatment. The frontend applications built will be instrumental in making critical scientific data accessible and actionable.

Growth Opportunities:

• Technical Specialization: Deepen expertise in Vue.js, D3.js, and other frontend technologies, potentially becoming a subject matter expert in data visualization for life sciences.

• Cross-functional Skill Development: Gain exposure to backend development, cloud infrastructure, and the specific challenges of bioinformatics and digital healthcare through close collaboration.

• Leadership Potential: With proven performance and experience, opportunities may arise to mentor junior engineers, lead specific feature development, or move into a Lead Frontend Engineer or Architect role.

• Design System Ownership: Potential to take on more responsibility for the maintenance, evolution, and strategic direction of the internal component design system.

• Domain Expertise: Develop a strong understanding of the life sciences and healthcare industry, making you a valuable asset within Roche's innovation ecosystem.

📝 Enhancement Note: The growth path for this role is strongly tied to deepening technical expertise in frontend development and data visualization, coupled with gaining specialized domain knowledge in the life sciences. Opportunities for leadership and specialized technical mastery are present within Roche's structured environment.

🌐 Work Environment

Office Type: This is an on-site position located in Sant Cugat del Vallès, Spain. The environment is expected to be a modern corporate office setting designed to foster collaboration and innovation.

Office Location(s): Sant Cugat del Vallès, a well-connected municipality near Barcelona, known for its business parks and technological hubs. This location offers a good balance of accessibility and a conducive environment for technology-focused companies.

Workspace Context:

• Collaborative Spaces: The office likely features open-plan areas, meeting rooms, and dedicated collaboration zones to facilitate teamwork and brainstorming among engineers, designers, and data scientists.

• Technology & Tools: Access to high-performance workstations, relevant software licenses (design tools, IDEs), and a robust IT infrastructure supporting development workflows.

• Team Interaction: Regular opportunities for face-to-face interaction with immediate team members, cross-functional colleagues, and potentially leadership, fostering a strong sense of community and shared purpose.

• Scientific Atmosphere: Being part of Roche Diagnostics Solutions means being in an environment deeply rooted in scientific advancement, which can inspire and motivate work on impactful projects.

Work Schedule: The standard work week is 40 hours, typically Monday to Friday. While an on-site role, Roche often promotes a culture that values work-life balance, with potential for some flexibility in daily start/end times, subject to team coordination and manager approval, to ensure productivity and employee well-being.

📝 Enhancement Note: The on-site requirement in Sant Cugat del Vallès suggests an environment that values in-person collaboration, essential for intricate design and development tasks. The workspace is likely equipped to support advanced technology development within the life sciences sector.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A recruiter or hiring manager will review your application and resume, often followed by a brief introductory call to assess basic qualifications and cultural fit.

• Technical Assessment (Frontend/Design): This may involve a coding challenge (e.g., building a small component or solving a frontend problem in Vue.js), a take-home assignment, or a live coding session focusing on JavaScript, Vue.js, and CSS. Questions might also probe your understanding of data visualization principles.

• Portfolio Review & Technical Deep Dive: You will present your portfolio, discussing key projects, your role in them, technical challenges overcome, and design decisions. Expect in-depth questions about your Vue.js implementation, D3.js usage (if applicable), API integration strategies, and understanding of UX principles.

• Cross-functional/Team Interview: An interview with potential team members (e.g., Data Scientists, Backend Engineers, Lead UX Designer) to assess collaboration skills, ability to translate complex requirements, and cultural alignment with Roche's values.

• Hiring Manager/Final Interview: A discussion with the hiring manager to delve deeper into your experience, career aspirations, and fit within the DSI team. This is also an opportunity to ask detailed questions about the role and team.

Portfolio Review Tips:

• Curate Strategically: Select 2-3 of your most impactful projects that best showcase your Vue.js, UI/UX, and ideally, data visualization skills. Prioritize projects that demonstrate problem-solving and measurable outcomes.

• Structure Your Narrative: For each project, clearly articulate the problem statement, your specific contributions, the technologies used (especially Vue.js, Tailwind CSS, D3.js), the challenges faced, and the solutions implemented. Quantify impact where possible (e.g., improved performance, user satisfaction).

• Highlight Vue.js & Visualizations: Explicitly point out your Vue.js architecture, component design, and any data visualization work. Be prepared to walk through the code structure and explain your design choices.

• Showcase Design Translation: If you have projects where you translated Figma/Sketch designs, be ready to demonstrate the fidelity of your implementation and any design considerations you made.

• Be Ready for Technical Questions: Anticipate detailed questions about your code, debugging strategies, performance optimization techniques, and understanding of frontend best practices.

Challenge Preparation:

• Vue.js Fundamentals: Refresh your knowledge of Vue.js core concepts, lifecycle hooks, state management (Pinia/Vuex), routing, and component communication.

• CSS & Responsiveness: Practice implementing responsive layouts with Tailwind CSS and ensuring cross-browser compatibility.

• Data Visualization Concepts: Review basic principles of data visualization and how D3.js can be used to create common chart types. Understand how to map data to visual elements.

• API Interaction: Be ready to discuss how you consume and handle data from RESTful or GraphQL APIs, including error handling and asynchronous operations.

• Problem-Solving: Practice breaking down abstract problems into concrete implementation steps, thinking about edge cases and potential optimizations.

📝 Enhancement Note: The interview process is designed to thoroughly assess both technical proficiency and collaborative capabilities. A strong, well-prepared portfolio is essential, as it directly informs the technical deep-dive and demonstrates the practical application of skills relevant to Roche's complex data visualization needs.

🛠 Tools & Technology Stack

Primary Tools:

• Vue.js: The core JavaScript framework for building interactive web applications.

• Tailwind CSS: A utility-first CSS framework for rapid UI development and responsive design.

• JavaScript (ES6+): The foundational language for frontend development.

• HTML5 & CSS3: Standard web technologies for structure and styling.

• SASS: A CSS preprocessor for more organized and maintainable stylesheets.

• Git: Essential for version control, collaboration, and code management.

Analytics & Reporting:

• D3.js: A powerful JavaScript library for manipulating documents based on data, extensively used for data visualization.

• Browser Developer Tools: For debugging, performance profiling, and inspecting UI elements.

• Potential for internal analytics tools: May be used for tracking user interactions within the applications.

CRM & Automation:

• RESTful APIs & GraphQL: Technologies for integrating frontend applications with backend services.

• Agile Project Management Tools: Such as Jira or similar platforms, for managing sprints, tasks, and backlogs.

• Design Handoff Tools: Figma, Sketch, or Adobe XD, for receiving design specifications and assets from UX designers.

• Potential for CI/CD tools: Familiarity with continuous integration/continuous deployment pipelines might be beneficial.

📝 Enhancement Note: The technology stack is modern and focused on efficient frontend development and sophisticated data visualization. Proficiency in Vue.js and D3.js, alongside strong CSS skills and API integration capabilities, are critical. Familiarity with Agile tools and design handoff processes is also expected.

👥 Team Culture & Values

Operations Values:

• Innovation: A drive to explore new possibilities and find novel ways to solve complex scientific and patient challenges through technology.

• Collaboration: Emphasizing teamwork, open dialogue, and working closely with diverse teams (data scientists, backend engineers, designers) to achieve shared goals.

• Integrity & Quality: Commitment to high standards in code quality, data accuracy, and user experience, reflecting Roche's dedication to healthcare.

• Patient Focus: A core underlying value to ensure that all technological advancements ultimately serve to improve patient outcomes, diagnose earlier, and personalize treatments.

• Respect & Inclusion: Fostering an environment where every individual is valued, accepted, and respected for their unique contributions.

Collaboration Style:

• Cross-functional Integration: Close working relationships with data scientists, ML engineers, backend developers, and UX designers are paramount for translating complex scientific data into functional applications.

• Agile & Iterative: A culture of continuous feedback, iterative development, and shared ownership of project goals.

• Knowledge Sharing: Encouragement of sharing best practices, learnings, and technical insights through code reviews, team discussions, and potentially internal tech talks.

• Problem-Solving Orientation: A collective approach to tackling complex technical and design challenges, leveraging diverse perspectives to find effective solutions.

📝 Enhancement Note: Roche's culture emphasizes a blend of scientific innovation, collaborative problem-solving, and a deep commitment to patient well-being. For this role, expect a highly integrated team environment where technical contributions directly support critical scientific advancements, underpinned by strong ethical and quality standards.

⚡ Challenges & Growth Opportunities

Challenges:

• Translating Complex Data: The primary challenge involves accurately and intuitively visualizing complex, large-scale scientific and bioinformatics data for Machine Learning and Data Science teams, requiring a deep understanding of both the data and user needs.

• Bridging Design & Development: Effectively bridging the gap between sophisticated UX/UI designs and robust, scalable frontend code, ensuring a seamless user experience that meets functional requirements.

• Performance Optimization: Maintaining high frontend performance and responsiveness when dealing with large datasets and intricate visualizations can be technically demanding.

• Evolving Technologies: Keeping pace with the rapid evolution of frontend frameworks, libraries, and best practices, while also staying informed about advancements in the life sciences domain.

• Cross-functional Communication: Ensuring clear and effective communication across diverse technical disciplines (data science, backend, UX) to align on requirements and solutions.

Learning & Development Opportunities:

• Advanced Data Visualization: Deepen expertise in D3.js and other visualization techniques, becoming a specialist in representing complex scientific data.

• Vue.js Ecosystem Mastery: Expand knowledge of the Vue.js ecosystem, including advanced state management, performance tuning, and potentially server-side rendering.

• Domain Expertise in Life Sciences: Develop a strong understanding of bioinformatics, genomics, diagnostics, and digital healthcare applications, which are highly valued within Roche.

• Cloud Technologies: Gain experience working with cloud platforms (e.g., AWS, Azure, GCP) relevant to application deployment and integration.

• Mentorship & Technical Leadership: Opportunities to mentor junior engineers, lead feature development, and contribute to architectural decisions as experience grows.

📝 Enhancement Note: The role presents significant technical challenges related to data visualization and cross-disciplinary collaboration, offering substantial opportunities for professional growth in specialized areas of frontend engineering and the life sciences industry.

💡 Interview Preparation

Strategy Questions:

• "Describe a complex data visualization you built. What was the dataset, what were the challenges, and how did you use D3.js (or similar) to represent it effectively?" (Focus on process, tools, and outcomes.)

• "How do you approach translating a detailed UX wireframe into functional Vue.js code? Walk me through your thought process for component breakdown and state management." (Assess practical implementation skills.)

• "Imagine you need to integrate a new API endpoint into an existing Vue.js application. What are the key steps you would take, and what potential issues would you anticipate?" (Test API integration and problem-solving.)

• "How do you ensure your frontend code is performant, especially when dealing with large datasets? What tools and techniques do you use?" (Focus on optimization strategies.)

Company & Culture Questions:

• "What interests you about working in the life sciences/diagnostics industry and specifically at Roche?" (Gauge genuine interest and alignment with company mission.)

• "How do you approach contributing to a component design system? What are the key principles you follow?" (Assess understanding of reusable UI and design system best practices.)

• "Given Roche's mission to improve global health, how do you see your role as a Frontend Engineer contributing to that mission?" (Connect technical role to broader company impact.)

Portfolio Presentation Strategy:

• Storytelling: Frame your projects as stories with a clear beginning (problem), middle (your solution and process), and end (impact/outcome).

• Technical Depth: Be prepared to dive deep into the code for your showcased projects, explaining architectural decisions, Vue.js patterns, and D3.js implementation details.

• Visual Clarity: Use screen recordings or interactive demos where possible to showcase the functionality and user experience of your applications.

• Quantify Impact: Whenever possible, use metrics to demonstrate the success of your projects (e.g., improved load times, user engagement, data clarity).

• Connect to Roche: Tailor your examples to highlight skills that are directly relevant to Roche's needs, such as complex data handling, scientific visualization, and user-centric design for specialized applications.

📝 Enhancement Note: Preparation should focus on articulating complex technical concepts clearly, demonstrating practical application of Vue.js and data visualization skills, and aligning your experience with Roche's mission and values. The portfolio is your primary tool for showcasing these capabilities.

📌 Application Steps

To apply for this UX / Frontend Engineer position at Roche:

• Submit your application: Complete the online application form via the provided Workday link, ensuring all sections are filled accurately.

• Tailor your Resume: Highlight your experience with Vue.js, Tailwind CSS, D3.js (if applicable), HTML5, CSS3, and any relevant life sciences or data visualization projects. Use keywords from the job description to optimize for Applicant Tracking Systems (ATS).

• Prepare Your Portfolio: Curate your best work, focusing on projects that demonstrate your frontend development, UI/UX design, and data visualization capabilities. Ensure it's easily accessible (e.g., via a personal website, GitHub profile, or a dedicated portfolio platform).

• Practice Your Pitch: Be ready to articulate your experience and portfolio projects concisely and compellingly. Practice explaining technical concepts and your problem-solving approach.

• Research Roche: Familiarize yourself with Roche's mission, values, and recent work in diagnostics and pharmaceuticals. Understand how your role contributes to their overall 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.