hilton luxury brands site redesign

Download Hilton Luxury Brands Site Redesign

Post on 18-Oct-2014

742 views

Category:

Design

9 download

Embed Size (px)

DESCRIPTION

As part of the re-architecture and prototyping for an extensive redesign of Hilton sites, the luxury brand presented the challenge of fitting both sites into 16 templates The sites for Conrad Hotels and Waldorf Astoria were going to have two distinctly different layouts, yet the tech team constrained us to 16 templates that would then be handed off to Accenture to develop off of. With a team of 2 we worked on the idea of crating a different style sheets for each brand sharing the same elements. This was achieved by creating a detail templatize site that will work seamlessly across the 2 brands as well as on screen and mobile devises Finally we used Axure to produce documentation for the Tech team highlighted different areas and annotated the functionality. By doing so the Tech team was able to export our annotation in a Word document and filled in the remaining details.

TRANSCRIPT

Wireframe Review_V3_2010-11-16.graffle

Luxury Brand Sites Rearch: Wireframes v1.0.0

November 10, 2010

CONFIDENTIAL AND PROPRIETARY

This document contains confidential and proprietary material of Hilton Worldwide and Organic Inc.. The use and dissemination of this document's contents are governed by the confidentiality provisions of the applicable agreement between the parties. Any copying, use or distribution beyond that permitted in the applicable agreement is strictly prohibited.

Luxury Brand Sites RearchWireframes v1.0.0

November 10, 2010

Page 2 of 84

Wireframe: Document Version & Legend

This diagram does not represent the final site structure, design or copy. 2010 Organic Inc. Proprietary and Confidential

VERSION ABOUT THIS DOCUMENT

MODIFICATIONS

v1.0.0

VERSION

Initial document created

DATE

11/10/10

MODIFIED BY

Soto, Marinelli, & Lin

What is a Wireframe?

Wireframes are a page blueprint prior to the visual design used to illustrate the flow of information, document all objects to be included on the page, and show the behavior and states of some of these objects. They are not meant to reflect actual design or content.

Design Aspects for Consideration:

Representation of selected content and functionality that will reside on a page to bring the strategic concept to life.

An allocation of page real estate to illustrate priority and placement.

Intent of copy - indicative of the eventual design. This includes titles, labels, links, prompts, and instructions.

Schematic that identifies key page areas (zones).

Direction for visual design explorations.

Aspects Not for Wireframe Review:

Final copy or branding treatments

The design/look & feel of the page

Representation of the specific photography to be used

The final layout of future content and functionality

Represent annotations that create a relationship between a visual element and a text description.

CONTAINER

[XX]

Image

Link Destination utilizing the sitemap ID of the page, or url if an external link

Callout

FOOTER

EN | DE | ES | NL | PT

Search

LOGO

PRIMARY NAVIGATION

IMAGE

Callout Callout Callout

Headline Lorem IpsumMarkting copy lorem ipsum dolor sit amet, carebitum dilerem siterius borus.Lorem ipsum >

WIREFRAME EXAMPLE

LEGEND

11

Note

Luxury Brand Sites RearchWireframes v1.0.0

November 10, 2010

Page 3 of 84

Wireframe: [Agenda] Objectives du Jour

This diagram does not represent the final site structure, design or copy. 2010 Organic Inc. Proprietary and Confidential

1. Objectives du Jour

! What's on Deck

! To Review, or not to Review

Luxury Brand Sites RearchWireframes v1.0.0

November 10, 2010

Page 4 of 84

Wireframe: [Agenda] What's on Deck

This diagram does not represent the final site structure, design or copy. 2010 Organic Inc. Proprietary and Confidential

1.1 What's on Deck

High-level design considerations

Waldorf Astoria, Conrad, and common wireframes

Q&A, discussions, and feedback collection

Luxury Brand Sites RearchWireframes v1.0.0

November 10, 2010

Page 5 of 84

Wireframe: [Agenda] What to Review

This diagram does not represent the final site structure, design or copy. 2010 Organic Inc. Proprietary and Confidential

1.2 To Review, or not to Review

! Yes

Directional layout and placement

Interaction model

Navigation system

Content grouping

Basic functions of user tools

! No

Exact layout and placement

Nomenclature and copy

Content matrix

Technical implementation

Global XA elements

Luxury Brand Sites RearchWireframes v1.0.0

November 10, 2010

Page 6 of 84

Wireframe: [Agenda] What's on Our Minds

This diagram does not represent the final site structure, design or copy. 2010 Organic Inc. Proprietary and Confidential

2. What's on Our Mind

