summer 2011 - aetna · and brand elements that were used to redesign aetna.com. consistent and...

Aetna.com style & editorial guidelines

summer.2011

Style. The way in which

something is said, done,

expressed, or performed:

A customary manner of

presenting printed material,

including usage, punctuation,

spelling, typography, and

arrangement. Guide. A

book, pamphlet, etc., giving

information or, instructions;

handbook: a device that regulates

or directs progressive action:

This is a revised version of the original style guide created by Razor Fish

Table of Contents

aetna.com style guide

Welcome

1. Brand

Logo ...............................5

Palette ............................6

Typography ....................8

Typography Usage .........9

2. Visual

Photography ...................11

Illustrations .....................17

3. Navigation

Primary ..........................19

Left Channel...................20

Footer ............................25

Utility ..............................26

Call to Action ..................27

Tools ..............................28

Log In/Registration .........29

4. Design

Templates ......................31

Page Design ..................32

5. Components

Selector Tool Component ............... 40

Tab Component .............................. 41

Table Component ........................... 42

Center Channel Component........... 43

Center Channel 2 Promotional Box ........................ 44

Center Channel

3 Promotional Box ........................ 45

News Index Page ........................... 46

News Content Page ....................... 47

Forms ............................................. 48

Expandable Box Component .......... 49

Text Content Component ............... 50

Image and Text Component ........... 51

Related Links Component .............. 52

6. Multimedia

Flash Component .......................... 54

Video Component ......................... 58

7. Content

Writing Guidelines ......................... 59

8. Appendix

tbd ................................................. 68

In the autumn of 2009, Aetna.com was redesigned to focus more on the needs of our millions of

members – helping to meet their ever-growing demand for plan and benefits information online. We

improved website organization, personalization, navigation, and search to make each member’s experi-

ence more personal and more relevant – giving them the information they want quickly and with little

effort.

This style guide provides guidelines that will help you understand and apply the assets, specifications,

and brand elements that were used to redesign Aetna.com. Consistent and proper use of this guide is

essential in creating a unified brand experience, and will ensure that our members are engaged and

informed when they visit Aetna.com.

Welcome to the new Aetna.com.

aetna.com style guidep. 4

Section 1 Brand Logo

Color Palette

Typography

Typography Usage


section

p. 5

Brand.1

Logo. The logo resides in the up-

per left corner of the site and should

always appear there as a consistent

element and only be used once on

a page. The “We want you to know”

tagline has been removed.

Logo Usage Homepage 174 x 55 pixels

Logo Usage Subpage 155 x 49 pixels


section

p. 6

Brand.1

Individuals & Families

Hex. #A8B400

R.168 G.180 B.0

C.40 M.16 Y.100 K.1

Employers & Organizations

Hex. #E24C24

R.226 G.76 B.36

C.6 M.85 Y.100 K.1

Health Care Professionals

Hex. #E4B43A

R.228 G.180 B.58

C.11 M.29 Y.90 K.0

Producers

Hex. #2CB1B7

R.44 G.177 B.183

C.72 M.7 Y.31 K.0

Aetna

Hex. #002776

R.0 G.39 B.118

C.100 M.78 Y.5 K.18

Log In

Hex. #E98300 -

#FDC802

gradation

Audience Specific Colors.

Non Audience Specific Colors.

Content

Subhead Text

Hex. #333333

Additional Colors.

Color Palette. Using current

Aetna brand guidelines as a

foundation, a complimentary color palette

was created. To visually guide the user

throughout the Aetna site, specific colors

have been chosen to represent the

four main audiences and Aetna-specific

areas, in addition to login functionality,

text navigation and tools, adding the

benefit of increased visability for the

user.

* indicates a color from existing

Aetna color palette

NOTE:

See next page for additional colors

and gradients from the Aetna brand

guidelines

Text Links

Hex. #005CA1

Text Links On-State

Highlight Text

Hex. #C60B46

Body Text

Hex. #666666

Headlines

Hex. #007AC9

Page Subheads

Hex. #002776

Tools and Log In

Hex. #002776 -

#007AC9

gradation

Footer Text Links

Hex. #F9DE42

*

*

*

*

*

*

Footer

Hex. #515757

Footer Titles and

Site Background

Hex. #CCE5E4*


section

p. 7

Brand.1

Gradients

Color Palette Continued.

Any additions to the color palette

including gradients must be approved

by the aetna.com team.

Brand Standards Color Palette

hex # F3766E hex #007F7B hex #81C1AA

hex #E98300 hex #0094B3 hex #CCE5E4hex #F4C17F

hex #FDC82F hex #42145F hex #C6B8CFhex #FEDE82

hex #A8B400hex #5B2B2F

hex #D3D97F

hex #8B8D09hex #DEAF39 hex #EDD392

hex #C5C684

hex #77AE9Ahex #F9DE42 hex #FDF5A6

hex #ADCEC2

Aetna Foundationgradient hex: top: 946AAEbottom: 7014A9

Retireesgradient hex: top: 5baa50bottom: 27701d


section

p. 8

Brand.1

Typography. The site uses the type

font Arial. Regular is to be used for the

majority of text, with the Bold version

used to highlight certain words and

phrases.Arial headline text with Arial bold to highlight words

Arial bold subhead text lorem ipsum

Arial regular for HTML body text Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium luctus mi. Aliquam euismod lorem id justo. Donec dolor justo, mattis cursus, vestibulum sit amet. Sed laoreet ultrices duis.

Arial bold HTML subhead text and component headline text


section

p. 9

Brand.1

Typography usage. Consistency

in the use of typography keeps

pages clean while helping users

identify tasks from general content.

All text links in body copy, regardless

of size and placement, are blue and

underlined for consistency and to

differentiate links from other text that

may be blue. The exception to this rule

is utility navigation elements, such as

breadcrumbs, print, email, register, etc.

Ampersand (&). The ampersand is

used for all navigation (primary and

secondary) and headlines. The word

“and” should be used within body

copy. The exception to this rule is the

Homepage Flash component, where

“and” must be used due to a coding

issue.

Headlines. Arial 24pt hex #007AC9

Subheads. Arial Bold 15pt #002776

HTML Body Text. Arial 12pt (16px Line Spacing) #666666

HTML Text Links. #005CA1 Underlined. Rollover #C60B46

Arial Bold 15pt #33333

In text subheads

