david hildebrand // digital creative director

email * [email protected] twitter * dh_designphone * 323 * 428 9792 facebook * facebook.com/d.w.hildebrand

D I G I TA L C R E AT I V E D I R E C T O R

recent work / fall 2012

CONTENTS

WESTFIELD / NATIONAL DIGITAL PROJECTS

1 The Westfield App 2.0 / mobile app

7 Westfield HD / tablet app

9 Westfield Cloud / integrated mobile strategy

WESTFIELD STYLE / FASHION PLATFORM

ONLINE

11 Monthly content

12 Email

13 Interactive magazine

14 Video

15 YouTube & Twitter

16 Pinterest

IN-CENTER DIGITAL

19 Style Tour app (pre-event)

20 Style Tour app (event)

21 Style Lounge / mobile-friendly site & tablet app

CONSULTING

23 USA Artists

24 Starworks Artists (back-end web)

26 Starworks Artists (front-end web)

p1 p12 p16 p24

David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p1

The Westfield App 2.0DESIGN & FEATURES

Reinvented The Westfield App, Westfield’s popular shopping tool for iOS and Android by establishing a high-end look/feel, an extensible design language and enabling future-forward features like voice control and lively social media integration.

Home Menu Social

Concierge — We analyzed data from a variety of sources including text-to-concierge and actual in-center data to make voice control bulletproof in The Westfield App. Through helpful hints and friendly feedback, Concierge offers a “better than Siri” UI experience.

Search — Through an exclusive partnership with Google, we were able to broaden the Search experience beyond the core expectations (retailers, offers) and integrate live Product Search right into a single UI, making The Westfield App the only mall app in the world with integrated product data.

1. Start 2. Entry

3. Results 4. Product details

Product Search powered by

WESTFIELD EXCLUSIVE


The Westfield App 2.0DESIGN & FEATURES (CONT.)

Turn-by-turn Directions


The Westfield App 2.0DESIGN & FEATURES (CONT.)

Best-in-class turn-by-turn directions get shoppers from one location to another. We developed a system that is not GPS-dependent and works regardless of signal or WiFi issues.

Digital heroes — contextual messaging system featuring targeted copy and images


The Westfield App 2.0MARKETING (DIGITAL)

Oversaw online marketing campaign that dominated Westfield.com, all Center Facebook pages, Twitter and more. Worked with video vendor to create YouTube videos that doubled as buzz builders and as mini-tutorials.

Download page Email


The Westfield App 2.0MARKETING (DIGITAL) Animated emails and a video-rich microsite helped to draw traffic and downloads.


The Westfield App 2.0MARKETING (ON-SITE)

Worked with Brand Studio partners to execute massive on-site marketing involving concierge booth integration, 3D signage, iPhone cases, parking garage dominations, Digital LED creative and on-site “app ambassadors”.

COMING FALL 2012


Westfield HD DESIGN & FEATURE SET

Westfield HD is the first high definition shopping mall tablet app. Featuring rich content from Westfield’s Style and Family platforms and retailers, the app offers a dynamic look/feel consistent with The Westfield App providing shoppers with a cutting-edge user experience.

The Planner

HD Style and Family content & integrated Twitter feed In-line HD video content from Westfield Style Interactive maps with turn-by-turn


powered by

Westfield Cloud

Shopping, dining, movies and more.Plan and sync your mall visit between any device.

The Planner

Westfield HDDESIGN & FEATURE SET (CONT.)

The Planner — powered by the Westfield Cloud — brings a holistic, interconnected cloud-based experience that spans devices. Build your shopping trip on your tablet and watch it sync to the Westfield app on your smartphone. In-line Twitter feeds, HD video, interactive maps and voice control round out the feature set.


2012Q4

2013Q1

• Launch of The Westfield App 2.0 for Android

• Update release of The Westfield App (2.1) for iOS adding support for larger iPhone 5 screen*

• Update release of The Westfield App (2.2) (for iOS and Android) bringing MyWestfield cloud support

• Launch of Westfield HD 1.0 for iOS

• Launch of MyWestfield giving shoppers the ability to sync their Favorites and preferences to the cloud

• Launch of Westfield HD for Android

The Westfield App 2.0

Westfield HD

Red text denotes major launch or debut* Potential update based on rumors about iPhone 5 / subject to change

Westfield CloudINTEGRATED MOBILE STRATEGY

Offers I Love

My Favorite Stores

My Marketing Preferences

My Shopping List

Your personal Concierge — in the palm of your hand

The Westfield Cloud strategy I conceived is the hub that ties together the user experience across all of Westfield’s apps. It encourages “stickiness” and loyalty and the analytics gathered from its usage will prove invaluable as the team makes future decisions on key features and functionalities.

WESTFIELDSTYLE / Part 1: ONLINE

Westfield Style Home

Ask A Stylist

Stacy’s Top 5


Westfield Style monthly content ONLINE

