Global Corporate & Investment Banking · 2.1 Masthead & Lockup 2.1.1 Footer 2.1.2 Partner Site...

Bank of America Global Corporate & Investment Banking Portal Guidelines Prepared by Organic 11/27/07 1

Global Corporate & Investment Banking Portal Guidelines

November 27, 2007


1.0 We are the Bank of Opportunity

1.1 The Evolution from the GMT Style Guide

1.2 The Color Palette

2.0 GCIB Site Layout

2.1 Masthead & Lockup

2.1.1 Footer

2.1.2 Partner Site Layout

2.1.2.1 Partner Masthead & Lockup

2.1.2.2 Partner Footer

2.2 Navigation

2.2.1 Buttons & Tabs

2.2.2 Graphic Lexicon

2.3 Content Portlets

2.3.1 Open (preferences) Portlet

2.3.2 Text List Portlet

2.3.3 Tables Portlet

2.3.3.1 Complex Tables

2.3.4 Tab Portlet

2.3.4.1 Nested Tables

2.3.5 Calendar

2.3.6 Graphs

3.0 Sign-on Process

4.0 Appendix

Table of Contents

3

4

5

6

7-8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25-28

29

Bank of America Global Corporate & Investment Banking Portal Guidelines Prepared by Organic 11/27/07


The way in which Bank of America implements its brand is crucial to how it is perceived both internally and externally, by Bank of America’s employees and by Bank of America’s clients and customers.1

This document contains interim guidelines on the use of brand marks, color and typography to ensure that a consistent brand look and feel is maintained for Bank of America’s Global Corporate & Investment Banking (GCIB) group online.

Our taskEvolve from Higher Standards branding and related elements to Bank of Opportunity and new brand characteristics.

1.0 We are the Bank of Opportunity

Clearly demonstratesrather than declares thevalue to the customer

Approachable,understandable, andeasy to interact with

Never pretentious, aloof,or overly theatrical

Connects with theindividual as wellas the group

Understands thecustomer’s point ofview and conveys thecustomer’s opportunity

Builds an emotionalrelationship beyondthe functional

Anticipates thecustomer’s needs

Has vision to seewhat’s possible

Makes decisionsbased on experience,knowledge, and analysis

Has initiative to bringopportunity to life

Executes with purposeand integrity

Delivers what’s bestfor the customer

1. Segal + Gale 2007

All colors are as specified. This document may not be photo-correct for RGB.


The past GMT layout was indicative of earlier windows-based structure of navigation based on best practices at the time. Discreet information was launched in pop-up windows.

1. Application Name 2. Open tab navigation 3. User name, Log in date and GMT time stamp 4. Bank of America branding 5. Help and supportive functional links 6. Log out link

Organization of content was straightforward, but some usability concerns arose:

• when functional content (5. Help) is removed from the primary navigation and had to be accessed in a popup;

• it necessitated the incorporation of a breadcrumb to reinforce wayfinding for the user;

• any subcontent navigation broke the structure of the tier 2 horizontal nav.

Location of Bank logo was appropriate for existing hierarchy, but did not allow for any unexpected function (i.e., Search) to be incorporated at a global navigation level.

1.1 The Evolution of the GMT Style Guide

1

2

34

56


The Opportunity Palette is similar to the previous GMT, but supportive grey palette is warmer in tone to be more complementary to Bank of America Red. Dominant link color and primary call to action is blue. Borders have been lightened to medium gray. The overall effect will be less visual noise, allowing functional links and content to rise to the surface for power users.

Note: GMT guide in red, updated specs in blue.

1.2 The Color Palette

Default Link hex# 6688A4

hex# 0052C2

hex# 696969

Highlight Link

Visited Link


GCIB’s goals for the Portal are primarily to: • Give the clients a simple and seamless platform to perform their money management tasks quickly and confidently

• Give new partners and/or acquisitions the tools to develop products that not only enhance the seamless experience, but also grow the brand by allowing GCIB to offer clients an ever-increasing suite of industry- leading products

The layout of the Portal supports this strategy and anticipates the unknown. This site has flexibility at the core of its structure in order to accommodate an infinite number of tools and content types.

The five-column grid allows the content to be presented in five different sized portlets, chosen and arranged according to importance by the product teams. As new products are brought into the Portal, the fixed grid system allows portlets to move around and even expand or contract based on importance.

This modular approach allows the site to be updated easily without the need of a complete system overhaul any time a new product is introduced. Further, the fixed structure gives the client confidence in any new products that are introduced, as the system is familiar.

The layout is derivative of pilot functional layout. All partner content will map to this structure. Functional content left, supportive/admin/help on right. Note that the only item not included in the modular approach is the footer. Legal and copyright information falls below the content portlet area.