Arial Bold 16pt #33333Component Headlines

HTML Text Links Arial 12pt #005CA1

HTML Text Links Rollover Arial 12pt #C60B46

HTML Text Links Visited Arial 12pt #666666

HTML text link

HTML text links rollover state

HTML text links visited state

HTML Text Links - Components Arial 13pt Bold #005CA1

HTML Text Links Rollover - Components Arial 13pt Bold

#C60B46

HTML Text Links Visited - Components Arial 13pt Bold

#666666

HTML text link - components

HTML text links rollover state - components

HTML text links visited state - components

Get answers, get plans - get health and more.

Lorem ipsum dolar sit health plans and services amit consect

duis adipiscing. Lorem ipsum dolar adipiscing magna vitae nisl

vulputate pulvinar.

Helping Individuals AndFamilies Stay Well – Every Day, In Every Way


Section 2 Visuals Photography

Illustration


section

p. 11

Visuals.2

Photography. With an eye on

existing Aetna brand guidelines,

photos should be selected to both

complement existing brand imagery and

refresh the overall look.

Backgrounds. Light-colored

backgrounds that invoke a sense

of texture (and not visually

identifiable objects) help to soften

the edges of the photo area and

blend with the surroundings.

Color and Subject. A single bold color

or a palette of strong neutrals both work.

The subject matter should comprise the

majority of the frame and be cropped

tightly so that the image helps tie together

the top navigation with the rest of the site.

Photos should be feathered on both the

left hand side and bottom. (see examples

to the right)

Photos in the upper right hand corner:

467w x 379h

Photos in Products & Services

selector: 345w x 133h

Photos on constituent pages (eg:

Producers) are royalty-free images and

not to be used on any other pages.

These photos are examples only. All

photography has to be approved by the

aetna.com team.


section

p. 12

2 Visuals.Photography.

Individuals & Families. Images chosen for the Individuals and

Families section should always capture

a slice-of-life feeling. Singles, couples,

families, babies, and children, from

maturity to infancy across a broad

range of ethnicities and lifestyles.

Note: These photos are examples only.

All photography has to be approved by

the aetna.com team.


section

p. 13

Visuals.2

Photography.

Employers & Organizations. Photos should reflect a diversity in both

ethnicities and workplace culture. Small

business, sole proprietors, blue collar,

and the corporate world all share a role

under the Employers and Organizations

title.



the aetna.com team.


section

p. 14

2 Visuals.Photography.

Health Care Professionals. Photos should reflect a range of

positions and professional and patient

roles.

Primary Care Physicians, Dentists,

Pharmacists, Behavioral Health

Professionals and staff make up the

Health Care Professionals section of

the site.



the aetna.com team.


section

p. 15

Visuals.2

Photography.

Producers. Images in the Producers section of

the site should reflect a sense of

business, but should have a friendly,

outgoing “here to help” feel.

Note: These photos are examples

only. All photography has to be

approved by the aetna.com team.


section

p. 16

Visuals.2

Photography.

About Us. The about Aetna section of the site is a

broad category of topics. Images should

reflect the Aetna brand while

conveying the subject matter of

the page.



the aetna.com team.


section

p. 17

2 Visuals.Illustration. Custom, stylized

artwork provides an organic personal

touch to the Aetna website. The

illustration style combines a simple

hand-drawn line art style with a few

simple colors and a touch of modern

flourishes or dots. Illustrations should

only be used within illustration

components and in combination with

other non-illustrative type components.

Illustrations should be considered an

accent and used sparingly.

Illustration should only be used in the

Component Center Channel 2 promo

boxes, homepage promo boxes, and

right hand channel topic boxes.

All illustrations must be approved by

the aetna.com team.

Size for illustrations:

82w x 130h

Illustrations on homepage:

119w x 102h

Illustrations in the right well:

116w x 100h

Flourishes can be used to accent illustrations and can be combined together in various ways to create

pieces of the illustration.

X


Section 3 Navigation Primary

Left Channel

Footer

Utility

Call to Action (CTA)

Tools

Log In/Registration


section

p. 19

Navigation.3

Primary. The primary navigation

anchors the top of the page and helps

the user identify their unique audience

section. Through the use of audience-

specific colored on-states, the primary

navigation becomes a visual marker for

where the user is within the site.

Primary navigation (at the top of the page) identifies the four primary audiences, homepage, and Aetna-specific information

Primary navigation (located at the top of the page) with audience-specific color on-states

Primary Navigation - On States

Primary Navigation

13pt Arial Bold #FFFFFF


section

p. 20

Navigation.3

2nd Level

Background Color

#A8B400


On state

Background Color

#6D731A


Rule #868E04

3rd Level

Background Color

#868E04

12pt Arial #FFFFFF

On state

Background Color

#CBDA00

12pt Arial #333333

Rule #A8B400

Left Channel.

Individuals & Families. Second and third level navigation is

handled through left hand navigation.

Each audience’s navigation is

differentiated by their audience-specific

color palette.

Consistent use of various shades

of their primary color helps the user

understand where they are within the

site.

Verbiage cannot exceed two lines of

text.


section

p. 21

3 Navigation.Left Channel.

Employers & Organizations.

Second and third level navigation is



differentiated by their audience-

specific color palette.




site.


text.

2nd Level

Background Color

#E24C24


On state

Background Color

#712612


Rule #FF956E

3rd Level

Background Color

#BB3F1E

12pt Arial #FFFFFF

On state

Background Color

#FF956E

12pt Arial #000000

Rule #E24C24


section

p. 22

Navigation.3

Left Channel.

Health Care Professionals.





color palette.




site.


text.

2nd Level

Background Color

#E4B43A


On state

Background Color

#5B4817


Rule #AF8D38

3rd Level

Background Color

#AF8D38

12pt Arial #FFFFFF

On state

Background Color

#FFCB2E

12pt Arial #333333

Rule #E4B43A


section

p. 23

Navigation.3

Left Channel.

Producers.





color palette. Consistent use of various

shades of their primary color helps the

user understand where they are within

the site.


text.

2nd Level

Background Color

#2CB1B7

Font


On state

Background Color

#124749


Rule #36E7F2

3rd Level

Background Color

#3B8D91

Font

12pt Arial #FFFFFF

On state

Background Color

#36E7F2

12pt Arial #333333

Rule #2CB1B7


section

p. 24

