I was contracted by 10 feet tall to develop a microsite to accompany a series of TVCs they had made for Rinnai’s Infinity 26 hot water unit. The aim of the campaign was to make hot water interesting— to tie it to home comforts, family safety, convenience and energy savings — and in a light-hearted and jovial manner akin to a funny scientific institution, replete with scientists, assistants, and a host of other kooky characters and experiments.
With the microsite, I was given a design and produced the site within a static HTML, CSS, JS format. It was a single scrolling page with an elevator-like navigation menu and parallax functionality. I decided to extend the metaphor of the elevator levels by including elevator doors which open and shut if a person uses the controls to navigate between the levels.
There were some interesting technical challenges involved as well. Primarily, the Rinnai website has some existing functionality which they wanted to include on the microsite, namely the store locator search form. Instead of reinventing the wheel, I decided to incorporate the existing store locator data into the microsite, which involved configuring the web server for CORS and having to reverse-engineer the AJAX responses in order for it to display and function correctly.
In terms of other technical features, there’s extensive Google analytic event recording to best gauge how users are interacting with the site and the media. There are also specific events to help report on means to improve the usability of the site, such as loading times and any form error messages.
The whole site is responsive to support desktops, laptops, mobile phones and tablets.