david hildebrand // digital creative director
TRANSCRIPT
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
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p2
The Westfield App 2.0DESIGN & FEATURES (CONT.)
Turn-by-turn Directions
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p3
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
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p4
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
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p5
The Westfield App 2.0MARKETING (DIGITAL) Animated emails and a video-rich microsite helped to draw traffic and downloads.
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p6
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
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p7
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
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p8
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.
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p9
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
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p11
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.
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p12
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.
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p13
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
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p14
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
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p15
YouTube & Twitter HOME AND CONTESTS I coordinated YouTube and Twitter takeovers to keep the ecosystem lively and fresh.
Pinterest home Contests
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p16
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
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p19
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
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p20
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.
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p21
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.
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p23
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
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
Headline element — rework a quote from the full text
Jane Donor
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
Headline element — rework a quote from the full text
Jane Donor
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
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.
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p24
Starworks Artists AGENCY PORTFOLIO SITE (BACK-END)
PORTFOLIO EDITORHAIRHAIR
PORTFOLIO RED CARPET OTHER
EDIT SET
ADIR ABERGEL (X) REMOVEEDIT ARTIST NAME
+ CREATE NEW ARTIST
PORTFOLIO RED CARPET OTHER
AVIVA (X) REMOVEEDIT ARTIST NAME
PORTFOLIO RED CARPET OTHER
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.
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p25
Starworks Artists (cont.) AGENCY PORTFOLIO SITE (BACK-END)
ADIR ABERGEL
SELECTED IMAGES
1 3
SAVE
ALL SETS : EDITORIAL
4
AVAILABLE IMAGES
2
DRAG/DROP IMAGES INTO DESIRED ORDER
HAIRHAIR
UPLOAD
PORTFOLIO EDITORLOG OUTJANE USER
ADIR ABERGEL
SELECTED IMAGES
1 3
SAVE
ALL SETS : EDITORIAL
4
AVAILABLE IMAGES
2
DRAG/DROP IMAGES INTO DESIRED ORDER
HAIRHAIR
UPLOAD
PORTFOLIO EDITORLOG OUTJANE USER
BATCH UPLOAD
(X) CLOSE
ADIR ABERGEL EDITORIALIMAGE 1
ADIR ABERGEL EDITORIALIMAGE 2
SELECT ADIR ABERGEL EDITORIALIMAGE 3
SELECT ADIR ABERGEL EDITORIALIMAGE 4
SELECT ADIR ABERGEL EDITORIALIMAGE 5
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.
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p26
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) .
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p27
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.
David Hildebrand / DIGITAL CREATIVE DIRECTOR selected work / fall 2012 p28
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