3 Navigation.Left Channel.

About Us.



The corporate sections of the site is

differentiated by the use of the

primary Aetna blue. Consistent use

of various shades of the primary color

helps the user understand where they

are within the site.


text.

2nd Level

Background Color

#0081C4


On state

Background Color

#004062


Rule #50C7FF

3rd Level

Background Color

#00679D

12pt Arial #FFFFFF

On state

Background Color

#50C7FF

12pt Arial #000000

Rule #0081C4


section

p. 25

Navigation.3

Footer.

The “fat” footer acts as a central loca-

tion for a majority of the ancillary site

navigation. The user can navigate to all

major areas of the site from this loca-

tion. The “tools” section will customize

dynamically based on the specific audi-

ence section of the site.

Background Color

#515757

Text Links

12pt Arial #F9DE42

Titles

14pt Arial Bold #CCE5E4

Link Font

12pt Arial #666666

Navigation

12pt Arial Bold #666666


section

The PDF icon can be used within component when needed.

A PDF file should be under 5 MB.(Sizes under 1 MB should be labeled with a KB)

File name is a link, but the PDF icon is not clickable example: Small Group Brochure (PDF, 4 MB)

p. 26

Navigation.3

Utility.

Breadcrumbs, email, bookmarks and

search all fall under utility navigation.

Utilities act as subsidiary tools that help

the user determine where they are,

complete a task, and find what they

are looking for, but are not the primary

navigation elements or mechanism for

the site.

Arial 11pt (bold for selected page on state) #333333

Arial 11pt Bold #666666

Breadcrumbs

Icons

Search

Always located at the top right of the site, search resides in the same

bar as the primary navigation

Home \ Individuals & Families \ Plans & Services \ State \ Plan Detail

one space after file name and after PDF icon


section

Lorem ipsum dolar sit ( ) external link amit consect duis adipiscing dolar sit.

More

p. 27

Navigation.3

Call to Action (CTA).

Calls to action can be bold, brightly

colored buttons, text links, or a

graphic arrow. CTAs are used in

varying places throughout the site to

encourage the user to take a

specific action.

Used in instances where additional

attention should be drawn to the CTA.

While certain rules apply to specific

button types, others can be varied

based on audience and use, as

explained at right.

Used throughout the site in varying

(yet consistent) ways, these types of

CTAs help the user identify different

types of actions in specific areas of

the site.

Log In Button

#E98300 - #FDC802 gradation

Arial 12px Initial Caps

Log In should always appear in this color palette

Get a Quote or Apply Button

ex: Individuals & Families Color Palette

Search Button

ex: Health Care Professional Palette

Arial 12px ALL CAPS

Buttons specific to an audience can be customized

to that audience’s specific color palette

Submit or Register Button

ex: Aetna-Specific Color Palette

#002776 - #007AC9 gradation

Arial 12px ALL CAPS

Note: the Register Button is accented by an orange arrow that

matches the Log In gradation color

Buttons that are general to the site should be developed in the

standard Aetna color

Buttons used for Forms

External Link Icon

Arial Bold #005CA1

“More” links with external icon should reside in lower right corner of component

This external link icon is only for use within components

Component Arrows

Used within certain types of components in place of text links

A smaller in context external link icon can be used within text areas


section

p. 28

Navigation.3

Tools. Audience-specific tools are

dynamic and change contextually

based on the primary needs of a

particular audience. Tools are

determined by the most used tasks

that users would visit aetna.com to

complete, first by general public, then by

tools where log in is required.

Location.

Right Column Top.

Any other placement of this component

on the page requires approval by the

aetna.com team.

Specs.

250 x arbitrary pixels

Recommendations.

Maximum 7 tools; minimum 3

All Tools & Resources link (optional)

Title


Bar #333333

List

Arial Bold 13pt #FFFFFF

Background

#002776 - #007AC9

1 pixel Rule #0081C4

On state

Background Color

#000F2E - #001A4D

Log In #E98300

Rule

1 pixel #00A7FD


section

p. 29

Navigation.3

Log In/Registration. A

standardized Log In/Register

component has been implemented to

ensure a consistent experience

among all audiences. An expanding

“Why Register?” panel resides directly

under the Log In component. This

component can be customized with the

benefits of registering based on the

audience.

Specs.


Recommendations.

Maximum 6 bullets for

Expansion Panel

Titles.

Customized by audience

Member Log In

Employer Log In

HCP Log In

Producer Log In

Title


#002776 - #007AC9

Background

#CCE5E4 - #B2C9CB

1 pixel Rule #0081C4

Utility Navigation

10pt Arial #333333

Title


#002776 - #007AC9

Background

#CES3D0 - #FFFFFF

Bullets and Text

11pt Arial #333333

bullets #004990


Home Page

Individuals & Families

Employers & Organizations

Health Care Professionals

Producers

About Us

Section 4 Design


section

p. 31

Design.4

980 pixels

165 pixels 526 pixels 250 pixels

980 x 44 pixelsTemplates. All pages below

the primary homepage level use

a three-column approach.

The site was developed to maintain

a center position within the browser

window. Depending on the width a

user has their browser window open,

the area around the site will expand

and contract with a light blue color

#CCE5E4.

Businesses can edit the center channel

only. The remainder of the page is

controlled by the aetna.com team.

165 x 133 pixels

center channel


section

p. 32

Design.4

Home Page. The homepage

is a unique entity within the

structure of the site. The center area

is designed to hold 3 components,

however these components can be

swapped out for a single component

when critical information needs to be

conveyed.

The design of the homepage is

under the control of the aetna.com

team.

The homepage has been developed

to address the needs of the four

primary audiences for Aetna.com.

Each audience is provided a unique

set of tools and an audience-specific

login, plus overview copy that

speaks directly to them.

The 3 promo areas feature:

- features for members

- business and strategy topics

- corporate and social responsibility


section

p. 33

5 Design.Center Channel Homepage Illustration ComponentUsed on the homepage, illustration components should promote a range of information to draw attention to a topic or sub-section of the site. Illustrations can be customized to component content, season, or audience.

Location. Home page

Specs. Initial capitalization is to be used for titles. Titles are hyperlinks.

Titles cannot exceed 2 lines [25-35 characters.]Body cannot exceed 4 lines [85-95 characters]Every attempt should be made to match the amount of text for the 2 boxes for visual consistency.

