Citibank Mobile Style Guide - iPhone

Guidelines to help in creating the banking industry’s best iPhone application

15/02/2011

1
0.0 Background

We live in extremely exciting times, also in extremely

competitive times. The world around us is changing rapidly
and response times and quality of response is becoming key
to success. To be a leader in today’s world, we need to
constantly think ahead and be proactive.

Customer centricity is key. With wider access, customers

have greater choice and are less shy of exercising these .

It is imperative that we win and continue to win in this

dynamic and constantly evolving environment. It is important
we play to our core strengths. Being Global is one of them,
and having the collective skills and strengths of all our
multiple teams around us is yet another. These very strengths
can be wasted or detrimental to our cause if not leveraged
well.

This Style Guide is an attempt to try and leverage these

strengths. By providing countries guidelines to direct their
efforts and by receiving inputs and critique from them, we will
ensure that our base capabilities are significantly enhanced
and we win on several counts:

•We win by leveraging our large collective pool of talent,

resources, understanding and experience
•We win by a superior customer proposition, enriched by an
agreed common set of standards
0.0 Table of Contents

1.0 Overall Design

1.1 Page Overview
1.2 Navigational Scheme
1.3 Application Types
1.4 Content Types
1.5 Interaction Types

2.0 Colours
2.1 Colour Pallette
3.2 Primary, Secondary & Tertiary Colours

3.0 Typography
3.1 Font Usage
3.2 Navigation and Title Bar
3.3 Interaction Box & Title Bar

4.0 Icons & Action Buttons

4.1 Primary, Secondary & Tertiary Buttons
4.2 Button Styles

5.0 Page Structure

5.1 Loading Page
5.2 Landing Page
5.3 Sign on Page
5.4 Home Page (Post Login)
5.5 Other Pages (General Guidelines)
1.0 Fundamentals
iPhone has revolutionized the wider digital industry – way
beyond the mobile phone product category. The primary reason
for its widespread success are certain unique components and
interaction elements, which have come to symbolize the
iPhone’s intuitiveness.

It is important that we leverage such a well established and

tested set of interaction fully, so that our application, and
modules within it, become easier for our customers to use.

The most common and popular interactive elements of the

iPhone have been summarized on the following pages for ease
of reference.
1.1 Page Structure

Navigation Bar

Title Area

Working Area

Interaction Box

Tab Bar
1.2 Navigational Scheme

1. The top Navigation bar of the Citibank iPhone application

provides for the main branding area with upto two functional
elements:
•“Sign Out “ providing users a secure way to log out of the
1
transactional section (post login section), and
• “Back” or “Home” buttons for users to navigate out to
either a previous function or to the home page

2. A key decision to be made while designing an iPhone

application is the type of Navigational scheme to be followed:

• Contextual Navigation - allowing users to get to the most

logical and likely tasks, given the primary display on the
“Interaction Box”
2
• Set Navigation - allowing users to get used to certain
standard selections and not having to search within the Tab
Bar for commonly performed functions.

You will require to make the choice between following the Set
Navigational system and following the Contextual
Navigational system.
1.3 Application Types

The Citibank iPhone app provides for three distinct design

treatments – depending on the application type. Countries are
advised to use discretion and balance while making a
selection of the type of treatment that will do best justice to
application module to provide users the most relevant
experience:

Productivity Applications:
display information customers would like to scan quickly and go
into greater levels of detail of. These are modules seen very
regularly – examples include: Account balances, Summaries, Mini
statements etc.

Utility Applications:
displaying information on a subject to help customers make better
informed decisions. These usually allow users to scroll through
historic and current information – examples include: FX rates, FD
Rates etc.

Immersive Applications:
those that help users get a better sense of relative or comparative
positions and allow them to gauge the impact of alternate
decisions – examples include: retirement planners; spend analyzers
and budgeting tools etc.

Note: Designs, colours, treatments to be finalized post Global review

1.4 Content Types

