Barclays User Interface 24 th July 2013 UX Design: Bill Fogarty, John Connolly, Stephen Labanyi Pheonix 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 Banking The 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 actions 2.Grid-level and page-level actions 3.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 Banking It 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 Banking Data 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 Banking Using 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