Please include a call to action statement describing the intent of the message. The call to action statement should include keywords that either describe the action the user will be taking (Watch the Video, Read the Press Release, etc.) and/or include keywords that describe the content/page that the user will be going to (Buy Health Insurance, View Small Business Plans,Celebrate Nurses Week, etc.)

The Descriptive or Call to ActionLink must fall beneath the last line of text in the promotional box.

Recommendations.The 3 promo areas feature:- features for members- business and strategy topics- corporate and social responsibility

Title: Arial 15pt Bold #333333;

Content: Arial 12pt #666666

14px Line Spacing #666666

Descriptive or Call to Action Link:

Arial 12pt Bold #005CA1

On State: Arial 12pt Bold #CF3062

Image area [homepage components]

119 x 102 pixels

Homepage Components


section

p. 34

Design.4

Individuals & Families.

Pages on this level act as directory

or secondary homepages for each of

the audiences, providing the user with

quick entry points into specific areas

and tools.

Pages at this level are referred to as

either hub, index or landing pages.

They act as a directory or homepage

for each of the main audiences.

Each page in this section contains a

log in box component for the Member

secure site below the left hand

navigation.

The fat footer and Tool box are

custom-created to each section of the

site. They may also be custom built for

unique pages.

Right channel topic boxes can be

unique to each page, hub or site-wide.

Audiences.

1.0 Individuals & Families

2.0 Employers & Organizations

3.0 Health Care Professionals

4.0 Producers

5.0 About Us


section

p. 35

Design.4

Employers & Organizations.





Each page in this section contains

a log in box component for the

Employers & Organizations secure

site below the left hand navigation.




unique pages.




section

p. 36

4 Design.Health Care Professionals.






log in box component for the Health

Care Professionals secure site below

the left hand navigation.




unique pages.




section

Producers.






log in box component for the Producer

secure site below the left hand

navigation.

The fat footer and Tool box are custom-

created to each section of the site.

They may also be custom built for

unique pages.



p. 37

Design.4


section

About Us.

This section is unique because it

doesn’t have a log in box .





The fat footer and Tool box are both


site. They may also be custom built

for unique pages.



p. 38

Design.4


Selector Tool Component

Tab Component

Table Component

Center Channel (html) Box Component

Center Channel Two promotional box Component

Center Channel Three promotional box Component

News Index Page

News Content Page

Forms

Expandable Box Component

Text Content Component

Image and Text Component

Related Links Component

Section 5 Components


section

p. 40

Components.5

Selector Tool Component. Used to

present an overview of a broad amount

of information, such as

Plans & Services, in a compact,

interactive format.

Location.

Center Channel

Specs.


(determined by length of item list)

Recommendations.*

Maximum 4 text links per section

Maximum 1 button per section

Maximum 7 lines of overview copy

Unique Image for each

Section (optional)

Examples.

Plans & Services

* Maximum recommendations may vary

based on number of items in

the list. Sample is for 12 items in list

Image Area

345 x 133 pixels

Title


Background Bar #333333

List

Arial 11pt #515757

On State

Arial 11pt #FFFFFF

Background color must reflect

the hub they are in

Arrow Graphic 159 x 27 pixels

[Custom to Audience]

Overview Title

Arial 13pt Bold #333333

Overview Content

Arial 12pt #666666

14px Line Spacing

Link



section

p. 41

Components.5

Tab Component. Used to convey a lot of information

or results in a clean and organized

fashion. Information can be broken out

in optional expandable sections within

each tab.

Location.

Subpage Center Content Area

Specs.


Recommendations.

Maximum 5 tabs

25 pixels high

10 pixels of padding left and right of

content within each tab

Do not stack tabs or wrap text

The table associated with the tabs can

contain a paragraph, table component,

center channel component, and/or a

subhead.

Non-Selected State:Arial 14 Bold #E9ECBFbtn bkgrd: #8A8989

Selected State:Arial 14 Regular #333333btn bkgrd: #FFFFFF

Rollover State:Arial 14 Regular #333333btn_fill_[color].gif, 1w x 23hstretch horizontally to fill btn

10

25

12

29

2 pixel grey border hex #D1D1D1

10

12 12

Header Goes Here Arial bold 15 pt hex #333333

It es modis aut endiae nusda qui tem nonsequi con conessimo conseque asita cus sunti nobitassi blacculpa ne conse latqui odi nonsedi cuptaecture sunt debis re, occatquid expel is voleseque di beremol orescient estios quod ut qui officia turibus, siti ut vid et ut aut mo im haris re nos ut inturep erovident aut parchil litionsedio. Am et acerciae coraept atatius et vel evel enecabo. Ehenda con est excepel ilis dellis mi, omnis rempori onsequis veliqui ne officid quidi doluptatis eumendi doluptatur? Mod quias mos dolupiento volorep. Arial regular 12 pt hex #666666

Table Component. Used to convey

a lot of information or results in a

clean and organized fashion.

Location.

Subpage Center Content Area

Specs.

See to the right


section Components.5

p. 42

Table border 1 px hex #D1D1D1

1 pixel white inside table borderand between title bar and header

Row height 30 px / Bkgd: #333333

Row height: 25 px / Bkgd: [hub hex]

Row height: 25 px / Bkgd: #FFFFFF

Row height 25 px / Bkgd: #EFEFEF

Font: Arial Bold 14, left aligned, #FFFFFF

Font: Arial Bold 12, left aligned, #FFFFFF

Font: Arial 12, left aligned, #666666



Center Channel Component.

The Center Channel Component

is formatted in 2 columns that can

contain video, flash, imagery or text

in either column and fills the center

well of the page.

Location:

Center Channel

Specs: Must fit within the 526 pixels

p. 43


section

Producer World Tour

Nobitibusae. Ehendel iquatia spersped quo blacit, etur. Quia eatendest, eiur si dolupta tqu.Link

p. 44

5 Components.Center Channel 2 Promotional Box Component Used on both hub pages and subpages, illustration components should promote a range of information to draw attention to a topic or sub-section of the site. Illustrations can be customized to component content, season, or audience. They should, however, be used sparingly as accents to a page.

Location. Constituent main pagesSubpage Center Content AreaRight Hand Column

Specs. 322 x arbitrary pixels [homepage] 258 x arbitrary pixels [subpage]

