content.usaa.com · xNew Development – Introduction of a new application to USAA will result in...

126776-0 1

of 17

Step 1: Connect Intranet Standards and Governance GuideThis part of the document provides an overview of USAA and Connect guidelines that need to be followed.

The

Step 2: USAA Intranet Integration Guide (Connect Plug-in Framework)

a. Branded Internal GNB

contains various USAA features and compliance factors that need to be incorporated into Connect. The mandatory areas that need to be incorporated are:

b. Connect Enterprise Searchc. Standard Footerd. Single Sign-one. Eliminate redundant functionality/features

Step 3: Connect Vendor Style Guide provides information on style, font and design guidelines for

USAA.

of 17

Applicable to Enterprise-Facing Sites for Employees

of 17

Overview and Considerations

Enterprise facing websites or applications must adhere to Connect Intranet Standards based on the following:

1. Target audience being impacted

Enterprise: Applications targeted to all employees, managers, all MSRs, or all staff personnel are subject to the standards.

Random: Applications targeted to representatives across the enterprise but not the entire enterprise may not subject to the standards depending on the number of users impacted.

2. Number of users impacted/audience size

1,000 or more – Application will fall under governance depending on the target audience.

Less than 1,000 – Application may fall under governance depending on the targeted audience and purpose. Applications that are not integrated with Connect or do not follow the Standards and Governance will not be linked from the primary Connect Global Navigation Bar or a module on the Connect home page. Example: A back-end tool to perform limited function for a department or team.

3. Vendor development

3rd party firms are hired to create sites or applications. When selecting a 3rd party vendor it is important to consider the Connect/Intranet Standards and how the vendor can comply. Early engagement with the Intranet design team is needed to provide this evaluation.

4. Complexity and functionalityMinor Enhancement – Website exists and is in use today and just making an enhancement. IntranetStandards may or may not be imposed depending on the audience. Major Enhancement – A re-platform of a current website or significant changes to an existing site in which the user experience on that website changes may result in moderate implementation of Intranet Standards. New Development – Introduction of a new application to USAA will result in ongoing coordination with the UI Design Lead from the beginning of the project. Intranet Standards may or may not be imposed depending on the audience.

Mandatory Elements for Enterprise Sites

These five requirements are mandatory. All sites must be reviewed by USAA personnel for compliance prior to launch. After the review, if items need to be addressed to be in compliance with the standards, a documented plan to address them must be presented within 30 days of the review.

1. Connect Global Navigation Bar (GNB)

The Global Navigation Bar is a design treatment that provides users a set of content at the top ofevery enterprise facing page to help provide a way for the user to start over and provide context. Users expect consistency when navigating within a site and the GNB provides this experience.

of 17

For vendor applications and those outside of the Connect framework, a co-branded GNB or frameset GNB may be used only if the application does not have SSO enable or is not able to update code to pull in the Connect GNB from the Asset Service.

Branded Internal GNB:

Internal and External Frameset GNB

2. Connect Enterprise Search

Vendor will provide the capability for the user to search “This Site”, search “Connect” (point to Connect’s Search engine/results), and search “People” (point to Connect’s People search engine/results) via the Connect GNB.

Metadata and some deep- dive functionality may be needed so that employees can search from Connect to third party hosted applications especially to commonly used content.

3. Footer

A footer is required for all Enterprise facing sites which link from Connect. The Vendor shall provide the standard enterprise footer from the Connect Asset Service.

An area above the enterprise footer must contain a point of contact for questions, feedback, and outages. Usually this is a business contact and can be a group email account or personal profile link.

A vendor service mark and copyright may be included if required. Links to the vendor’s privacy policy or other usages guidelines should be avoided if possible.

If the enterprise footer is not used, the minimum requirements are to have a point of contact linked group email account or personal profile and the USAA copyright date. A last updated date is preferred to also be included.

of 17

4. Single Sign-On (SSO)

(a) Definition

