R&D Systems E-Commerce Website Upgrade

By modernizing the R&D Systems website and aligning it with proven design standards, the company created a streamlined, user-friendly hub in one convenient, responsive location.

Client

R&D Systems

Role

Lead UI/UX Product Designer

Duration

1 Year

Live Project

Coming Soon

Project Overview

The R&D Systems website upgrade project involved a major transition from a legacy Drupal 6 platform to a completely rebuilt site on Drupal 11, incorporating modern PHP standards, improved security, and long-term maintainability. The existing site, while stable, had become technically outdated and increasingly difficult to support, particularly as older versions of Drupal reached end-of-life. This upgrade not only brought the underlying technology up to date but also provided an opportunity to refresh the user experience with a new, modern Drupal theme while maintaining continuity for long-time customers who rely on the site’s familiar structure and navigation.

A key goal of the redesign was to ensure the website became fully responsive, something the old Drupal 6 version lacked. Historically, most R&D Systems customers accessed the site from desktop environments to research products and purchase materials, so mobile usability had not been a priority. However, with modern browsing habits shifting and the need for quick access to product data sheets and technical information on the go, mobile compatibility became essential. The new Drupal 11 build ensures that the site adapts seamlessly across devices, balancing a fresh, contemporary design with the trusted layout and functionality users have come to depend on.

The Problem

As part of the R&D Systems website modernization, several key challenges were identified in the existing Drupal 6 environment. These issues impacted both the site’s technical foundation and user experience, underscoring the need for a comprehensive upgrade. The two most significant problems were the outdated Drupal 6 platform and the lack of mobile responsiveness.

Outdated Drupal 6 Platform

The legacy R&D Systems website was running on Drupal 6, a platform well past its end-of-life, resulting in growing security risks, maintenance challenges, and compatibility issues with modern PHP and hosting environments. The outdated architecture made it difficult to add new features or keep up with evolving web standards, while the non-responsive design limited accessibility for users on mobile and tablet devices. These limitations highlighted the urgent need for a full rebuild on a modern platform to ensure long-term stability, security, and usability.

Non-Responsive Design and Limited Mobile Accessibility

The previous R&D Systems site was built before mobile responsiveness became a web standard, resulting in a layout optimized solely for desktop users. While this met the needs of most customers at the time, who primarily accessed the site from laboratory or office environments, it increasingly became a limitation as mobile usage grew. Users seeking quick access to product details, data sheets, or research materials on the go often found the site difficult to navigate on smaller screens. This lack of mobile optimization not only impacted usability but also limited the site’s overall accessibility and perceived modernity, emphasizing the need for a fully responsive design that adapts seamlessly across devices.

Research & Discovery

Before beginning the R&D Systems website rebuild, the team conducted a Research & Discovery phase focused on applying insights gained from the recently launched Bio-Techne website. The Bio-Techne project provided a strong foundation of design principles, technical frameworks, and user behavior data that directly informed the new R&D Systems approach.

User Interviews & Pain Points

User research from the Bio-Techne site highlighted how scientists and lab professionals interact with product data online—particularly the importance of clear imagery for detailed product examination, streamlined layouts for quick access to key specifications, and intuitive ecommerce functionality for purchasing or requesting information. These insights guided the creation of a refreshed yet familiar design that modernizes the R&D Systems experience while maintaining the trust and usability long valued by its customer base.

Competitive Analysis

In addition to lessons learned from the Bio-Techne project, the team also drew on competitor research to refine how product information should be organized and presented. By studying the information hierarchy and layout patterns used by other leading life sciences companies, we identified opportunities to deliver a cleaner, more intuitive experience for R&D Systems customers. The goal was to make key product details, such as specifications, data sheets, and related resources, immediately accessible without overwhelming the user. This focus on clarity and efficiency informed both the visual design and content structure, ensuring that scientists could quickly find the information they need with minimal effort.

Current State Usability Testing

The site build is still in progress, and while the foundational design and structure have been established, usability testing will continue post-launch to ensure the new experience meets user expectations. The team plans to leverage ongoing usability research, including heatmaps, scroll maps, and behavioral analytics, to observe how users engage with the new R&D Systems site in real-world conditions. Insights from Bio-Techne’s testing data will also continue to inform design refinements, helping to validate assumptions, optimize key product pages, and guide future enhancements to improve usability and overall user satisfaction.

The Solution

To address the challenges identified during discovery, the team developed a comprehensive plan to modernize the R&D Systems website while maintaining the familiarity valued by its long-time users. The solution focused on rebuilding the site from the ground up in Drupal 11, implementing a fully responsive design, and aligning with the shared Bio-Techne design system for consistency and efficiency. This approach ensured a stable, secure, and scalable platform that delivers a cleaner, more intuitive experience—one that meets modern technical standards without losing the trusted structure and usability of the original site.

Solution 1: Migration to Drupal 11

The first step in the solution was a complete migration from Drupal 6 to Drupal 11, ensuring the site runs on a modern, secure, and fully supported platform. This upgrade provided a foundation built on current PHP standards, improved performance, and better compatibility with third-party integrations. By rebuilding the site architecture rather than simply porting old content, the team was able to streamline outdated systems, reduce technical debt, and set up a flexible framework for future growth and feature development.

Solution 2: Responsive, User-Centered Design

The second key solution focused on creating a fully responsive, user-centered design that works seamlessly across desktops, tablets, and mobile devices. Drawing on insights from Bio-Techne and competitor research, the team prioritized clear product hierarchy, larger imagery, and easy access to key specifications. This approach ensures that scientists and lab professionals can quickly find product information, view detailed images, and navigate the site efficiently, whether they’re in the lab, office, or on the go, improving both usability and overall customer satisfaction.

Results & Impact

While the R&D Systems website rebuild is still in ongoing development, the anticipated outcomes are already clear. With a modern Drupal 11 platform, fully responsive design, and updated technical standards, the site is positioned to deliver improved customer interactions, easier access to key product information, and a more engaging overall experience. Additionally, the fresh design and updated infrastructure are expected to contribute to better SEO performance, helping the site reach more users and support long-term growth once the full launch and post-launch optimizations are complete.