Training HP Web standards overview

Nandini Nayak HP.com September, 2003

2003 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change

Agenda
Operation

One Voice Brand overview Goals for the Web redesign Introduction to the new design Getting started Web standards site orientation Compliance Development tools Q & A

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 2

Course objectives
After

completing this course, you should have an understanding of:

The basics of the new brand system The direction and goals for HP.com The implications of this redesign The content of the Web standards site Your compliance responsibility

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 3

Operation One Voice

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 4

Operation One Voice

Cross-company

initiative designed to align and streamline our marketing communications to help us achieve unified world-class integrated marketing communications for HP. The goals of this initiative are to:

Ensure all HP communications elements have one common brand look and feel. Create consistency, clarity, coherence and predictability in all communications. Develop common tools and processes. Build on momentum and impact from current brand campaign. Develop solutions in highly collaborative style, with no preconceptions or biases.
HP Web standards site - http://www.hp.com/hpweb page 5

September, 2003

Operation One Voice Tiger Teams

To

help accomplish One Voice initiatives goals, a number of tiger teams have been formed. Tiger teams are comprised of a blend of business group, region and corporate employees. These teams are currently focused on the Public Relations following disciplines:Industrial design Advertising

Alliances Channel communications Collateral design Collateral systems & support Customer wins & references Direct marketing

Internet / website Leverage media Marketing Resource Management Packaging Photography Point of Sale

Sales Force Communications Sponsorships Trade Shows & Events User Interface Vendor Consolidation

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 6

Internet Tiger Team members

WW eBusiness

Businesses

Regions

GB&C

Stephanie Acker-Moy Scott Taylor Nandini Nayak David Bergen Agency.com team Linda Thrower Anna Kremer Judy Redman Alison Watterson Tim Anderson Paul Horstmeier Amy Delgado Ted Speroni Sara Woodward Bryan Stahmer Sam Lucente

HP.com (Lead) HP.com HP.com WW eMarketing Agency.com PSG IPG ESG HPS AP NA LAR EMEA GB&C Web GB&C Brand GB&C Brand
page 7

September, 2003

HP Web standards site - http://www.hp.com/hpweb

The model for alignment: 360 brand experience

Sponsorships Advertising Product Design Internet/ Websites Direct Marketing HP brand promise Collateral
Application of our brand style, by segment How well express the customer segmentspecific attributes of the HP corporate brand in every way we touch the customer Vehicles Tangible expression of our position in the market Customer segment brand position How we uniquely deliver on the HP brand promise as applied to each of our customer segments

Public Relations

Application of our brand attributes, by segment Our characteristics which uniquely support the brand positioning

Point of Sale

Trade Shows Packaging & Events Sales force comm.

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 8

All-HP message
Why should customers have to choose between: Innovation and price? Functionality and simplicity? Stability and agility? Cost and high customer satisfaction? Dont compromise. Choose HP.
CE

1 2

HP delivers more. +hp = everything is possible.

Innovation at a price our customers can afford, delivered in a way that sets us apart.

Enterprise. Demand more.

CEO/CIO + HP. HP delivers more of what enterprise customers demandmore accountability, more agility and a better return on IT.

SMB. Get more.

Business owner + HP. HP allows business owners to get more by deliveringmore reliability, more service and support, more local expertiseall at a competitive price.

HP delivers more.
gh Hi
tT

Consumer. Enjoy more.

You + HP. HP allows you to enjoy more of life by delivering simple and rewarding technology experiences that are uniquely innovative, intuitive and empowering.

ch - te

Be s

Low cost
September, 2003 HP Web standards site - http://www.hp.com/hpweb page 9

Foundational HP brand elements

Pervasive throughout our communications, applied through specific standards, never replaces our logo

Brand device Photography Illustration

Bold, rich, simple, optimistic, dynamic, believable, timeless In certain cases, illustration may be suitable, or more inventive, than photography

Graphics

Approved photos and graphics will be available in the Creative Resource Library (CRL)

A new unifying element; enhances the meaning of the communication, not arbitrary or Core color palette decorative Bold, rich, vibrant; powerful impact within a narrow palette; optimized for digital publishing

Typograph y HP invent logo

Blue and black, blue, black or reversed white

HP Futura
i n v e n t

Tone of voice
September, 2003

human, optimistic, intelligent, informative, dynamic, and witty

i n v e n t

HP Web standards site - http://www.hp.com/hpweb

page 10

Internet Tiger Team goals

The OOV Internet Tiger Team maintained four primary goals while conducting the design assessment: Adhere to the brand Maintain current information architecture (IA) and site structure Minimize cost for deployment/conversion Ensure any changes maintain or enhance site usability
September, 2003 HP Web standards site - http://www.hp.com/hpweb page 11

HP.com customer experience evolution

Adweek 2003 Technology Marketing's ICON Platinum Award for Best Interactive Web Site Category HP.com

American Business Awards Stevie for Best Corporate Web Site HP.com

Ranked #1 amongst High-technology companies for online Customer Respect by the Customer Respect Group HP.com

Internet Retailers 2003 Best of the Web High-Tech line-up HPShopping

2003 (One Voice) 2003 (current)

Complexity, Cost, Competitive risk

HP IT Resource Center support site was selected as one of the 2003 "Ten Best Web Support Sites" by the Association of Support Professionals (ASP).
September, 2003

2002 (day 1 after merger)

HP -Compa q merger