Vendor must provide SSO capability which is an access control mechanism in which two distinct security domains has a trust relationship. When such a relationship exists, users of one security domain need only logon once to their domain in order to access resources in another trusted domain.

(b) Key Points: Federated Single Sign-on

Secure Socket Layer (SSL) is necessary for all Federated SSO. SAML (Security Assertion Markup Language) is the preferred mechanism for Federated SSO. USAA currently supports SAML 1.1 for internal (employee) applications and hosts a SAML Identity Provider. The Service Provider must support WS-Federation currently. It is anticipated that full SAML 2.0 using the standard SAML profiles (i.e. not WS-Federation) will be supported for both employee and member SSO by 2Q 2010. If a vendor cannot support SAML then custom Authentication Tokens may be used instead. An Authentication Token consists of at least a user ID and timestamp but may contain other information. The timestamp is necessary to prevent replay attacks, i.e. a token becomes "stale" some predetermined interval after the timestamp. The timeout interval should be as short as possible for the implementation. The Authentication Token must be "signed" using either PKI (Public Key Infrastructure) or must be encrypted with a Shared Secret Key and data integrity maintained by creating a hash of the unencrypted token and adding the hash to the token prior to encrypting. Example Encrypted Token - userID:epochTime:someUserAttibute:HASH. PKI, which uses a private key, public key pair, guarantees that the owner of the private key signed the Authentication Token. A Shared Secret Key may be used in lieu of PKI to encrypt the Authentication Token but special care must be taken to protect the key. Data integrity is maintained with a hash as mentioned above. The preferred cipher is AES-128 or above but 3DES may be employed alternatively when AES may not be supported; the preferred hash is SHA-2 but SHA-1 may be used if necessary. The signed Authentication Token should be either Base64 or Hex Encoded (also known as URL Encoded). This is necessary for normal HTTP transport. The preferred signing algorithm is SHA with DSA. SHA-256 should be used when available.

(c) Non-Federated SSO

For SSO that does not use Federation, for example Web Services, it is anticipated that a Secure Token Service (STS) will be implemented by 2Q 2010 to acquire the necessary authentication token when calling between heterogeneous platforms. For external Web Services (either USAA provider or consumer) a SAML 2.0 token will be the preferred authentication / authorization mechanism. Web services infrastructures will be required to support WS-Trust. For internal services the required token issued by the STS will be based on the needs of the platform that will consume the token.

of 17

5. Redundant functionality/features

Vendors should eliminate redundant functionality/features such as: Personal profile information, messaging, collaboration spaces, standard terminology, recognition, surveys, and social media such as video portals, blogs, and search.

Functionality should be as consistent as possible to keep the user experience the same from one site to another. Users should have one way to perform a given function throughout Connect. (Ex: Use Connect “Search” functionality instead of a vendor search box)

If an application is introducing a function that is already present, a change management plan which includes a timeline of events to retire the redundant functionality, must be submitted to the appropriate USAA personnel.

Optional elements subject to review

Accessible via External Connect : Some vendor sites need to be available on External Connect unless there is a business, legal or compliance reason that prohibits employees from having access externally (i.e. Training sites where MSRs would need to be compensated.)

Mobile Capabilities : Consideration should be taken when Enterprise solutions are deployed that some level of capabilities users may expect to access content via a mobile device. Some of these may include submitting forms or collaboration. If mobile capabilities cannot be obtained immediately, the team should question if they can be on a roadmap.

Content Lifecycle Management (Governance): Content on the site must have identified content owners and processes and procedures for regularly deleting old content or retaining content based on Information Governance. At a minimum there should be a documented plan on retention, content ownership, and a process for purging.

Accessible/ADA (Section 508c3) Compliant: Web Accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality. At a minimum there should be a documented plan on addressing Accessibility gaps and timeline for implementing them.

Connect look and feel (colors and assets) Every effort should be made to use current Connect styles. New treatments may be proposed by a vendor for inclusion into the current Connect style sheet. Connect styles and templates can be provided to any development team or third party firm in order to enable common look and feel between websites or applications. USAA will provide information to the vendor which includes the Vendor Style Guide, images and CSS files.

