iPhone Style Guide

1

Citibank Mobile Style Guide - iPhone

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

15/02/2011

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 Background

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

Tab Bar

Interaction Box

1.2 Navigational Scheme

1

2

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”

• 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. 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 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

1.3 Application Types

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

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.

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.


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


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.0 Colours

2.1 Colour Palette

1

2

3

Blue Wave Colour Key

(Snapshot of gradient tool box below)

Gradient 1: 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.

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.0 Typography

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.

H E L V E T I C A N E U E

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

3.2 Navigation & Title Bar

Please follow these specifications:

1. Home (Text): Font: Helvetica Neue Bold

Font size: 12

Hue # : ffffff

2. Sign Out (text): Font: Helvetica Neue Bold

Font size: 12

Hue # : ffffff

3. Overall Balance: Font type: Helvetica Neue Bold

Font size: 16

Hue # : e6e7e8

Text Layer Effect

1 22

1

2

3

3.3 Interaction Box & Tab Bar


1. Font: Helvetica Normal

Font size: 15

Hue #: ffffff; R:255; G:255; B: 255

Text layer Effect

2. Font: Helvetica Neue Bold

Font size: 14

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


Font size: 14

Hue #: 4b9037; R: 75; G: 144; B: 55


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

1

22

3

4

5

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.0 Icons & Buttons

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

4.2 Button Style


1

2 3

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

Icon Layer style

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

Font type: Helvetica Neue Bold; Font size: 14

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.0 Page Structure

5.1 Loading Page



1.W: 252 pixels; H: 58 pixels

2.W: 37 pixels; H: 37 pixels

2

1

5.2 Landing Page



1. W: 150 pixels; H: 38 pixels


Hue#: fffff; R: 255; G:255; B:255


4. Font: Helvetica Neue Bold; Font Size: 12

Hue : ffffff: R: 255; G:255; B: 2551

2

3

4

5.3 Sign On Page




2. Font: Helvetica Neue Bold; Size: 17

R: 109; G: 110; B: 113

3. Font: Helvetica Neue; Size: 14



6. Font: Helvetica Neue Bold; Size: 16

1 2

3 4

5

6

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

Title Bar: W: 320 pixels; H: 57 pixels

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

Subsequent pages to be added after the final review

AppendixRevised Designs

iPhone Style Guide

Documents

Transcript of iPhone Style Guide