Hired on as an in-house front-end web developer/web designer, I provided the visual design and front-end coding. Design encompassed several iterations of comps and wireframes until reaching final approval.
The redesign of the efaucets.com web site resulted in securing Kohler as a premier sponsor and ultimately contributed to the sale of eFaucets to a nationwide plumbing company.
On the technical side, I helped determine the plan to update the entire site in stages. This required overhauling the site from table-based to mobile-first responsive structure, implementing dynamic elements via custom javascript/jquery and working with the back-end programmers to translate static elements into database-driven elements where possible.
eFaucets Mobile First Responsive Navigation
The use of mobile first responsive coding allowed one set of code for all devices and browsers–from phones to tablets to desktop. This improved efficiencies in maintenance, performance and future scalability. Assets were pulled into the page based on screen size, which reduced the page weight for mobile devices.
The use of mobile first responsive coding allowed one set of code for all devices and browsers–from phones to tablets to desktop. This improved efficiencies in maintenance, performance and future scalability. Assets were pulled into the page based on screen size, which reduced the page weight for mobile devices.
Because the site was not built on a CMS and moving to a CMS wasn’t an option, I had to custom code all of the events that triggered mobile/tablet/desktop features and assets.
eFaucets Product Detail Page
The product detail page followed the mobile first responsive architecture established upon redesigning the site. To optimize page load, product videos and alternate product views were loaded on demand. Screenshots of the product video libraries are illustrated below.
eFaucets Required Products & Upsell Page
We initially created this page to alert the customer that the product they chose required additional components, which proved successful with a dramatic decrease in customer complaints to the call center.
We also added an up-sell feature to allow customers to select multiple related products and add them to their cart without leaving this page.
Video Gallery Popup
This product video gallery is dynamically built to keep the page load down and deliver the resources only when they are called. These events were built using custom jquery and server-side script.
Required Products Video Popup
To facilitate a smoother purchase process, we provided a video explaining what a valve was and why they needed it. I coded the popup script to pull in our videos from youtube, building on the custom script I already created for the product detail videos.
Category Pages
For these broad product categories, I created a simple design format that allowed them to shop by picture in a gallery style setting.
Landing Page Features
Tech Specs
- Responsive design using jQuery, javascript, css, HTML5
- Adobe Creative Suite, Azure, Atom