Rinnai

Rinnai homepage design

Rinnai

Rinnai is a worldwide leader in the manufacturing of gas appliances and is the number one selling brand of tankless gas water heaters in the U.S. and Canada. Through the website, Rinnai customers connect directly with an extensive network of dealers using a suite of online tools to facilitate the process from initial product search to dealer follow-up.

Beyond a surface level website redesign, Rinnai set out to transform their business in response to changing market demands. They had a vision: to connect a disjointed lead capture system, improve product positioning, and interconnect with smart home IoT devices. Moving from a proprietary CMS to an open source platform, Drupal 8, presented a breakthrough opportunity to improve performance, scalability, and reporting.

Rinnai sought an agency partner to revamp their US and Canada partner and customer-facing sites. They selected Mediacurrent to create a fresh design and user experience with a new Drupal architecture propelled by an overarching digital strategy vision. The project evolved into a strategic overhaul of Rinnai’s entire digital platform.

 

Customer Testimonial

The phrase 'digital transformation' is thrown around a lot, but there's no better description for the work Rinnai and Mediacurrent completed over the past year. Together we took a process-first approach to streamlining content management, dealer enrollment and lead capture processes. Now we’re spending less time maintaining the website and more time captivating customers — one of our core beliefs.

- Mark Buss, Vice President of Marketing, Rinnai

 

Project Goals
  • Boost Rinnai's dealer network with more qualified customer leads.
  • Unify the various sub-sites and portals into a single experience.
  • Guide consumers through the process of deciding on the right product.
  • Enable the marketing team to manage content without outside assistance.
  • Design a modern, inviting, user-friendly, and responsive experience for consumers and partners.
Project Highlights

Starting with Strategy:Mediacurrent took a broad view of Rinnai’s digital ecosystem and discovered that their Product Registration system and Knowledgebase and Trade Support Portal were inseparable. Being mindful of these interdependent platforms, Mediacurrent rebuilt Rinnai’s partner portal on Drupal with a new design that optimizes the lead capture process.

Integrating the partner portal with the public site provides a seamless experience for consumers, professional dealers (those who sell and install the product for residential and commercial end users) and Rinnai’s internal team. To pave the way, Mediacurrent created a new sitemap and redirect plan to mitigate the risk of SEO fallout and ensure that previously saved bookmarks point users to the correct page of the current site. An international SEO strategy serves to proactively addresses duplicate content issues between the closely mirrored Rinnai.us and Rinnai.ca sites.

Forward-Thinking Design: During the wireframing and design phases, we considered how the needs of each user persona would be met by the new pages. Audience research also validated the importance of applying a mobile-first strategy to design, engagement and user experience.

The new design provides a modern, clean look and feel. Bold, fluid images scale smoothly for large displays down to mobile displays. Clear calls-to-action and direct paths to view products guide users through an information-rich shopping experience.

Beyond its visual appeal, the new site provides a flexible solution for the Rinnai team to manage and present content. Content editors are also empowered to create new pages with a range of layout options.

UI Reimagined: Mediacurrent’s design and front end development teams worked together closely, aligning our component driven development and design processes. The design team presented component mockups that included full responsive layouts.

Mediacurrent delivered a completely redesigned user-interface leveraging Drupal 8’s powerful twig template system. The front end team began building the components of the site before any of the back end development started, an approach that reduced production time and allowed us to demonstrate site functionality early in the development cycle.

Simplifying an Internet of Things integration with React and Node.js: Mediacurrent took on the challenge of integrating with Rinnai’s third party wifi-connected cloud platform to facilitate product registration and web-based water heater status monitoring. Through the Control-R mobile app, customers can register their Rinnai Tankless Water Heater, allowing dealers to receive instant notifications about error messages and service reminders. Mediacurrent built an application using Node.js and React that serves as a faster, automated solution.

The new middleware integrates the Websocket based API from Rinnai’s third party provider with Drupal. Now, for easy referencing, error messages and updates are stored in Drupal. React was leveraged to build a user interface on top of the Node.js app for Rinnai to monitor and control the connection between the third party Websocket API and Drupal. As a result, real-time product updates are available to consumers and dealers on rinnai.us.

Results