2.0 GCIB Site Layout


To reinforce the hierarchy of the Bank brand and relationship to GCIB, establish a consistency of communications across multiple entry points, and create some white space for future functionality, we will utilize a logo lockup within the masthead area.

The “Bank of Opportunity” tagline will not be used in the online representation for GCIB for maintenance purposes.

There are two distinct layouts for the GCIB Masthead, pre-sign on (including all authentication screens) and post-sign on. While they share design elements – page width, font and text treatment – there are significant style differences.

The logo lockup is present on both pre- and post-sign on.

• 10px white space to the left of the lockup

• Bank of America logo: Width - 196px; height - 28px; border Line on right of logo - 1px solid #cfcfcf

• Portal or Partner logo: Width - depends on the width of the logo; height - 28px

Pre- and post-sign on mastheads share similar style in that there is an accent band 1000px wide, 25px high below the lockup. The treatment differs as below:

1. Pre-sign on and authentication screensThe band is for accent only and is presented to maintain and anticipate the look/feel of the post-sign on environment. For sign on that takes client to the GCIB Portal, it will use the color palette for GCIB. For sign on that takes client to a different partner site, it will use the color palette designated for the partner sites.

2. Post-sign onThe band is not only for accent, it holds the top level navigation elements as well. (Style specifications again dependent on whether it’s for Portal or partner site.)


Pre-sign on

Post-sign on


The Masthead contains the same functional content as the GMT version, but includes more functional space.

Name Color Iconography

1. Application Name #6969692. Open tab navigation #D4001A3. User name, Log in date and GMT time stamp #CFCFCF4. Bank of America branding (artwork)5. Help and supportive functional links #6688A46. Log out link #6688A4 x circle7. Last log in date and time stamp #CFCFCF8. Search functionality #6688A4 magnifying glass

The location of supportive site content (5. My Profile | Internal Admin | Help) supports one consistent navigational structure.


1

2

3

4

5

67

8


2.1.1 Footer

Pre-sign on

Post-sign on


To reinforce the GCIB Portal “family” brand, a Partner Site follows almost identical style and layout as the Portal itself. The Partner Site maintains a similar look and feel in the masthead and logo lock treatment and follows the same rules of pre- and post-sign on.

2.1.2 Partner Site Layout


The masthead is identical to the GCIB style guide, but the primary navigation background uses the Bank of America blue (hex: 0052C2), instead of the lighter functional blue of the Pilot portal (hex: F0F8FF)

The tab menu on and tab menu hover values are exactly the same as specified for the GCIB portal (see description on next page).

The white space in the masthead, as mentioned earlier, is important to the growth of the GCIB Portal network, as we want to ensure there is ample space for any proprietary tools or functions that a Partner requires. For instance, the “Partner Post- Login” illustration at right shows a Ticker Search within the white space of the masthead of the Credit OAS partner site.

2.1.2.1 Partner Masthead & Lockup

Partner Pre-sign on

Partner Post-sign on


The Footer area of the Partner site is distinct from the GCIB Portal. Since we cannot anticipate all the possibilities of a partner’s footer, a flexible space is available that will accommodate: • Text links

• Logo/branding if required by a Partner

• Text block – can be as large or small as needed to fulfill partner’s legal requirements.

Again, the footer area does NOT follow the 5-column grid so that it can be flexible to the requirements of the Partner.

2.1.2.2 Partner Footer

Partner Post-sign on

Partner Pre-sign on


We recommend reducing the number of available tiers of information to three levels, and combining the first and second levels visually in the initial dropdown navigation.

Name Color Background Iconography

1. Tab Menu Hover #6688A4 gradation

2. Tab Menu on #D4001A gradation

3. Item Hover #0052C2 #F0F8FF chevron/carat

4. Item default #6688A4

5. (non link) group #696969

6. Level icon off #6688A4

7. Level icon hover #0052C2 #F0F8FF chevron/carat

2.2 Navigation

1 2

34

5

6

7

Post-sign on


The “action” buttons and portlet tabs reflect the new GCIB’s lighter, modern style. And while buttons and tabs have a similar look, there are distinct color and usage rules that have to be enforced so that a user will never mistake a tab for a button:

• Button’s default state is blue; it becomes red only on rollover

• Active Tab is red, while inactive tabs are grey

2.2.1 Buttons & Tabs

Buttons

Tabs


We recommend implementing a simple visual language to reinforce the user’s decisions, and manage the user’s expectation of where they will go and what they will do.

Suggested iconography helps to reinforce a decision, denote larger processes or actions, or in what format they will receive information:

1. chevron2. calendar3. excel, word, powerpoint4. leaving the site5. pdf document6. close or log out7. search8. carat