! A Luxury Experience

! The New Convention

! Transaction Plus+

Luxury Brand Sites RearchWireframes v1.0.0

November 10, 2010

Page 7 of 84

Wireframe: [Agenda] A Luxury Experience

This diagram does not represent the final site structure, design or copy. 2010 Organic Inc. Proprietary and Confidential

2.1 A Luxury Experience

An reflection of brand essence

Extending services into digital space

Waldorf Astoria: Singular experiences

Conrad: Progressive sensibility

Luxury Brand Sites RearchWireframes v1.0.0

November 10, 2010

Page 8 of 84

Wireframe: [Agenda] The New Convention

This diagram does not represent the final site structure, design or copy. 2010 Organic Inc. Proprietary and Confidential

2.2 The New Convention

Portal ! Search ! Convergence ! Touch

UI interoperability: Point-n-click + gesture

Trending toward open space, dynamic navigation, fluid movement, and immersive experience

Luxury Brand Sites RearchWireframes v1.0.0

November 10, 2010

Page 9 of 84

Wireframe: [Agenda] Transaction Plus+

This diagram does not represent the final site structure, design or copy. 2010 Organic Inc. Proprietary and Confidential

2.3 Transaction Plus+

Leveraging Hilton search and res engine

Elevated customer relationship via integrated content, services, offers, and booking features

Contextually aware and personalized experience throughout user journeys

Luxury Brand Sites RearchWireframes v1.0.0

November 10, 2010

Page 10 of 84

Wireframe: [Agenda] Wireframes Review

This diagram does not represent the final site structure, design or copy. 2010 Organic Inc. Proprietary and Confidential

3. Wireframes Review

! Interaction & Navigation: Waldorf Astoria

! Interaction & Navigation: Conrad

! Digital Concierge

! Explore Our Hotels Page

! Offers Page

Luxury Brand Sites RearchWireframes v1.0.0

November 10, 2010

Page 11 of 84

Wireframe: Waldorf Astoria Site, Brand Navigation Items

This diagram does not represent the final site structure, design or copy. 2010 Organic Inc. Proprietary and Confidential

Home

Brand Level

Events & MeetingsThe Waldorf Astoria Experience

Explore Our Hotels OffersAbout Waldorf Astoria

Footer Item

Spa

Golf

Uniquely Waldorf Astoria

Meetings

Social Events

Weddings

Green Initiatives

Development

Future Opening

Leadership

Note: This is not a site map.

Does not include Global XA items.

Luxury Brand Sites RearchWireframes v1.0.0

November 10, 2010

Page 12 of 84

Wireframe: Waldorf Astoria Site, Property Navigation Items

This diagram does not represent the final site structure, design or copy. 2010 Organic Inc. Proprietary and Confidential

Home

Property Level

Events & MeetingsAmenities & Services

Highlights Hotel Information About [Destination]

Golf

If available

Restaurants & Bars

Spa

If available

Meetings

Social Events

Weddings

Local Attractions

Neighborhood History

Destination Guide

Note: This is not a site map.

Does not include Global XA items.

Guest Rooms

[Item the hotel wants to showcase]

Optional

Gallery

Exclusive Offers Resort Activities

If available

[Unique amenities/services]

Optional

Location & Tranportations

Hotel History/Stories

Hotel Overview

Recent Refurbishments

If notable

Hotel Policies

Media Center

Luxury Brand Sites RearchWireframes v1.0.0

November 10, 2010

Page 13 of 84

Wireframe: Waldorf Astoria Site, Interaction Concept

This diagram does not represent the final site structure, design or copy. 2010 Organic Inc. Proprietary and Confidential

Page

Chapter

Home Promo 1 Promo 2 Promo 3 Waldorf Astoria Experience

(LP)

Uniquely Waldorf Astoria

Spa Golf Events &Meetings

(LP)

Weddings Meetings SocialEvents

Home Waldorf Astoria Experience Events & Meetings

Concept: Glossy Magazine/Coffee Table

Book

Luxury Brand Sites RearchWireframes v1.0.0

November 10, 2010

Page 14 of 84

Wireframe: >Waldorf Astoria Brand, Home 0.0 2

This diagram does not represent the final site structure, design or copy. 2010 Organic Inc. Proprietary and Confidential

[Global XA Footer]

Sign Out Look Up My Reservation I Join HHonors

[Global XA Header & Digital Concierge]

Waldorf Astoria Experience Events & MeetingsExplore Our Hotels

[WA Logo]

!"#$#!%

!"#$#!&

!"#$#!'

Waldorf Offers

WA