Recommendations.Maximum 5 lines of text [homepage]Maximum 6 lines of text [subpage]

Initial capitalization is to be used for titles. Titles are hyperlinks.


Please include a call to action statement describing the intent of the message. The call to action statement should include keywords that either describe the action the user will be taking (Watch the Video, Read the Press Release, etc.)and/or include keywords that describe the content/page that the user will be going to (Buy Health Insurance, View Small Business Plans,Celebrate Nurses Week, etc.)


Pages with 2 Promo Box Components must contain illustrations.3 Promo Box Components must contain photographs.

Artwork must be approved by the aetna.com team.

Image area [subpage components]

82 x 130 pixels

Subpage Components

D. Text [optional image or illustration 1/2 column]

Title: Arial 15pt Bold #333333

Content: Arial 12pt #333333; 14px Line Spacing

Descriptive or Call to Action Link:


On State: Arial 12pt #CF3062


section

p. 45

5 Components.Center Channel 3 Promotional Box Component. Used to promote a range of information to draw attention to a topic or sub-section of the site.

Recommendations.When creating a row of components, be sure the components all have the same pixel height.

Initial capitalization is to be used for titles. Titles are hyperlinks.

Each component should have the same amount of content for visual consistency.


Please include a call to action statement describing the intent of the message. The call to action statement should include keywords that either describe the action the user will be taking (Watch the Video, Read the Press Release, etc.)and/or include keywords that describe the content/page that the user will be going to (Buy Health Insurance, View Small Business Plans,Celebrate Nurses Week, etc.)


Pages with 2 Promo Box Components must contain illustrations.3 Promo Box Components must contain photographs.

Photography must be approved by the aetna.com team.

A. Image and Text [1/3 column] Title: Arial 15pt Bold #333333

Content: Arial 12pt #FFFFFF 14px Line Spacing #666666

Descriptive or Call to Action Link: Arial 12pt Bold #005CA1

On State: Arial 12pt #CF3062

Size of photograph: 168 x 168


section

p. 46

Components.5

News Index Page Heavy center content style page. This

template can be used for any article,

newsletter, or simple page of static

content.

Recommendations.

News Releases



News Content Page Heavy center content style page. This

template can be used for any article,

newsletter, or simple page of static

content.

The News Release template has

predetermined fields that are populated

by the content owner.

Content pages do not have photos.

Recommendations.

News Releases

p. 47


section

p. 48

Components.5

Forms. Used to select different

kinds of user input.

A form can contain input elements

like text fields, check boxes. radio

buttons and a submit button.

All forms are custom built.

Recommendations.

Contact an Agent

Apply for a Grant

Request Financial Information

No left hand channel, log in box or

right hand channel is used.


section

p. 49

Components.5

Expandable Box Component.

This type of component can be used

in place of a tabbed component when

appropriate. Expandable components

use an expansion and contraction

panel functionality that allows

navigation of a lot of information or

tasks in a small area.

Location.

Main Content Area

Specs.


Recommendations.

Maximum of 6 expandable panels

Examples.

Log In

Tools & Resources

Selected Panel


Bar #333333 - #7B8486 [background image can customized to audience]

Deselected Panel


Bar #B8B8B8


section

p. 50

5 Components.Media Boxes. Right hand column.

Used for promotional callouts and

factoids. These components can use a

grey box arrow CTA when they will be

used to link to additional information, or

have no CTA and be purely informational.

Should be updated on a regular basis.

Location.

Subpages, right column area

Specs.

250 x variable pixels

Recommendations for Image.

Use when a more stylized look is desired.

When developing a series of related

messages (such as Healthy Living),

maintain a consistent look throughout.

Recommendations for

Text/Photography.

2 lines maximum bold intro text

5 Lines of text

CTA arrow (optional)

Image can vary based on topic

Examples.

Healthy Living

Legal Notices

Newsletters

Green Initiatives

Need Help

Health Reform

Green Initiatives

Webcasts

Title


Background #B8B8B8

Content

Title:


14pt Line Spacing

Text:

12pt Arial #333333

Image size

116 x 100 pixels


section 5 Components.Media Boxes.Left hand column.

Location.

Subpages, left column area

Specs.

165 w x 110 h

Various colors are permitted, but must

be approved by the aetna.com brand

standard team.

Title should fit within one line (about 20

characters).

The sentence should be no longer than

4 lines (about 70 characters).

Lighter red hex: E24C24to darker red hex: B13B1C

Lighter orange hex: FFC156to darker orange hex: FFA22A

p. 51


section

p. 52

Components.5

Related Links Component. Used

to provide additional information and

pictures or items related to the content

category on the page. Links can be

internal or external. Cannot contain

tasks or tools as these are in the

audience-specific tool box component.

Location.

Center Channel at the bottom of the

page (above the footer)

Specs.

See notes to the right.

Maximum of 7 links

Examples.

Related Articles

Contacts

Press Kits

Company Fact Sheet

Financials

Title

Font: 16pt Arial Bold #333333

Content

12pt Arial underlined #005CA1

Line Spacing: one line space between each link

On state #C60B46

Article Text

12pt Arial #666666


section

p. 53

Components.5

News & Announcements Component. Use.....

Location.

Center Channel at the bottom of the

page (above the footer)

Specs.

Maximum of ??? links

Examples.

Related Articles

Contacts

Press Kits

Company Fact Sheet

Financials

Flash Guidelines

Video Guidelines

Section 6 Multimedia



section

Flash Component:Carousel Display Aetna.com allows 3 types of Flash displays, two in the center channel and one on a full page. The type of display used depends upon the type and quantity of information being delivered as well as the purpose of the message.

A carousel display is a horizontally rotating series of images, usually accompanied by text, that functions similar to a tv advertisement to grab the reader’s attention.

This type of display must have a very distinct purpose in mind to engage your audience. If a page or section of the site needs to come to life in some way because it will engage your audience better, then this could be a possible solution.

Location. Center Channel Box ComponentThe carousel should appear at the top of the page, directly below the page header. No page sub-header should be used. Instead, additional text can appear in the carousel.No pictures, graphics, illustrations or video should appear below the carousel.

Specs. - Font size: 10 pt. in body text- 70 characters per line- 3 lines allowed- Title line is optional- CTA can be a link in the body, title, or image

p. 55

6 MultimediaCarousel Display


section