Version Modified By Date Change 1.0 Nicole Erwin 9-15-11 Initial Creation 1.1 Nicole Erwin 10-18-11 SSO requirement updated proposed for session timeout. To be

of 17

reviewed. 1.2 Nicole Erwin 6-12-12 Updated title to include “/”.Updated items 1, 2 and 3. Added bullet 3

to Connect look and feel item. 1.3 Nicole

Erwin/Minakshi Das

7-10-12 Updated verbiage to suit vendor audiences. Removed bookmark functionality from redundant features list since MyLinks can’t address. Removed date and reference to legal review from Accessibility section.

of 17

Connect Plug-in Framework

of 17

Article II. OVERVIEW The USAA Corporate Intranet (“Connect”) and content provided by 3rd party partners must provide a common header, footer, and global navigation to ensure a seamless user experience to USAA employees.

To simplify third party integration and conformance with the USAA Intranet Requirements, USAA will provides a collection of plug-ins that can be inserted into the markup of a third party application providing client side integration and eliminating the need for complex server side integration. By including a small JavaScript library on each 3rd party page vendors can insert placeholder tags for each of the requirements above and the content will be delivered dynamically to the end users browser.

These plug-ins are available for integration via <USAAIML> (USAA Intranet Markup Language) tags and accompanying JavaScript SDK. A <USAAIML> tag is placed on the page and an included JavaScript library interprets the tag at render time and replaces them with USAA content and functionality. This approach is very similar to the approach taken by Facebook with their social plug-ins. (https://developers.facebook.com/docs/plugins/)

All user browser sessions will be pre-authenticated to Connect or External Connect via Single Sign-On (SSO) prior to accessing a 3rd party’s integrated website. The standard for USAA is Security Markup Language 2.0 (SAML). The project team working with the vendor needs to submit an IT service request to engage the IT Security & Fraud Applications team to enable SSO. This is require before the application can access USAA assets/plug-ins Thus the plug-in architecture assumes users are known and authenticated when JS calls are made to retrieve content. This allows the USAA plug-in framework to appropriately provide security trimming and customized content based on the currently logged in user.

of 17

Article III. HIGH-LEVEL DESIGN

Article IV. Framework Overview

Client Browser is SSO authenticated to USAA Intranet and third party application servers

of 17

Browser retrieves 3rd party content including usaa js library and markup tags

USAA js library processes tags and integrates content and functionality from USAA

Style sheets and images can also be dynamically included via USAA js library

Section 4.01 Connect Global Navigation Bar and Common Header (GNB):

Width: 975px Height: 155px

Sample HTML:

of 17

Include the following at the top of each page or in an include file to render the GNB: ( Denotes all one line)

<usaa:config appid="1234" autorun="true" service="https://spservices.usaa.com/Connect/AssetService/Assets.svc/v1/GetComponent" /> <div id="mainWrapper" style="width: 975px; margin-left: auto; margin-right: auto;">  <usaa:gnb searchurl="https://www.partnersite/your_results_page?yourparameters" />

appid – USAA will provide 3rd party vendors with a unique application ID. This id is used to set state onthe GNB such as highlighted a top level menu item.

pageID – USAA may request that 3rd party vendors send a specific page id along with the APPID for oneor more pages. It is not expected that this attribute will be used often but may be required to set state on the GNB in some cases.

searchurl – If this attribute is provided, the GNB will be rendered with an option to search the 3rd party site only (“This Site”). The value of this attribute must be a fully qualified URL to the 3rd party site’s search functionality with a placeholder for the user-entered search term.

https://www.partnersite/search?searchterm=${SearchTerm}...

The global navigation logic will replace the ${SearchTerm} and submit the search form to the URL.

Connect Global Footer:

Sample HTML: <usaa:footer /></div> 

Article V. CONFIGURATION AND INTEGRATION The following describes required modifications to HTML markup in order for the navigation framework to properly operate.

Section 5.01 XML Namespace Include the following namespace declaration at the top of each page:

of 17

<html xmlns:usaa="https://www.usaa.com">

Section 5.02 Framework JavaScript Library The USAA Framework requires the use of the jQuery JavaScript library versions 1.6 – 1.7.1. Vendor applications must reference jQuery in order to access the Asset Service (GNB and Footer). For compatibility reasons, jQuery is run in no conflict mode under the namespace USAAJquery. For more information about jQuery please visit https://www.jquery.com.

Include the following JavaScript file at the top of each page:

<script type="text/javascript" src="https://spservices.usaa.com/Connect/AssetService/js/usaaconnect.js"></script>

Popular Content Delivery Networks (CDN):

Microsoft

o https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js

Google

o https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

jQuery o https://code.jquery.com/jquery-1.7.1.min.js

of 17

1. Within the <head> tag, which is located inside the <html> parent node, append the following JavaScript

files.

<html xmlns=”https://w3.org/1999/xhtml” dir=”ltr” lang=”en-US”><head>

<script type=”text/javascript” src=”{path}/jquery.min.js”></script>  <script type=”text/javascript” src=”https://spservices.usaa.com/Connect/AssetService/js/usaaconnect.js”> </script>

</head><body> </body>

<html>

{path} represents the location in which jQuery library file resides in the host environment.

2. Within the <body> tag, prepend the following custom tag with deliver attribute values.

<html xmlns=”https://w3.org/1999/xhtml” dir=”ltr” lang=”en-US”><head>

<!—Step 1 contents --> </head><body>

<usaa:config appid=”{Application ID}”service=”https://spservices.usaa.com/Connect/AssetService/Assets.svc/v1/GetCompon ent”

autorun=”true”></usaa:config>

</body>

<html>

{Application ID} represents the vendor’s application ID and is required.

of 17

3. Within the <body> tag, add the following custom tags. These tags are place holders for the corresponding

navigation components that will be rendered by the web service.

<html xmlns=”https://w3.org/1999/xhtml” dir=”ltr” lang=”en-US”><head>

<!—Step 1 contents --> </head><body>

 <usaa:gnb pageid=”{Page Identifier}” searchurl=”{Search Url}” /><usaa:enterprise_nav pageid=”{Page Identifier}” /> (this footer is

optional. See note in section #2 below)<usaa:footer pageid=”{Page Identifier}” />

</body><html>

{Page identifier} represents an ID that may be used to identify the render page. (Optional)

{Search Url} represents the url override for <usaa:gnb /> tag and its html content that is used to create the “This

Site” radio button and search box functionality. (Optional)

Article VI. Custom Asset Tags

Article VII. Insert the following tags to render USAA Connect assets. 1. <usaa:gnb> - This tag will render the global navigation bar with the mega-menu. This element is

mandatory.

a. Example Rendering

2. <usaa:enterprise_nav> - This tag is responsible for rendering the enterprise navigation menu. This

section is only used on primary Connect portal pages and should not be used on vendor applications

unless guidance has been provided


by the Intranet Working Group.

of 17

3. <usaa:footer> - This tag is responsible for rendering the global footer navigation menu. This element is

mandatory.


VENDOR STYLE GUIDE

Visual Standards and GuidelinesLayout SpecificationsReference

| Connect Style Guide - Vendor | 1

Page Classes / Templates

Color Palette

CSS – Common rules

GNB Structure Detail

GNB Megamenu Specifications

Global Footer Specifications

Box Styles

Reference

Table of Contents INTRANET STYLE GUIDE

3 |4 |5 |6 |7 |8 |9 |

10 |


Page Class Types INTRANET STYLE GUIDE

Wrapper Class A Class B

Class C Class D

Class E

GNBNavigationFooter navigationFooter

Page ID1 column

Page ID2 column – content right

Page ID2 column – content left

Page ID3 column – content center

Page IDFeature block2 column – content right

Applies to allConnect Sites

Local Navigation Option

All class types can invoke the Local Navigation bar displayed immediately below the Page ID.


CONNECT Color Palette INTRANET STYLE GUIDE

Primary Color Palette Secondary Color PalettePrimary color palette represents color combinations used within the html template framework.

Secondary color palette represents colors utilized for unique instances, call-outs, highlighting, etc. within the content.

34

#334C70

#648DAF

#F07400

#FF9A35

#242424

#DBDBDB

#E1E1D9

#F0EFEC

#0099FF

#CC0000

#66CC00


CSS Common Selectors INTRANET STYLE GUIDE

h1 {font-size: 1.8em;font-family: Arial, Helvetica, sans-serif;color:#666;font-weight:normal;

}

h2 {font-size: 1.6em;font-family: Georgia, "Times New Roman", Times, serif;color: #333; font-weight: normal;

}

h3 {font-size: 1.3em;font-family: Arial, Helvetica, sans-serif;color: #f07400;

}

h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; color: #344E70;

}

h4 {font-size: 1.2em;}

h5 {font-size: 1.1em;}

p { margin:7px 0; }p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}