Creator of Westfield Style Digital, a 360 degree style experience for shoppers involving web, social, email and mobile content leveraging our relationshop with our retailers and Stacy London. I expanded Westfield Style from seasonal updates to daily, year-round content.


Westfield Style email EMAIL

Westfield Style email campaigns (monthly content emails, Style Tour & Style Lounge emails) have been wildly successful driving major gains in open and click-through rates and remain above industry-average every month.


Interactive magazine SEASONAL CONTENT Sample spreads from Westfield Style magazine which is made browsable and downloadable online.

Sample videoWestfield’s YouTube page reskinned seasonally to coordinate with the Style platform


Video SEASONAL VIDEO COORDINATED WITH MAGAZINE CONTENT

I oversaw video content tied to Westfield Style magazine. Photo shoots were planned and coordinated to create compelling video that brings the magazine pages to life while driving traffic and flow throughout the Westfield Style universe of web, email, social and mobile.

YouTube home Twitter home


YouTube & Twitter HOME AND CONTESTS I coordinated YouTube and Twitter takeovers to keep the ecosystem lively and fresh.

Pinterest home Contests


Pinterest HOME AND CONTESTS

Westfield Style’s Pinterest and Twitter pages have been brought to life through engaging contests like Stacy’s Pinterest Challenge and Make Mom a Model Tweetstakes. These promotions have seen great engagement and succeeded in driving buzz and traffic across the style ecosystem.

WESTFIELDSTYLE / Part 2: DIGITAL ON-SITE

Style Tour is a twice a year, multi-mall event where shoppers can enjoy appearances by fashion celebs and get free styling and beauty bar sessions …

... my team created an ecosystem of tablet apps and mobile-friendly web sites to make the event more efficient for event staff, provide a smoother experience for our shoppers

and drive increased sales for our retailers.

Fall Style Tour Spring Style Tour

Style Tour app home screen Make reservation Add/edit product Assign beauty bar station


Style Tour staff uses the app to create the event, manage reservations, add stylists and beauty bar attendants, and scan clothing to be used in the styling sessions...

Style Tour appIPAD EVENT TECHNOLOGY

A. Pre-event


1.Shopper arrives at the Style Tour …

2.Event staff checks the shopper in and retrieves their appointment and profile …

3.Stylist works with the shopper — pulling items and using the iPad to scan item tags …

4.Shopper receives a customized “take home” Shopping List via print out and email.

Style Tour app (cont.)IPAD EVENT TECHNOLOGY

B. Event

Style Lounge mobile-friendly RSVP site

On-site experience — The entire experience is managed from a single iPad that

can be updated and controlled remotely.


THE WESTFIELDSTYLE LOUNGE

Shoppers book appointments in-center or from home using a mobile-friendly site…

Lounge Stylists generate customized Shopping Lists, take client photos, and book follow-ups using the iPad app.

Style Lounge appMOBILE-FRIENDLY RESERVATION SYSTEM AND ON-SITE TABLET APP

A. Event B. Event

CONSULTING

01. New nav. I pared down the site content. 02. Featured projects. I improved the visual appearance, integrated social media, and added a carousel to liven up the page. 03. Donor profiles. Improved design, integrated video. 04. “I am” module. Routes audiences to the appropriate content. 05. Stories. Improved visual treatment.


USA Artists INFORMATION ARCHITECTURE

Art world giant USA Artists (Eli Broad is a founder, Target is the main sponsor) was maintaining two separate sites with different goals, functionality and audience. They realized that they needed to merge the two sites into one and present a cohesive online experience but weren’t sure how to go about it. I leapt at this opportunity as it combined my interests in emerging artists and good information design.

original sites new merged site

plussocial media

features

wireframe

PROJECTS PAST FELLOWS STORIES SHOWCASES ABOUT SEARCH

I AM...

AN EMERGING ARTIST

AN ESTABLISHED ARTIST

A CORPORATE DONOR

AN EDUCATOR

WELCOMETOUNITEDSTATESARTISTS

FEATURED PROJECTS

DONOR PROFILES

Title of the projectby Jane Artist

Epudaeperum, to et etur, verum volut il ipsam corerat istius, sum et aut provide rciatur sita imet repel et in re eum voloreh enihil ipienti asperna tquae. Cumquamet ate velicturest mi, cores et, quam etustem. Learn more

Tweet Post to Facebook Support

0%

100%

$4,500

Title of the projectby Jane Artist


Tweet Post to Facebook Support

0%

100%

$4,500

Headline element — rework a quote from the full text

Jane Donor


Headline element — rework a quote from the full text

Jane Donor


Play Video Play Video

STORIES

Play Video

See all stories

2

3

4

5

1

general site project site

focus: corporations, wealthy donors focus: individual micro-donors

Artist and set editor — The user scrolls vertically through artists in the hair category. In the above scenario, the user has rolled over Adir’s “Portfolio” set triggering the “Edit Set” option to appear over the thumbnail. Clicking it takes you to...