The icons do not have a rollover state, with the exception of the chevron in the menu hover mode since it is part of a text rollover function. See section 2.2 for details.

2.2.2 Graphic Lexicon

1

2

3

4

5

6

7

8


The content area is divided into a 5-column grid. All content modules developed are called ‘portlets’ and will map to the grid. Currently, the dimension of the portlet is determined by the scope of its content, but structure and placement are currently hard-coded.

2.3 Content Portlets


Purpose:The Open portlet spans the width of the content area, and can accommodate any content needed. It is most appropriate for linear, stepped processes, but can also be used for straight text, as in article, news or directional content. Users can control their own preferences via the Preferences or Admin section.

Layout:If there is a wizard to describe a step by step process, then the portlet should cover the entire width of the screen. If there are multiple windows that act independently of one another, then the full grid may be used to populate the window with as many functional windows as needed.

While the 5-column grid is in play for open portlet screens, it is not mandatory as the first column has to be flexible to accommodate larger field descriptions and large dropdowns. If there is a need to bypass this grid layout, ensure there is a 10-pixel gutter is present between the columns.

2.3.1 Open (preferences) Portlet


Purpose: When a list of detailed text links is required, this 3- or 4-column portlet should be used. As in the Global Markets Research Portlet illustrated here, the text links can be titles of articles. (Other uses could be lists of upcoming events, white papers, etc.)

Layout: The illustrated GMR portlet here uses a 4-column layout, but a text list portlet could also be 3 columns wide. This flexibility allows your layout to take advantage of the space as in this example where the 4th column is used as a modifying or descriptive variable on the article/event.

This portlet uses the shaded table rows to separate the content visually. Dimensions are content driven plus margin. Margins need to be the same for all listed info in portlets.

1. GradationThe 10 pix accent bar is a graphic element that frames the content within the Portlet window. This is placed at the top and bottom of Text List Portlets to define the content area, and (as illustrated in this example) to delineate the content from the subtitle/search bar.

NOTE: A tile-able, graphic asset is included in the Style Guide design files.

Text Link PortletWhen simple text or a list of text links is required. When a short message (e.g., daily system messaging) is required, this 1-column portlet can be used. Mostly, it will be used for links. The links can be internal links to articles/applications on the site; links can be external in which case they require the icon indicating it will open in a new window.

Layout: 1-column portlet (188px) with white background (no shaded line treatment.)

2.3.2 Text List Portlet

Text Link PortletGradation

1

1


Purpose:There is an unlimited number of ways that tables can be used on the Portal and partner sites. So while we don’t give concrete rules for every possibility, we do provide the tools for developers to easily style whatever is needed.

Layout:The Portlets described previously in 2.3.1 and 2.3.2 cover many of the basic tools for a table portlet:

• Shaded table rows

• Tabs

• Text links

• Input field

• Interactive button

The illustration here gives tools and rules around: • Ledgers and numbers tables – monetary figures always aligned right

• Filter or sort function

• Download functionality*

*Note that the placement of the download icons (pdf and Excel) in the illustration here indicate that the entire chart could be downloaded in both formats. We recognize that developers may need to make certain features or sections of a table/portlet downloadable - or perhaps even a single table cell that holds an account number and the icon allows user to download account information behind that table cell. Therefore, the download icons are flexible and can be placed on any row or cell of a table with the dimensions and spacing as shown at right.

2.3.3 Tables Portlet

Default table row size is 24 pix which includes an 8 pix padding above and below the vertically-centered text.


When developing for Portal, you could find that a simple table will not satisfy your project’s requirements. For instance:

• Comparing ledgers • Evaluating a company’s finances • Comparing large multi-currency spreadsheets

The tools and styles created for Portal were built to anticipate these complex tabular situations. This illustration is presented as an example of how a potentially unreadable series of tables can be built within the 5-column framework.

2.3.3.1 Complex Tables


Purpose: When a complex set of related tasks is required, portlet windows can accommodate a tabbed navigation element. This should be used when there is distinct content or tasks under each tab, and should NOT be used as a straight navigational tool.

The illustration shows a full 5-column portlet window, but the tabbed portlet can be used for 2-5 column windows as well. Layout: Because of the complexity of some portal applications, a wide variety of assets/functions can be displayed in these portlets: • Diagrams • Shaded table rows • Text links • Drop downs

2.3.4 Tab Portlet


The default table row has already been described in 2.3.3 (24 pix which includes an 8 pix padding above and below the vertically-centered text).

When there is more information or data that the user needs to access, a carat icon is indicated in the “closed” position. When the user clicks on the closed icon, the carat changes to “open” state, and the row expands with the same background color to indicate it is related to the same account number or other parent variable (e.g. a company name, a research topic etc.) The parent-child delineation is made with a fixed indentation of 15 pix which accommodates the open carat icon. This way, the user easily sees the hierarchical relationship of the content. As illustrated at right, there can be multiple levels of the parent-child relationship, all housed within one colored table row.