Flash Component:Static Display A static image, often accompanied by minimal text, that allows the user to interact with the image by clicking on certain sections of it to bring up more information or images or to navigate to other pages or sections. It can include minimal animation.

This type of display must have a very distinct purpose in mind. It can be used to organize information in a visually pleasing manner, such as a map (click on areas to get more info), a calendar (click on dates to bring up more info or to link to event pages), etc.

Locations. Center channel of a page (in a center channel box component)The flash piece should appear at or near the top of the page, directly below the page header or beneath a brief paragraph. A page sub-header can be used. Additional text can appear in the display.

Recommendations.No pictures, graphics, illustrations or video should appear below the flash on the page.

No audio may be used.

Specs. Maximum size of flash movie on a page is 530pixels wide x 340pixels high

p. 56

6

Static Display

ExtrasThe upper right hand corner of most aetna.com pages has an image that defines that section of the site. The flash should not compete with that image.

Flash can sacrifice SEO exposure if there isn’t enough text on which to base search indexing. If SEO is criti-cal to the page, be sure that the page is appropriately titled and has an adequate description in the Meta tags.

Too much animation can be distracting to the user, thus diluting the overall message, so be considerate of lead in or connected pages that may have similar animation.

Remember, Flash cannot be viewed on all hand held devices.

If the user doesn’t have the proper Flash plug-in, they won’t be able to use those components.

Multimedia


section

Flash Component:Full Screen Display A full screen of flash animation (movie or advancing still images), with the purpose of providing a richer and more engaging user experience for presenting large or complex amounts of information.

Can be used as a decision making tool - when you are presenting complex information and want to guide the user to making a decision, as an educational tool - to create a more engaging and memorable venue to present large amounts of information or as a ‘tour’ - to provide an overview of a tool or website or other complex function.

Location. A link off of any page, it will open in a new window and will utilize the full page component.

Recommendations.There should always be a written option available (non-Flash) if large amounts of information are being presented. Many users prefer not to wait for the Flash presentation or it may not be supported by their device.

There should always be an option to skip the flash.

Audio, music, and voice over, may be used but must be approved by the aetna.com team.

Specs. - See page 58

p. 57

6Full Screen Display

Multimedia

Flash Component:Specifications

Fonts/Content SpecsTitles: Arial Regular; Not to exceed font size of 24; Hex value: #007AC9

Subtitle: Arial Bold; Not to exceed font size of 15; Hex value: #002776

Content:Arial Regular; Font size: 13; Hex value: 333333

Links: Hex: 005CA1

Text content should not be placed over a photograph. It can slightly overlap the feathered background of a photo, if there is not too much detail behind where the text is to be placed. Please make sure that there is plenty of contrast between the text and the background.

Typography should not be stylized with drop shadows, beveling, glows, etc.

No italicized type should be used.

Animation of text should be sublte. It’s acceptable for text to move slowly from one position to another, where emphasis is needed, or to scale up or down for the same reason.

Do not use fast-moving, or spinning text.

PhotographyPhotos should complement existing brand imagery and have a clean overall look. Photos should have a light, simple background.

Color/SubjectA single bold color or a palette of strong neutrals both work. The subject matter should comprise the majority of the frame and be cropped tightly. (e.g use minimal people, avoid busy backgrounds)

Royalty Free Photography Only No Rights-managed photography is to be used. Only use photography from the Aetna Brand library. Other photography must be approved by the Brand Standards team.

IllustrationIllustration can be used sparingly. There is an established style for illustration. All illustration must be created by the Brand Standards team. Please contact Glenna Hartwell or Mark Callahan, who can provide details.

For further information on photography and illustration, refer to Section 2, page 10)

Audio, Music And Voice OverAudio should only be used in a full screen presentation, not in the well area of hub pages or sub pages.

Music is available from our music library. The music library is stored on a shared drive, contact us for access. If you cannot find appropriate music in the library, contact us and we will assist you in acquiring suitable music.

Including voice over (VO) requires special consideration. You will need a written script, a studio for recording and editing, and voice over talent (the “reader”).You must:• Have a written script• Use professional VO talent• Record in a professional studio (Aetna Hartford has a studio)

Contact us for assistance in creating your VO recording.

OtherFlash movies should have a 2 pixel border; hex value D1D1D1The Brand Standards color palette must be used. Button designs will be provided. Only these styles should be used.


section

p. 58

6 Multimedia


section

p. 59

6

Flash Component:Specifications

Technical Guidelines

• Flash source files should use CS3 format and Actionscript2 or Actionscript3.

• Only CS3 capabilities (functions, variables, features) suld be used (not CS4 or later.)

• Design presentation to use Flash Player 9

• Flash dimensions when used in a hub page or other internal site page 528 width X 396 height in pixels (4:3). Note: the height can be smaller if necessary.

• Flash dimensions when used in a stand-alone full page presentation. Maximum size 800x600 (4:3). Note, the width can be wider, up to 1280 pixels, and the height can be smaller than 600 pixels.

o The web page should be opened using a JavaScript window.open command when being opened from a parent window (as opposed to a direct link as might be provided in an email). It should not contain any navigation toolbar, location toolbar (URL entry area), menu bar, resizing controls or scrollbars (a status bar may be specified, and some browsers force a status bar to be visible as a security measure). The window.open command should include a width and height to properly accommodate the Flash content. A window name should also be provided to allow for JavaScript control from the parent window.

Keep in mind that newer browsers may open up a Tab rather than a window when the window.open command is executed. This is controlled by the visitors browser settings and can not be overridden. Test both configurations to be sure the Flash is acceptable if opened in a tab.

• The Flash SWF should always appear in a web page wrapper when used on the web (never link directly to the SWF file).

• Always use the Aetna standard Flash loader for files that will normally require more than 1-3 seconds to load (assume 128kbs bandwidth)

Multimedia


section

p. 60

6

Video ComponentAetna.com uses a standard display for all

videos across the website. There are three

ways to launch a video:

- a text link with video arrow icon (opens a

new browser window)

- clicking on a thumbnail (opens in a new

browser window)

- the video is embedded in the Center

Channel

The video display is the same regardless

of how it is launched (link, thumbnail,

embedded on a page).

Location. Center Channel in all scenarios.

When launched from a link or thumbnail,

video will be displayed in a new browser

window, which can be enlarged to a full

window display.

Specs. Thumbnails should be left aligned and

