angle-left angle-right angle-down angle-up

Changing the shopper experience.

VisibleBrands

, , ,

VisibleBrands is a comprehensive media system that optimizes business efficiency for brands and retailers, while delivering interactive touch-screen experiences to their customers. The media network engages individual shoppers in real time at the moment they make decisions— all based on data patterns, analytics, current location and inventory.

As they were ready to expand to more stores, they needed a redesigned website that would explain all the capabilities, technologies, and case studies in great detail. A video was also being produced to showcase the system features, and so I conceptualized and designed multiple special effects and graphic interfaces that were added to the video and animated.

01.
The Website

Website Design, Responsive UI/UX, Front-end Development

visiblebrands-website

Responsive Design

A completely responsive design ensures a premium experience for users on all devices. Optimization of images and specific site features makes the website lightning fast for visitors on mobile bandwidths.

vb-home-responsive
vb-how-works-responsive

Interactive

The experience is enhanced for modern devices by incorporating parallax backgrounds, interactive animations, and fullscreen video backgrounds. CSS animations and transitions create subtle movements which engage users as they interact with page elements.

Iconography System

A large number of custom icons were developed to extend the visual language of the VisibleBrands system. These are paired with several universally recognized icons for a clear and concise user interface.

visbrands-icon-design

02.
The Video

Special Effects (F/X) and Conceptual Design

I was tasked with conceptualizing and designing the look and feel of various special effects for the video. There were effects applied to real-life objects, as well as a system HUD (Heads up display) that would show the calculations and operations being processed by the VisBrands system.

Intro Equations

We met with the engineering team to find real equations used by the VisibleBrands system, monitoring shopper speed and velocity, trip duration, demand index and shopping intent, among others.

vb-video-fx-animation-intro-1
vb-video-fx-animation-intro-2

Moment of Decision

Coupons are displayed to the customer at the moment they start making a decision on what to purchase. They see a coupon for a different brand that is on sale.

This causes a brand shift, as the customer taps the screen and grabs the item, the coupon is automatically added to their digital cart and saved for checkout.

vb-video-fx-animation-coupon-brand-1
vb-video-fx-animation-coupon-brand-2

Checkout Transfer

When the customer begins to check out, all the coupons they have selected are automatically transferred and applied. They system tracks all ads that were served, even if not selected by the customer.

vb-video-fx-animation-coupon-redemption-1
vb-video-fx-animation-coupon-redemption-2

Brand Impressions

Brands and retailers have a constant, real-time count of every impression served throughout the day.

vb-video-fx-animation-brand-connects-1
vb-video-fx-animation-brand-connects-2


Related Work

Click here to view all projects