a {text-decoration: underline;}a:visited {color:#344E70;}a:link {color:#344E70;}a:active {color:#438CCA;}a:hover {color:#438CCA;}

img {border: 0;}.imgRight {float:right; margin: 0 0 8px 12px;}.imgLeft {float:left; margin: 0 12px 8px 0;}.ie7 img {-ms-interpolation-mode: bicubic;}

q {quotes: "" "";float: right;font-family: Arial, Helvetica, sans-serif;font-size: 1.1em;font-weight: bold;padding: 15px;background-color: #F0EFE6;

}

blockquote {quotes: "" "";float: right;font-family: Arial, Helvetica, sans-serif;font-size: 1.1em;font-weight: bold;padding: 15px;background-color: #F0EFE6;

}

hr {color: #fff; background-color: #fff; border: 1px dotted #999; border-style: none none dotted; margin:10px 0; }


Global Navigation Bar (GNB) Structure Detail INTRANET STYLE GUIDE

20 px 20 px

45 px

110 px

40 px

70 px

1 pixel white border-bottom

110 px

975 px

GNB header area uses a .jpg non-repating background image.

USAA logowidth: 60pxheight: 60pxmargin: 17px 0 0 20pxtransparent .png

41 px

37 px10 px

CONNECT logowidth: 197pxheight: 41pxmargin: 37px 0 0 10pxtransparent .png

231 px

Search bar text field uses x-repeating background image for inset shadow.

Height is determined by a 3px padding, 1 pixel border, and 1em font-size.

Search bar has CSS3 and Jquery style features to highlight user interaction in compatible browsers.

Submit button uses a sprite to display a hover state.

Radio buttons are used to manage specific results queries.

Navbar uses 3-state sprite for hover and selected states.

User ID area provides date/time. User name links to MySite.

Utility navigation

Weather feed only displays conditions icon and temparture.

Convenience links provide persistent controls:Add Link (adds page url to user’s MyLinks)Font Size Control (n/a), and Share page via email.

MegamenuAll top-level menu buttons invoke a megamenu, including the Home button.

Non-Manager NavigationHides the Manager Center menu button. The weather/page controls end area expands to fill space – menu buttons always float to left margin.

Manager / non-manager roles


Global Navigation Bar (GNB) Megamenu Specifications INTRANET STYLE GUIDE

Max width 975 px

Subnav containerWidth scales based on number of columns but cannot exceed max width of 975px.

Max number of columns is 5.

20 px20 px

20 px20 px

20 px

Menu columnsVariable number of columns and rows (max number of columns should not exceed 5)

ExampleIn this screenshot the About Me menu item is active revealing it’s sub-navigation megamenu. The megamenu sub-nav for each top-level menu item displays on mouse hover.

Top-level Navigation


Global Footer Specifications INTRANET STYLE GUIDE

20 px20 px

20 px20 px

20 px

Max width 975 px

Column 1

#footer_wrapper .column1 {position: relative;float: left;margin: 0 20px 0 0;padding-right: 10px;width: 256px;border-right: solid 1px #666;min-height: 150px;

}

Column 2

#footer_wrapper .column2 {float: left;margin: 0 20px 0 0;padding-right: 10px;width: 192px;border-right: solid 1px #666;min-height: 150px;

}