Portfolio set editor — Here images can be resequenced and added. Metadata associated with each image can also be edited.


Starworks Artists AGENCY PORTFOLIO SITE (BACK-END)

PORTFOLIO EDITORHAIRHAIR

PORTFOLIO RED CARPET OTHER

EDIT SET

ADIR ABERGEL (X) REMOVEEDIT ARTIST NAME

+ CREATE NEW ARTIST


AVIVA (X) REMOVEEDIT ARTIST NAME


JOHN D (X) REMOVEEDIT ARTIST NAME

LOG OUT

+ ADD SET

+ ADD SET

+ ADD SET

JANE USER

ADIR ABERGEL

SELECTED IMAGES

1 3

SAVE

ALL SETS : EDITORIAL

4

AVAILABLE IMAGES

2

DRAG/DROP IMAGES INTO DESIRED ORDER

HAIRHAIR

UPLOAD

EDITMETADATA REMOVE

PORTFOLIO EDITORLOG OUTJANE USER

portfolio editor (wireframe)artist and set editor (wireframe)

With busy artists working in multiple mediums, Starworks Artists needed a powerful system for updating the portfolios of their artists. I delivered an easy-to-use interface that gives everyone at the company (from assistants to the agents themselves) the ability to upload images, add them to sets and intuitively edit the sequence.

Drag/drop — Images are manipulated in simple drag/drop fashion. Manipulating the sequence of the images is critical to their site and artist portfolios are tweaked constantly. To add new images to a sequence, you just drag them from the “Available Images” well at the bottom into the “Selected Images” well above it.

Batch upload — Images can be uploaded in batches to speed up the workflow. Selectors are pre-populated with the correct metadata based on the set you’re in (but can be adjusted if you want to upload into a different artist or set). Progress indicators provide real-time feedback.


Starworks Artists (cont.) AGENCY PORTFOLIO SITE (BACK-END)

ADIR ABERGEL

SELECTED IMAGES

1 3

SAVE


4

AVAILABLE IMAGES

2


HAIRHAIR

UPLOAD


ADIR ABERGEL

SELECTED IMAGES

1 3

SAVE


4

AVAILABLE IMAGES

2


HAIRHAIR

UPLOAD


BATCH UPLOAD

(X) CLOSE

ADIR ABERGEL EDITORIALIMAGE 1

ADIR ABERGEL EDITORIALIMAGE 2

SELECT ADIR ABERGEL EDITORIALIMAGE 3



DONE!

UPLOAD

batch upload (wireframe)drag/drop image sequencing (wireframe)

01. Fresh content. Images are randomly pulled onto the home page to keep things fresh. HTML5 powers the transitions and animations for an iPad-friendly, Flash-free experience.

02. My Portfolio. Innovative functionality separates their site from the competition – see page 5 for more detail on this feature.


Starworks Artists AGENCY PORTFOLIO SITE (FRONT-END)

A-list celebrity beauty agency Starworks Artists needed an equally high-end site to showcase the work of their top stylists, hair and makeup artists. I created an innovative site that took things a step beyond the norm and raised the bar for sites in their industry. A clean home page with HTML5-powered, subtle rotating images sets the tone...

02

01

01. Artist portfolio. Users can navigate between “Red Carpet” and “Editorial” work via clear navigation. 02. Rollovers reveal extra functions. Features are revealed intuitively when you need them. Users can switch into full screen mode, tweet, post to Facebook or add to their own custom portfolio (more on that later) .


Starworks Artists (cont.) AGENCY PORTFOLIO SITE (FRONT-END)

Artist portfolios are clean and put the artist’s work front and center. Subtle scroll cues, add to portfolio and other social media features reveal themselves on mouse over – but stay hidden during normal viewing...

artist portfolio page

additional image features

Full screen gallery — The full-screen gallery gives a Flash-like experience without any of the annoying Flash-compatibility issues. Pictures are blurred in the background to make the key image pop, but still give you context for where you are in a sequence.

“My Portfolio” editor — My client’s favorite part of the site. Users can build a quick portfolio to use as a reference for an artist’s work or to generate more ideas for a project. It’s social media that’s useful and usable. Users can also rearrange the images and edit the sequence via drag/drop.


Starworks Artists (cont.) AGENCY PORTFOLIO SITE (FRONT-END)

A cutting-edge HTML5-powered full screen gallery provides a cool, Flash-like experience but is fully iPad and iPhone-compatible (ie. Flash-free). The “My Portfolio” editor allows the user to re-arrange photos, add a note and email them to friends. This functionality does not exist on any of their competitors’ sites.

"my portfolio" editor and share functionalityfull screen gallery browser using HTML5

D A V I D @ D A V I D H I L D E B R A N D . C O M

david hildebrand // digital creative director

Documents

Transcript of david hildebrand // digital creative director