myHP.co m HP.co m
(personaliz ed, dynamic rendering)

2001 (pre-merger)

Ecommerc e Baselin e info.

HP.co m B2B

1995
HP Web standards site - http://www.hp.com/hpweb

2003+

Future
page 12

Introduction to the new design

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 13

The new design HP home page

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 14

The new design segment landing page

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 15

The new design directory page

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 16

The new design product / content level page

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 17

The new design product / content level page

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 18

Whats changing

Key design changes Capitalization Color Text color usage Buttons Tabs Imagery Promotions Design system hierarchy

Key technical changes New templates Stylesheet modifications New meta data Theme color implementation HTML buttons Country / Language codes Header markup Metrics gathering

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 19

Color palette

The available theme colors are:

* for use on
corporate pages only

The supporting grays are:

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 20

Whats staying the same

Information

architecture C-frame structure Column structure Navigation Breadcrumbs Fonts Link indicator

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 21

Getting started

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 22

Getting started
To

get ready to migrate to the new standards:

Attend the design and technical training as appropriate

Introduction to HP.com design elements Implementing the HP.com technical guidelines

Access the Web standards site

Familiarize yourself with the guidelines by reading

through the styleguide Link to, and review the Privacy and Accessibility guidelines Learn your compliance responsibilities Obtain new versions of develolpment tools Download the new templates and other key assets
September, 2003 HP Web standards site - http://www.hp.com/hpweb page 23

HP Web standards site

Everything

you need to develop compliant pages is available at the Web standards site: http://www.hp.com/hpweb

Complete styleguide in both HTML and PDF formats Templates and other assets Compliance guidelines Training Important links

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 24

HP Web standards home

*

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 25

HP Web standards home continued

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 26

HP Web standards home continued

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 27

Privacy and Accessibility

In

addition to complying with the design guidelines, you must also comply with HPs privacy and accessibility guidelines Link to detailed information on both privacy and accessibility guidelines from the Web standards home page
September, 2003 HP Web standards site - http://www.hp.com/hpweb page 28

Migration and compliance schedule

Timeframe:

March 31, 2004 Scope: All Web sections

A

recommended first priority tier is currently being evaluated

Timeframe: January 31, 2004 Scope: ~228 WW and NA Web sections

Extensions

of the deadlines will be granted on a case-by-case basis through the existing exception process, see:
http://www.hp.com/hpweb/compliance/exception.html
HP Web standards site - http://www.hp.com/hpweb page 29

September, 2003

Compliance

Each Web section owner must complete the 5-step Compliance process while migrating to the new V1.2 standards Web-section can be published only after receipt of the Site Launch approval message All exceptions, extensions or exemptions granted for the previous V1.1standards are not valid for the new V1.2 Details and important Compliance and Publishing process links are available from the Web standards site http://www.hp.com/hpweb/compliance
Latest information on the Compliance process Migration Schedule and recommended first-tier list Publishing process Exception process Compliance Team contacts - http://www.hp.com/hpweb HP Web standards site

September, 2003

page 30

Compliance and Publishing process

September, 2003

From the Web standards home page, begin by linking to the Compliance and Publishing process page

HP Web standards site - http://www.hp.com/hpweb

page 31

Compliance and Publishing process continued

Scroll down the page to find the link to the Publishing Process

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 32

5-Step Compliance process

Review and complete the 5step Compliance Process Important note IRIS has been replaced by the new Publishing Interface

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 33

5-Step Compliance process continued

Step 1 If your web section has been approved, proceed directly to Step 2 Step 2 - All web sections must be registered
If your web section is already registered, proceed to Step 3 Notes:

Web section and user data has been transferred to the new system Compliance process data relating to New HP Web Standards version 1.1 Prototype

Evaluations, Self-Assessments, and Post-Self-Assessment Reviews has been archived and is available upon request

Step 3 Submit a one-page prototype that was developed using HP Web Standards version 1.2 for evaluation by the Compliance team Step 4 Fill out two self-assessment Web forms Design and Accessibility http://www.hp.com/go/publishinginterface

Step 5 The Compliance team conducts a post-self-assessment review to verify that Self-Assessments have been submitted. If all conditions page 34 HP Web standards site - http://www.hp.com/hpweb September, 2003

Development tools

Access section 3.1.7 of the Build guide for a list of the recommended tools for: HTML development Graphics production HTML validation Accessibility testing
Diagnostic tools Screen readers Text based browsers

This section also has links to download HP.com standard development tools like SNF+ and WPA
HP Web standards site - http://www.hp.com/hpweb

September, 2003

page 35

Templates and other assets

Link to the Download assets page from the Web standards home page to obtain new templates and other items you will need to begin developing pages
page 36

September, 2003

HP Web standards site - http://www.hp.com/hpweb

Download assets page

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 37

Conclusion

The Operation One Voice initiative aligns all HP communications to provide a 360 brand experience to the HP customer

For additional information on Operation One Voice visit the brand site: http://www.hp.com/go/brand

The HP.com design has changed to align with the new brand and improve customer satisfaction

All web sections must migrate to the new design by March 31, 2004

Access the HP Web standards site for everything you will need to migrate: http://www.hp.com/hpweb Learn and follow the design, accessibility, and privacy guidelines Do not launch your site until you have completed the compliance process and received site launch approval
HP Web standards site - http://www.hp.com/hpweb page 38

September, 2003

HP logo

September, 2003

HP Web standards site - http://www.hp.com/hpweb

page 39