General content.
There are two primary ways for display of content:
• Image View: Content displayed with relevant
images (popular usage: offers, promotions etc.)
• Table view: Content presented in a tabular
format (popular usage: productivity apps like
Account Summary, Details etc.)

Personalized Offers
Leveraging today’s technology and analytics capabilities, it is
very possible to enhanced user experience by presenting
offers which are personalized to users.

The Citibank iPhone design provides the opportunity to

present “personalized Offers” to users making such offers
relevant and contextual.

Note: Designs, colours, treatments to be finalized post Global review

1.5 Interaction Types

Tap
Action buttons tapped for selection (similar to a mouse click)

Pinch
Pinch to expand or contract content for a better or larger view
or at other times, sharper view (zoom in; zoom out)

Swipe
Allows scrolling to different pages (and seeing new content)by
swiping the screen to the left or right.
In case of multiple pages, the number of dots indicates
number of unique pages and differently coloured dot denotes
current position relative to total pages

Edit Hold Touch

With text that is editable, touching and holding leads to a
cursor appearing on magnified text to help the edit process

Drag (traditional Vertical Scroll)

The drag action by sliding the finger up or down (or
sideways) for scroll or pan action

Flip
More Information – flip over page for information on reverse
of page

Note: Designs, colours, treatments to be finalized post Global review

2.0 Colours
The colours used for this application are in keeping with
Citibank’s Blue Wave guidelines and symbolize energy,
dynamism and progression

The colours used by applications developed by countries should

not vary from those stipulated as a part of this guide.
2.1 Colour Palette

Blue Wave Colour Key

(Snapshot of gradient tool box below)

Gradient 1: Refer to PSD xx

Gradient 2: Refer to PSD xx
Gradient 3: Refer to PSD xx

Note: Reference PSDs will be provided as a part of the Style Guide Package
2.2 Colour Specifications

Note: Colour specifications will be provided once the Global Team has finalized and selected from the various colour options of
the various elements.

Please refer to Page xx to xx of this document for these colour option.

3.0 Typography
Typography is an integral part of the overall design. The choice of
fonts is determined by readability, presentation and device
compatibility.

Given the screen size, as well the factor of mobility during use,
readability has been given maximum weightage in the font
selection process.
3.1 Font Family: Helvetica Neue

Font Family: Helvetica Neue

Helvetica Neue is a very elegant and sophisticated font. At

the same time it is compact and clear – features that are
essential for the limited space available in an iPhone.

At places where an application name or feature requires to be

highlighted, the bold version of the font is used. At other
places the medium or normal type is utilized.

HELVETICA NEUE
AB C D E FGH I JKLMN O PQR STU VW XYZ
1234567890
3.2 Navigation & Title Bar

Please follow these specifications:

1
1. Home (Text): Font: Helvetica Neue Bold
Font size: 12
Hue # : ffffff
1 2
2. Sign Out (text): Font: Helvetica Neue Bold 2
Font size: 12
Hue # : ffffff

3. Overall Balance: Font type: Helvetica Neue Bold

Font size: 16
Hue # : e6e7e8
Text Layer Effect

2
3
3.3 Interaction Box & Tab Bar

Please follow these specifications:

1
1. Font: Helvetica Normal
Font size: 15 2 3
Hue #: ffffff; R:255; G:255; B: 255 2
Text layer Effect
4

2. Font: Helvetica Neue Bold

Font size: 14
Hue #: 6d6e71; R: 109; G: 110; B: 113

3. Font: Helvetica Neue Bold

5
Font size: 14
Hue #: 4b9037; R: 75; G: 144; B: 55

4. Font: Helvetica Neue Bold

Font size: 14
Hue #: ed2124; R: 237; G: 33; B: 36

5. Font: Helvetica Light Oblique

