Please be aware that there is sound that will auto-play on the subsequent page when you click/tap on the 'View the Demo Page' button! If you are at work, and you don't want your co-workers thinking that you're into smooth jazz, please turn the volume down on your computer first before opening the demo.
Cozy up to your new RAV4 with the sounds of smooth jazz. Yes, a sense of humor was a large focus for the creative concept of this product launch landing page for the 2015 Toyota RAV4. Not only will the the alluring music, the low lighting, and a warm raging fire make you fall in love with the RAV4 all over again. It is also the impressive list of standard features, as illustrated by the interactive tooltips on this responsive landing page. Launch and visit the demo page to see the functioning app. Rollover the hot spots on the vehicle in the desktop view, and click through the tooltips on mobile devices. This page was paired with an email that was sent to consumers who had shown interest in the RAV4. By outlining the top features of the vehicle in a fun and engaging way, the goal was achieved to drive traffic from those interested in the product to the RAV4 Features page on the main property Toyota website.
Zurb Foundation was used for the responsive layout grid for this landing page. Several of Foundation featured add-ons were also used to handle certain elements such as the tooltips for the vehicle's features, and the column grid for the feature descriptions at the bottom of the page. Buzz! Javascript audio library was used for the smooth jazz sounds.
And yes, you can turn off that smooth jazz by clicking on the sound icon in the upper right corner of the page.
My roles and responsibilities: Lead developer, project timeline scoping and estimates, technical consultation, frontend integration, troubleshooting and optimization.