Barclays User Interface

24th July 2013

UX Design: Bill Fogarty, John Connolly, Stephen LabanyiPheonix Product: John Breen, Thomas Kuriakose

Presentation

Barclays.net interface

Redesign

WorkList Alerts and Navigation

Barclays Corporate Banking

The Carousel

The 'Carousel' is a navigation device that allows the user to see the actions they have pending for a particular section of the application. It is useful when you have limited screen real estate for many navigation items pending actions.

- The carousel will feature a heading comprised of the section name follow by 'Pending Action‘.

- If scrolling is required, items in the carousel are organized in a loop.

- The user can scroll through the items in the carousel using the left and right arrows.

- Every carousel item features a number ascending from 0. Item text is wrapped to utilize real estate.

- The 'As of' date sits on the top right of the carousel.

- The refresh icon gives the user the ability to refresh the data in the carousel and check if there are any new items pending action.

Carousel Sample 1 - Scrolling Required

Carousel Sample 2 – Scrolling Not Required

UI Elements Library

Barclays Corporate BankingThe UI element library was created as a powerful resource to be used across the entire team.

It allows us to efficiently create a consistent user experiences for the application & cut out rework.

It functions as a common UI language for the whole team, reducing communication issues and keeping everyone on the same page.

Effective Action Buttons

A comprehensive suite of action buttons were designed to distinguish between:

1. Primary, secondary and tertiary actions2. Grid-level and page-level actions3. Action items and read only data

This is achieved through use of colour contrast, large font size and prominent positioning.

Form Level Action Buttons

Page Level Action Buttons

UI Elements Library

Barclays Corporate BankingIt allows us to see how all our elements work together as a suite.

It will continue to evolve throughout the design phase of this project as we will have to add new controls as required.

Advanced Date Picker Option 2

UI Elements Library

Barclays Corporate BankingData tables were redesigned as follows:

1. The width of the columns are customisable and can be saved by clicking on the settings icon.

2. Table ‘actions’ (delete) are presented as icons. This maximises the table width that can be used for other columns.

3. Header wrapping enables the user to maximise the table width without compromising legibility.

4. Within the editable grid, one row is editable at a time to improve performance. When a user clicks or tabs onto a cell, that row. Blue is used for the alternative row color and the cell border colour to give the grid an interactive affordance. Greys are used to differentiate the read only table.

Editable Table

Read Only Table

Grid System

Barclays Corporate BankingUsing a grid is the best way to get consistency across different applications within an organisation. A grid is a foundation for page layouts – it guides the placement of elements on a page. It’s flexible enough to allow for different page types, but structured enough to ensure clean and usable layout

A grid system divides a page into a series of columns separated by gutters and bounded by margins. Page elements fit onto this grid, forming a series of modules that may span one or more of the columns. Content modules may be any length, as the page grid principally determines the width of page elements.The best grids are divisible (a 12-column grid is divisible by 2, 3 and 4) – they will accommodate differently sized modules

960 Grid Structure

Portal Menu

Barclays Corporate Banking

UK Faster Payment:Payment Initiation

Barclays Corporate Banking

UK Faster Payment:Entry Mode

Barclays Corporate Banking

UK Faster Payment:View Details

Barclays Corporate Banking

UK Three Day Payment:Edit Mode

Barclays Corporate Banking

UK Three Day Payment:View Details

Barclays Corporate Banking