Font size: 10
Hue #: a7a9ac; R: 67; G: 169; B: 172
4.0 Icons & Buttons
All selectable User Interface elements, including links, buttons,
and checkboxes, must be made reasonably large on the page to
allow users to select them using their fingers, with the greatest of
ease. While designing an icon or button, it is important to ensure
that it is attractive, compact and easily recognizable.
4.1 Primary, Secondary and Tertiary buttons

Primary Buttons
All primary buttons to be kept to the right for touch screen
devices as most users generally use their right hands. These
buttons are generally for positive actions and hence have
been given the colour green as they help users proceed
further.

Secondary buttons
Only the “Cancel” and “Sign Out” buttons are suggested to be
in red. Other such buttons - e.g. “Back” will be in gray as
using them will not terminate an action/ task and hence no
warning is required to be offered.

Tertiary buttons
These buttons are in blue and are options to move away from
the current task being performed by the user. For instance
“Home”. These buttons are selected by users as a conscious
choice and hence are in blue for the user to concentrate on
task in hand and not be distracted

Note: Designs, colours, treatments to be finalized post Global review

4.2 Button Style

1. Icons size: W: 60 pixels; H: 60 pixels

1
Icon Layer style

2 3

2. & 3. Button Size: W: 101 pixels; H: 32 pixels

Font type: Helvetica Neue Bold; Font size: 14

Note: Designs, colours, treatments to be finalized post Global review

5.0 Page Structure
Page Structures have a strong impact on functionality. An
application that appears illogical or cluttered does not make for a
smooth user experience. It is important to ensure proper spacing
and positioning to facilitate users ability to click through and to
improve readability.
5.1 Loading Page

Please follow these specifications:

1.W: 252 pixels; H: 58 pixels

2.W: 37 pixels; H: 37 pixels

Note: Designs, colours, treatments to be finalized post Global review

5.2 Landing Page

Please follow these specifications:

1. W: 150 pixels; H: 38 pixels

2. W: 28 pixels; H: 28 pixels
Hue#: fffff; R: 255; G:255; B:255
3. W: 60 pixels; H: 60 pixels 2
4. Font: Helvetica Neue Bold; Font Size: 12
1
Hue : ffffff: R: 255; G:255; B: 255

Note: Designs, colours, treatments to be finalized post Global review

5.3 Sign On Page

Please follow these specifications:

1. W: 292 pixels; H: 87 pixels

2. Font: Helvetica Neue Bold; Size: 17
R: 109; G: 110; B: 113
3. Font: Helvetica Neue; Size: 14
4. W: 16 pixels; H: 10 pixels
5. W: 292 pixels; H: 40 pixels
6. Font: Helvetica Neue Bold; Size: 16
1 2

3 4
5

Note: Designs, colours, treatments to be finalized post Global review

5.4 Home Page

Please follow these specifications

Citibank: W: 97 pixels; H: 22 pixels

Top Bar: W: 320 pixels; H: 40 pixels
Sign out: W: 51 pixels; H: 25 pixels Font size: 12
Font Type: HelveticaNeue Bold
Subsequent
Title Bar: W: 320 pages to be added after
pixels; H: 57 pixels the final review
Overall Balance: Font type: HelveticaNeue Bold
Font size: 16
Push Ad (1 & 2): W: 144 pixels; H: 63 pixels
Push Ads (text in gray) R: 88; G: 89; B: 91
Font size: 13
Push Ads (text in blue) Font size: 11; Font type: Helvetica Neue
Bold; R: 50; G: 153; B: 210
Blue Bar (Net Worth): W: 298 pixels; H: 43 pixels
Account Box Dimensions: W: 298 pixels; H: 257 pixels
Net Worth: Font : Helvetica Normal; Font size: 15
My Accounts: Font: HelveticaNeue Bold; Font size: 14;
R: 109; G: 110; B: 113
S$ 45, 654: Font size 15; R: 75; G: 144; B: 55
S$ 9,000: Font size: 15; R: 237; G: 33; B: 36

Note: Designs, colours, treatments to be finalized post Global review

 Appendix
Revised Designs