Column 3

#footer_wrapper .column3 {float: left;margin: 0 20px 0 0;padding: 0 10px 0 15px;width: 177px;border-right: solid 1px #666;min-height: 150px;

}

Column 4

#footer_wrapper .column4 {float: right;margin: 0;padding: 0 10px 0 10px;width: 195px;

}

266 px

20 px

Footer Wrapper#footer_wrapper {

margin: 0px auto;padding: 20px 0 20px 20px;width: 955px;min-height: 150px;background-color: #787878;

color: #fff; background-image: url(../images/ footer_bottom_bg.jpg); background-repeat: repeat-x;}

202 px

20 px 20 px

202 px 215 px

h2#footer_wrapper h2 { color: #0099FF; margin: 0 0 8px 0; font-weight: normal; font-size: 1.6em;}

ul#footer_wrapper .column4 ul { list-style-image:url('../images/footer list_bullet_double_arrow.png');}

*applies to column 3 and column 4 only


Box Styles INTRANET STYLE GUIDE

75%

75%

Announcement Box

Notification / Alert Box

Highlight Box#content #highlightBox { background-color: #FFFFFF; background-image: url("../images highlightbox_background.jpg"); background-position: center bottom; background-repeat: repeat-x; border: 6px solid #EAEAEA; margin: 10px auto 20px; width: 75%;}

