Wrapify
Wrapify_CarWrapify_Car

Drive. Earn. Live.

Wrapify had an ingenious idea: pair drivers with advertisers to use personal vehicles as a visual communication platform; and to simplify and track results with the latest web technology has to offer. The Driver's Mobile App made it as easy as possible for drivers to sign up and become part of the Wrapify network. But advertisers needed the tools to build the mechanics of a campaign and upload their artwork for Campaign Creation - and track the results in the Advertiser Dashboard.

Campaign Creation 

Wrapify's business model depended on a platform that enabled advertisers to create and launch campaigns with an intuitive and automated system - so a clean UX/UI was paramount. 

PROJECT REQUIREMENTS

The steps for campaign and artwork submission requirements were well defined by industry standards - but Wrapify’s online experience needed refinement: the campaign parameters had to be established across date, location and pricing; artwork needed to be uploaded against placement type; and a linear process had to be divided into efficient, easily understood steps.

UX MAPPING & PROCESS FLOW

The process of creating a campaign was linear and straightforward, but for the potentially tech averse target user, the steps had to be broken down into small, tight sections.

UX DEVELOPMENT - WIREFRAMES

Extensive iterations were completed in Axure to cleanly define the campaign creation experience before UI work began. One of the tenants we kept coming back to was the need for the UX to be quick and  decisive to keep calls to Wrapify's customer service to a minimum. 

*Responsive design was not considered for this process - the user would be redirected to their desktop device if they accessed these pages on mobile. 

WRAPIFY_CAMPAIGN_WIRESWRAPIFY_CAMPAIGN_WIRES

Once the UX foundation was set, Google Material was decided upon for the over laying skin. A quick set of iterations followed to define a clean look for this interface.

Wrapify_Advertiser_UI_BEAUTY_v3Wrapify_Advertiser_UI_BEAUTY_v3
Wrapify_CAMPAIGN__FINALWrapify_CAMPAIGN__FINAL

Advertiser Dashboard

Once the campaigns were set and the drivers were out and about, Wrapify's advertisers needed a monitoring system to guage the reach and impact of their work - and in a quick, customizable overview. 

PROJECT REQUIREMENTS

 

Wrapify’s Campaign Tracker Dashboard had to provide a quick primary overview of the user’s active and inactive campaigns and significant detail as the secondary view. As a desktop-only web application, the design had significant technical requirements to accommodate Wrapify’s proprietary data sets and necessary granularity.

The client requested "lots of knobs and dials" to fine tune the data visualization - I was more than happy to accommodate. 

INITIAL CONCEPT

 

The original Dashboard concept featured much more immediate detail - something that was pushed back as we iterated. 

Wrapify_Dashboard_ORIGINALWrapify_Dashboard_ORIGINAL

UI DEVELOPMENT

The design process went through significant iteration in order to fine tune the technical requirements and satisfy Wrapify‘s aesthetic paired with Google Material. This included multiple passes on data visualization for the secondary tier of campaign data, as seen in these graph concepts. These were done to provide a quicker snapshot of pertinent data while being practical for Wrapify's developers. 

GRAPHS_RADIAL_STANDARDGRAPHS_RADIAL_STANDARD

FINAL ITERATION

The final iteration gave Wrapify campaign owners the primary information in a concise format, while making secondary but vital data sets easily available through scrolling. For advanced users, we included the option to customize the Dashboard according to their needs and preferences. 

DASHBOARD_FULLDASHBOARD_FULL
DASHBOARD_FULL_FILTERSDASHBOARD_FULL_FILTERS
Wrapify_ADVERTISER_BEAUTY_FINAL1Wrapify_ADVERTISER_BEAUTY_FINAL1

UI/UX DESIGNER

Brian Desautel

AGENCY

Infernal Machinery - 2016