Wet Shaving Club

Overview

This client needed a redesign of their homepage, and product categories page. An interactive marquee was requested for the top of the homepage to foster engagement and quickly communicate their unique value proposition.

The vision for the interactive marquee was to display a slider to animate the marquee such that a stack of razor blade packages would increase as well as the total price above them, to illustrate the unique value they provide with their subscription service vs. their competitors.

The client also wanted to add a popup quiz on the page to engage visitors and increase conversion.

Solution

We chose to build the marquee using Javascript with JQuery and integrate it into the existing WordPress Elementor site.

We built the marquee such that it would initially animate when the visitor landed on the page, to grab their attention and to indicate the dynamic nature of the marquee.

An interactive slider widget was created which the site visitor could drag horizontally to scroll the animation forward and backward, which increased and decreased the stack of razor blades and the total price.

The homepage redesign included many geometric animations based on the vertical page scroll and mouse position to create a sense of interactivity throughout the page in order to increase engagement and increase the perceived value of the product.

The interactive quiz was built to pop up when CTAs were clicked on the page, to increase engagement with questions about the visitors needs in relation to the product. The submit button in the quiz routed visitors to a checkout page in order to convert site visitors with immediate purchases.

The category page was redesigned to showcase their product using photos of the product, and present it in a unique way to create the perception of quality.

Implementation Details

Javascript with JQuery were used to facilitate the marquee animation. We used a similar animation from another site as inspiration just to get the image positioning correct for all screen sizes, and heavily modified the code to make it suit our purposes.

Careful editing was required for the graphics using geometric techniques within Photoshop, since each frame needed to be perfectly aligned, and the base graphics provided by the client were not geometrically aligned correctly to make the animation work correctly.

The geometric animation further down the page were built purely with Elementor, using custom styled divs to establish geometric shapes, and Elementor interactive animations.

The quiz was implemented with Gravity Forms, and the popup which contained the form was built natively with Elementor using an "anchor" trigger to display it upon button clicks.

Elementor and custom CSS were used to create a custom tabbing system for the product categories page, in order to highlight each product category with colorful geometry and display verbose and eye catching details within the content area below, based on the tabbed selection.

We built the following features: