UX Designer

Rainx.ca

Introduction

Rain‑X is one of the most popular automative after care brand in USA. Their products include wiper blades and glass cleaners; Rain‑X leads the automotive aftermarket in glass care. The products are sold internationally as well including Canada. However, the web presence for the Canadian market needs to be improved to create an impact and to improve profits.

 
Old-site.jpg
 

Issues

The existing rainx.ca site was very basic and lacked complete products’ information. It needed a new layout to convey the brand premium qualities.

My Role

  1. Create a Scrolling Banner

  2. Create icons underneath “slideshow”

  3. Add retailer logos

  4. Stay connected page

  5. primary links

Process

The users of the website would be new to this brand in Canada so the information should include products’ complete features including where these items would be available. I chose to keep the main colors tie to the brand’s primary color (yellow). I also wanted to keep the scrolling banner’s contents not confined in the usual rectangle to give it an edgy look. I also drew the vector icons in Illustrator to create the visual interest for the important links underneath the banner. Adding retailer logos was very important on every page as per the product owner to give the visitors informed about the availability in stores. I also added some hover states to the icons for giving icons a lively feel.

Result

Rainx-site.png

By using some vision of using updated elements and current design trends, the site looked way better from the basic initial project scope. The addition of ‘rainx.ca’ right next to the logo was a smart decision so that people instantly see that it was not the U.S. site.

Rainx-site_connected.jpg
rainx-site-mobile.jpg

Lessons Learned/Continued Process

While I was adding a serif font, I learnt that it does not always translate well to all browsers. On the Stay Connected page, when a user adds his/her email address, it takes to another mailchimp page of adding the name and email address again. I think this is redundant and needs to be addressed.

The mobile site need a better structure with spacing and fonts sizing. Also, the product owner wants to get rid of the ‘white space.’ I am in the process of giving it a thought while asking others of a better solution that would not look too busy and takes away from the current clean design layout.