One preliminary result is a faster website: page load speed was improved from a high of 30 seconds to consistent load times at or below one second. Mediacurrent also reduced the memory consumption of several key components to save Rinnai the cost and inconvenience of hitting their memory limit.

The website redesign stages Rinnai to improve their competitive position. While it’s too early to share specific metrics, anticipated results include positive momentum toward these long-term goals:

  • Consumer Awareness
  • Content Consumption
  • Product Sales
  • Customer Satisfaction
  • Mobile speed
Challenges and Solutions

Connecting Customers, Capturing Leads: Rinnai has a deeply integrated lead capture system, which allows for a customer to be connected with the appropriate dealer across several points of contact on the site. The website is a key lead generation tool for Rinnai. Mediacurrent’s configuration of Google Tag Manager and Google Analytics sets them up to track KPI's and business goals more effectively.

Achieving Interoperability: Flexible integration with nearly a dozen third party tools and internal systems — including CRM, data analytics, and a new, cloud-based product information management system — make Drupal the central tool for Rinnai admins. Drupal 8’s powerful suite of built-in web services made it possible to expose and import content via RESTful API without doing additional development.  

Engaging Customers with Location Based Personalization: Rinnai faced the challenge of overcoming low category awareness for tankless hot water heaters. They needed a way to target product recommendations and speak their customers’ language on the new site.

Rinnai’s Product Finder simplifies an often complex decision (choosing from over 50 models for an infrequent purchase) that might otherwise overwhelm the average consumer. The tool filters products based on the consumer's’ self-selected preferences and location. To serve personalized product recommendations, Mediacurrent engineered the integration with a third party IP lookup tool that automatically detects the geolocation of an IP address. Now, the site connects product to place by matching a user’s zip code, latitude, and longitude to geographical data like average groundwater temperature.

Drupal’s internationalization capabilities were leveraged to translate content between Rinnai’s USA and Canada sites. Content on rinnai.ca is written in English but handled as a separate language. When new content is published here, it can be translated to account for regional nuances. For example, USA zip codes and Canadian postal codes are translatable streams.

 

Development

Quality Assurance

Mediacurrent’s Quality Assurance team became involved early in the development process to ensure properly functioning website features and code. At the project outset, priority 1 flows were identified to construct a regression test plan. During each sprint, regression testing safeguarded already functioning items against new code. Another measure that helped to set a strong foundation for the site was testing against a style guide that showed the styling and functionality of each component. With this approach, Mediacurrent was able to identify any major front end or design issues before they hit the development server.

As the project came to a close, Mediacurrent analyzed the existing site’s traffic analytics to determine an accurate number of concurrent users, observe user behavior, and calculate the potential for future growth. In coordination with Rinnai’s hosting provider, load tests were designed to spread traffic over the entire site instead of focusing on one specific area.

Key Modules

  • Page Manager and Panels: These modules, along with Paragraphs, were chosen to coordinate various layout and design options content editors at Rinnai could employ on their own to add, update or even change various elements of their pages.
  • Paragraphs: This module was utilized to give various layout and display options within the page, while Page Manager and Panels provide structure component-based design to the base Rinnai theme layer.
  • Salsify: Mediacurrent serves as an official maintainer of the Salsify module that supports one-way syncing of product data from Salsify (a product content management platform) to Drupal.
  • Metatag: This module was implemented to help streamline content optimization for both users and search engines.

Community Contributions

The Mediacurrent team focused on abstracting our development work to contribute patches and modules back to the Drupal community throughout the development process. A Drupal 8 version of the Salsify module was built from the ground up and contributed back to the community. In the same manner, as the site leverages page manager heavily for its structure, the Mediacurrent team took every opportunity to post issues and submit patches to the Drupal 8 issue queue during development.

Final Thoughts

Built on the Drupal 8 platform, the site provides a scalable architecture that supports seamless integration with third party systems. With Mediacurrent’s continued support and partnership ensures, Rinnai will remain digitally ready to sustain continuous improvement in their businesses and operations.

Customer quote

The flexibility of Drupal's open-source platform allowed us to integrate with our new product information management system (Salsify), ensuring accuracy and eliminating the need for manual updates to product specs and documents.
Rachel Haber
Digital Manager, Rinnai