multiple thumbnails should be stacked

vertically.

Thumbnails of a related topic can be

enclosed in a border with a “master title” on

top.

Video page when launched from link

Video page when launched from thumbnail or link

Video thumbnails

Video embedded on a page

Multimedia


Writing Guidelines

SEO Guidelines

Section 7 Content

p. 61


section

p. 62

7 Content.Writing Guidelines. To achieve

the ideal Aetna tone, remember to use

language that mirrors the company’s

positioning and brand attributes —

optimistic, informative, supportive,

reassuring and easy to work with.

Sections:

Tone

Audience

Style

Do’s and Don’ts

Be conversational

Write as if you’re having a discussion with a friend. Be direct, up front and easy to understand.

Keep the paragraphs short and to the point. Cut the jargon and unnecessary acronyms. Direct and

simple words work best.

Be humble

Look for opportunities to use “we” instead of “Aetna.” Better yet, use “you” and “your” instead of

“we” and “our” to convey that Aetna is concerned with the customer’s needs. This conversational

tone will help reinforce the trusted-leader persona that is key to the Aetna brand.

Be sincere

Aetna speaks to many audiences with unique sensitivities, such as challenging medical conditions

and personal issues. It’s crucial to use a respectful tone. Avoid being flip and be careful with humor.


section

p. 63

7 Content.Writing Guidelines. Tone. With the

site redesign we are moving away from

business-to-business language and

into friendlier business-to-consumer lan-

guage. Use these guidelines to convey

information clearly, in words everyone

can understand.

Stay simple to stay in brand

Get right to the point. Begin by stating what’s in it for the reader.

Use “we” and “us” instead of “Aetna”

Stay as warm and friendly as possible. Take the emphasis off Aetna and focus on what the reader gets,

not what we give.

Use active voice instead of passive

Instead of saying, “When your request is approved by Aetna,” say “When we approve your request…”

Give the reader ownership

When writing to members, say “your secure member website” or “your secure Aetna Navigator®

self-service website” as opposed to “our” member website.

Speak directly to the reader

Address “them” as “you” in material going to one type of reader (member only, plan sponsor only,

broker only).

Every second counts. Capture the audience’s attention quickly

• Create compelling and relevant headlines

• Use easy-to-read lists

• Use benefit-oriented sentences

Shorten your phrases

• Web content must be brief and get to the point quickly. Unlike print, which calls for well-crafted and

complete sentences, web content often uses sentence fragments. This allows you to pull the most

important words up front and reduce your word count.

• When editing your work, look for prepositional (often start with at, as, of, in, to) and other phrases

that can be shortened and simplified.


section

p. 64

7 Content.Writing Guidelines.

Tone [continued].Make your copy “scannable”

• Subheads or secondary headlines, offers, and action-oriented commands can help

users scan efficiently.

• Without scannable language, users will leave quickly.

• Use clear language in navigation, links, and headlines.

• Bottom line: If people can’t scan your Web page, they won’t read it.

Pay special attention to paragraphs

• The first sentence can stand alone – use it to capture attention, much like your headline.

• On the Web, a paragraph doesn’t have to be more than one sentence.

Stay away from adjectives and exclamation points

Let your writing convey importance or excitement. Do not rely on adjectives or exclamation points.

Ex: “This program is one more important reason to join an Aetna plan”. Take out the word “ important.”

Telling them what’s important and what’s not often offends readers. Let the rest of your writing

show them how important the product is. Don’t tell them they need it; write so that they want it.

Empty phrases and jargon

• Try to avoid overused, nonsensical, meaningless words like empower, seamless, leverage,

value-added, synergize, mission-critical, scalable, optimize, and so on.

• Also words like “innovative” and “cutting edge” are limiting because most things don’t stay

innovative for very long. Write in a way that demonstrates how innovative or cutting edge our

services, features, or products really are.

Define industry terms as they appear

“We must precertify (approve) this before you…”


section

p. 65

7 Content.Writing Guidelines. Audience.

Take the time to fully understand your

audience and what’s important to them.

That way you’ll successfully capture

their attention and get them to take the

desired action.

Before beginning creative development, be sure to ask...

• Who am I talking to? Is it a plan sponsor, and if so, who? An HR benefits director or a CFO?

• Am I addressing a consultant or broker?

• What am I trying to do? Get their interest? Make a sale? Explain a benefit?

What do I want the reader to know, do, or feel as a result?

• What type of information do they need to satisfy their needs or problems?

Examples:

Consumer

Before:

The National Institutes of Health (NIH) recommends the following new guidelines for LDL (bad)

cholesterol levels.

After:

Use these new cholesterol guidelines to change to a healthier lifestyle.

Business

Before:

Aetna HealthFund® is a consumer-directed health plan that creates the economic dynamic that

drives the consumption of consumer goods.

After:

Aetna HealthFund® plans give members more control over their money. Members become more aware

of how much their decisions cost.


section

p. 66

7 Content.Writing Guidelines. Style.

Here are some rules to keep in mind

when creating content for Aetna.com.

Of course, there’s more than one

grammatically correct way to write

many of the examples, but this is the

style we have selected to use.

Lower the reading level

Keep sentences and paragraphs short, and use the simplest terms possible to explain ideas.

• For members, write at a 5th grade reading level.

• For plan sponsors and health care professionals, write at a 9th grade reading level.

Follow Aetna guidelines

• User name — two words, not one

• Web (on the Web, Web address) — capital W

• website — lower case, one word

Capitalization

Only capitalize proper nouns/names.

Ex: You should not capitalize “claim form,” but you should capitalize the exact name of the form:

Medical Benefits — Claim Instructions form.

All aetna.com page titles must have the first letter of every word capitalized, except for prepositions, articles,

and conjunctions. (eg: at, but, the, and, when, for)

Subheads only have the first word capitalized. (see page 9)

Pre, Post and Non

In most cases, do not add a hyphen. Use a hyphen only when the word is difficult to read.

Ex: pre-enrollment, pretax, post-enrollment, postpartum, nontraditional, non-emergency.

Words ending in “ly” usually are not hyphenated.

Ex: wholly owned subsidiary, fully insured plan

www.aetna.com

Should be semibold, bold and/or a different color. It should NOT be underlined (except when hyperlinked).

Common Internet terms

• database — one word • home page — two words, no caps

• Internet — always capped • intranet — not capped