Highlight Box H5 Header#content #highlightBox h5 { background-image: url("../images/highlightbox_icon.png"); background-position: left top; background-repeat: no-repeat; font-size: 1.4em; height: 64px; line-height: 4; margin: -10px 0 0 20px; padding-left: 65px; text-align: left;}

Highlight Box#content .alertMessage { background-color: #FFFFCC; border: 1px solid #FFCC00; margin: 15px auto 20px; width: 75%;}

Highlight Box H5 Header#content .alertMessage h5 { background-image: url("../images/icon_alert_box.png"); background-position: left top; background-repeat: no-repeat; font-size: 1.4em; height: 64px; line-height: 4.5; margin: -8px 0 0 20px; padding-left: 65px; text-align: left;}

Announcement Box StyleThis style is used for general announcements that are to be featured. Typically a daily announcement.

Notification / Alert Box StyleThis style is used for alerts and notifications. Generally this style will be invoked dynamically as result of an error or empty data record.


Reference INTRANET STYLE GUIDE

Points Pixels Ems Percent6pt 8px 0.5em 50%7pt 9px 0.55em 55%7.5pt 10px 0.625em 62.50%8pt 11px 0.7em 70%9pt 12px 0.75em 75%10pt 13px 0.8em 80%11pt 15px 0.95em 95%12pt 16px 1em 100%13pt 17px 1.05em 105%13.5pt 18px 1.125em 112.50%14pt 19px 1.2em 120%14.5pt 20px 1.25em 125%15pt 21px 1.3em 130%16pt 22px 1.4em 140%17pt 23px 1.45em 145%18pt 24px 1.5em 150%20pt 26px 1.6em 160%22pt 29px 1.8em 180%24pt 32px 2em 200%26pt 35px 2.2em 220%27pt 36px 2.25em 225%28pt 37px 2.3em 230%29pt 38px 2.35em 235%30pt 40px 2.45em 245%32pt 42px 2.55em 255%34pt 45px 2.75em 275%36pt 48px 3em 300%

Points to Ems and Pixels conversion


content.usaa.com · xNew Development – Introduction of a new application to USAA will result in...

Documents

Transcript of content.usaa.com · xNew Development – Introduction of a new application to USAA will result in...