2.3.4.1 Nested Tables


Purpose:We cannot anticipate all of the ways calendars might be used on the Portal, so the 5-column grid gives partners flexibility with the layout.

Layout:The Calendar Portlet itself uses a 188 px window that can sit within an application portlet, sit within a preferences (with form fields) portlet, or standalone as a simple information element with standard calendar functions:

• Highlight of current day

• Bank Holiday indicator

• Visited or past event indicator

2.3.5 Calendar


Purpose:It is understood that much of the financial data imported into the Portal and partner sites will be designed by an outside provider. There is no way to style or control fixed graphs, yet these critical content components still need to fit in with the Portlet environment. The 2-column window provides an ample space to hold a graph (or any fixed diagram), and still allows it to appear branded by the Portal.

When the developer has the ability to create a graph, guidelines are provided here.

Layout:Whether the graph is a fixed, imported image, or a client-built graph, the 2-column portlet window will be the same to ensure Portal continuity. Since we can’t anticipate how a developer will need to use a chart or graph, the standard Portal tools are available:

• Tabs in the case of a multi-graph environment The tabbed portlet can be used for 2-5 column windows as well whenever there are related tiers of navigation to be viewed. (e.g., a stock watch application in a 2-column portlet window will allow the client to “tab through” stock charts)

• Table rows that can hold text or sub-header information

• Ability to include download or information icon

• Color recommendations

2.3.6 Graphs


The sign on or authentication screens for the GCIB and Partner sites alike use the pre-sign on style described in section 2.1. The masthead is stripped down to the bare bones of logo lock and accent band. The footer is also scaled down to the minimum with a white background and no branding. While the 5-column grid is in play for the sign on screens, the content may present limitations. For instance, a lengthy field label or dropdown menu may push the content beyond the boundary of the 188 pixel column. In those cases, the grid is not mandatory as long as a 10-pixel gutter is present between the columns. For illustration purposes, the following screens show the content area of the sign on process only – without the header and footer – as the steps are shared by both Pilot and Partner.

3.0 Sign on Process

Pilot Authentication Screens

Partner Authentication Screens


3.0 Sign on Process

Password

Error

Renew Certificate


In the example shown, the first column in the 188 pixel grid is comprised of two smaller columns of field descriptions and the fields themselves. Descriptions for form fields should be aligned right within the first column. The width of this column is fixed to accommodate a series of words 14 characters in length. The remaining width is comprised of the 10 pixel gutter and the fields themselves. Vertically, all form fields should be 5 pixels from each other.

3.0 Sign on Process

Set up Password


3.0 Sign on Process

Tech Support

Challenge Questions


4.1 HTML Templates & CSSContains current sign on process (open template) for GCIB Pilot program. CSS stylesheets for GCIB color palette and link hierarchy included.

4.2 Graphic Templates 4.2.1 Masthead/Navigation Photoshop templates of GCIB and partner masthead and navigation layer sets for optimization. 4.2.2 Partner Graphic Footer Photoshop templates of partner graphic footer for optimization.

4.3 FontsHigher Standards (logo lockup)Franklin Gothic Condensed (primary navigation)Arial (system font)

4.0 Appendix

A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z1 2 3 4 5 6 7 8 9 0 ! @ # $ % &

ABCDEFGHIJKLMNOPQRSTUVWXYZabcd e fgh i jk lmnopqrs tuvwxyz1234567890 !@#$%&

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefgh i jk lmnopqrstuv w x yz1234567890 !@#$%&

ABCDEFGHIJKLMNOPQRSTUVWXYZabcde fgh i j k lmnopqrs tuvwx yz1234567890 !@#$%&

A B CD EFG H I JK L M N O PQ RS T U V W X YZ

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 ! @# $ % &

A B CD EFGH I JK L M N O PQ RS T U VW X YZ


1 2 3 4 5 6 7 8 9 0 ! @# $ % &

A BCD EFGH I JK LM N O P Q R S T U V W X Y Z


1 2 3 4 5 6 7 8 9 0 !@# $ % &

ABCD EFGH I JK LM N O P Q R S T U V W X Y Z


1 2 3 4 5 6 7 8 9 0 !@# $ % &

Arial

Arial Regular

Arial Italic

Arial Bold

Arial Bold Italic

Global Corporate & Investment Banking · 2.1 Masthead & Lockup 2.1.1 Footer 2.1.2 Partner Site...

Documents

Transcript of Global Corporate & Investment Banking · 2.1 Masthead & Lockup 2.1.1 Footer 2.1.2 Partner Site...