• log on to — not “onto” • log-on — noun meaning the user name and/or password needed

• email - lowercase, one word, no hyphen


section

p. 67

7 Content.

You can replace formal words and phrases with these easier and simpler ones:

Change... To...

At present Now

As a result of Because

Provided that If

Make use of, utilize Use

Put emphasis on, stress Highlight

Give notice Tell

In the course of, in the event that During

In the future If

In order to To

In regards to About, regarding

Access (as a verb) Go to, get

Adhere to Follow

Cascade Give to, pass along

Clinician (only ok for providers) Health care professional

Continuum Reword and be specific and clear

Cross-functional Reword and be specific and clear

Trademarks

Trademarks should appear once on a page — only at first usage of the trademarked name. At this first

occurrence, remember to use the trademarked word as an adjective.

Ex: Aetna InteliHealth® website.

Exception: Some programs are trademarked in a way that makes it impossible to use as an adjective,

such as (National Medical Excellence Program®).

Do not shorten or abbreviate a trademarked name unless you have permission from our trademark

attorneys.

Ex: You must say “Aetna Navigator” and “Aetna InteliHealth” at every occurrence. Also, if “Program”

is a part of the trademarked name, you must keep “Program” in at every occurrence.

Writing Guidelines.

Style [continued].


section

p. 68


Style [continued].Some things to remember

• When talking to members, we should limit use of the term “physician” and not use the term

“provider.” Instead, choose from doctor, health care professional, specialist, hospital, health

care facility, etc.

Exceptions: “Physician” can be used when talking to doctors, and some other exceptions may

be made. Important: In Washington, PCP is still “primary care provider.”

• Once a word or name is abbreviated on a page (usually at first occurrence), use that abbreviation

throughout and do not spell out again.

• Even common abbreviations must be spelled out at first usage.

Ex: Must say “U.S. Food and Drug Administration (FDA)” at first occurrence.

• You cannot abbreviate trademarked names unless approved by our trademark attorneys.

Ex: AGB is approved to use for Aetna Global Benefits®. NME should not be used for National

Medical Excellence Program®.

• You can abbreviate “United States” when used as an adjective; spell out otherwise.

Ex: The U.S. baseball team returned to the United States today.

• You can use numerals, where it makes sense, to help keep the copy scannable.

Ex: The plane takes 2 hours to reach Nashville, but if you drive, the trip will take 11 to 13 hours.

• When mentioning specific times, use this format: 8 a.m. to 6 p.m. To designate a time zone, add

the correct abbreviation at the end — ET, CT, MT, PT. Do not add Standard or Daylight Saving to

it.

Hyphenation

Hyphenate when the word is used as an adjective. If you “call toll free”, there is no hyphen, but if you

“call a toll-free number,” there is. Hyphenate when the word is used as an adjective.

Exceptions: cost-effective, self-refer (or self plus anything) and step-therapy always get a hyphen.


section

p. 69


Do’s and Don’ts. Here is a brief list of

the Do’s and Don’ts when writing for the

new aetna.com.

Do:

• Write short sentences and paragraphs

• Use bulleted and numbered lists

• Make your copy relevant to your prospects and customers

• Use descriptive language and keywords in headlines, body copy, and links

• Use customized headlines and subheads to quickly identify what the piece is about

• Use a conversational style; write like you talk; be friendly

• Use descriptive language and keywords in links

• Lower the reading level

• Use “we” and “us” instead of “Aetna”

• Use active voice instead of passive

• Speak directly to the reader

• Give people information to make better decisions…in words they’ll understand

• Stay simple to stay in brand

Don’t:

• Use a stiff, corporate voice and meaningless jargon

• Write long, dense blocks of copy that are hard to read

• Write primarily for search engine rankings

• Stuff keywords everywhere at the expense of clarity

• Use generic ‘click here’ and ‘more info’ for links

• Use exclamation points

• Use stiff, corporate language; instead, be friendly


section

p. 70

7 Content.SEO Guidelines.

Text Length: Best Practices

- Keep content elements (paragraphs, bulleted lists, etc.) between 40 to 50 words.

- Make the first sentence the most important part of the content.

- Maintain Tone of Voice.

- Don’t lose sight of the subject of the content.

Smart Text: Best Practices

- Use the active voice

- Keep all sentences precise and to the point.

- Break text into bulleted lists or graphics, making it quicker and easier for readers to find what they

need.

Meaningful Links: Best Practices

- Select words that make it clear where the reader will be taken.

- Use a meaningful link description rather than a URL.

- Keep links as precise as possible.

- Avoid making text like Learn More or Go a clickable statement.

Consider the following guidelines when creating title and Meta tags:

- Every webpage must have a unique title, Meta keywords and description tag.

- Title tags should include one or two relevant keywords.

- Title tags should be at most 65 characters (including spaces), with all relevant keywords appearing

within the first 55 characters.

- Place the target keyword as close as possible to the beginning of title tags.

- Construct title tags with multiple keyword possibilities.

- Include 2-3 keywords within the Meta Description and place them within the first 155 characters.

- No more that 15 relevant keywords per Meta keyword tag.

- Include synonyms and common misspellings in the Meta Keyword tag.

**Also, always write content with the targeted keywords in mind. If you don’t know the keywords that the content is

going to be targeted to, ask for them before starting. Do not, however, sacrifice tone in the process of integrating

keywords – keywords should be considered only if they occur naturally and don’t disrupt tone.


section

p. 71

7 Content.SEO Guidelines. (continued)

SEO Web Copy: Best Practices

- Choose 2-3 keyword phrases that are relevant to the page and incorporate them within the

content.

- Use keywords sparingly in content, but place them within vital content areas such as body copy,

navigation menus, and side column content.

- Ideally, a web page’s body copy should begin with a keyword phrase, as well as contain a

keyword near the end of the content on the page.

- In a 40-50 word content element use only one instance of two different keywords.

- On any webpage, use no more than 2 different keyword instances per 100 words and no more

than 15 keyword instances total for the entire page.

**Alternate text, or an “alt tag,” is text that appears when a user places the cursor over an image. This text is

used by the crawler as well as accessibility features such as screen readers. Please provide alt tag text for all

on-site images, and include 1-2 relevant keywords per image.


section

p. 72



section

p. 73


summer 2011 - aetna · and brand elements that were used to redesign aetna.com. consistent and...

Documents