Improving Performance, Scalability, and Reporting for Rinnai

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.

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.

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 one 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.

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.

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:

• Engagement
• Consumer Awareness
• Content Consumption
• Product Sales
• Customer Satisfaction
• Mobile speed

Conclusion

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.