The Ask

Create a series of digital assets for a plugin developer including site refresh, product feature animations, and assorted banners. The objective was to trade in the business suit motif of the original for something that felt more lively and playful. Sure, they’d still be pushing essentially the same product, but something brighter and lighter might be more apt to catch the eye of the shopper in the ever-stimulating ecommerce cart solution market.

Hero Design

We started by defining the look the of the new hero, since the rest of the site would follow whatever was happening above the fold. The exploration was centered around a ‘digital green’ hue that felt slick & smart, but we didn’t rule out something a little cooler in case the green ended up being too springy.

Taking cues from Google’s Material UI, the composition was left simplistic, with a 2-column layout and basic layering complemented by subtle gradients.

Though the client had an existing typeface he had in use, some other options were requested for consideration. The sans-serif candidates were all handpicked for their friendly forms and weight variability.

Hero Animation

After solidifying the header and a new color scheme, we moved on to the main product animation. The runtime was capped at 20 secs, and we were able to compress the final output to under 2mb without much loss in visual fidelity by predominantly using flat colors and basic shapes. All animation sequences were created in After Effects.

In-stream Animation

One of the major strengths of Venby’s IP is the ability to offer in-stream purchases while a potential customer is viewing a product video. Though the actual process only takes a matter of minutes, we needed to portray it in seconds. The objective was 1mb file capped at 10s, running in a loop.

On-page Animation

Much like the in-stream sequence, the on-page checkout process is far more efficient than a dedicated cart page, but our criteria remained the same; 10s loop, under 1mb. We opted for GIF in this case, which kept files small enough but still able to maintain the native 30fps for smooth playback.

Paywall Animation

The final animation depicts the ability to paywall any link and integrates the cart functionality for quick signups without navigating off page or employing wonky modals.

Assorted Banners

In addition to the Venby site refresh, we also created a new banner and screenshot mockups for their Warehouse Popups plugin, which is being concurrently developed alongside Venby. Check out more info here.

Result

Head over venby.io to see all these items in action, and if you have an online shop, maybe consider upgrading your eCommerce checkout experience for your customers while you’re there.