Social analytics command centre

Social analytics command centre

Social analytics command centre

Social analytics command centre

Flexible and customisable UI components for displaying campaign analytics.

This was a project for a bank that required visualisation of their marketing campaign analytics. Presented in a command centre where time-sensitive monitoring decisions can be made, easy scan-ability was the focus.

The team consisted of a data scientist, information architect, front-end engineer and a UI designer. I was the UI designer tasked with designing interfaces and component assets for this campaign analytics system.

This is a showcase of the UI design approach.

Year :

2016

|

Industry :

Financial services

|

Client :

Bank Central Asia

Roles :

Art direction • Foundation design • System design • UI

Social analytics command centre

Flexible and customisable UI components for displaying campaign analytics.

This was a project for a bank that required visualisation of their marketing campaign analytics. Presented in a command centre where time-sensitive monitoring decisions can be made, easy scan-ability was the focus.

The team consisted of a data scientist, information architect, front-end engineer and a UI designer. I was the UI designer tasked with designing interfaces and component assets for this campaign analytics system.

This is a showcase of the UI design approach.

Year :

2016

|

Industry :

Financial services

|

Client :

Bank Central Asia

Roles :

Art direction • Foundation design • System design • UI

Social analytics command centre

Flexible and customisable UI components for displaying campaign analytics.

This was a project for a bank that required visualisation of their marketing campaign analytics. Presented in a command centre where time-sensitive monitoring decisions can be made, easy scan-ability was the focus.

The team consisted of a data scientist, information architect, front-end engineer and a UI designer. I was the UI designer tasked with designing interfaces and component assets for this campaign analytics system.

This is a showcase of the UI design approach.

Year :

2016

|

Industry :

Financial services

|

Client :

Bank Central Asia

Roles :

Art direction • Foundation design • System design • UI

1

Preview

1

Preview

1

Preview

2

Typography & colour

Here were some methods used to aid in defining the typography and colours for the UI system.

2

Typography & colour

Here were some methods used to aid in defining the typography and colours for the UI system.

2

Typography & colour

Here were some methods used to aid in defining the typography and colours for the UI system.

Defining typography and levels of content

Calibri was the choice of font requested by the client. Based on this, i proceeded with defining the typography system for the product.

Defining typography and levels of content

Calibri was the choice of font requested by the client. Based on this, i proceeded with defining the typography system for the product.

Defining typography and levels of content

Calibri was the choice of font requested by the client. Based on this, i proceeded with defining the typography system for the product.

Modular scale

There were many factors that would impact the final appearance on screen – the source laptop and television's display settings, application's scale behaviour, or reading distance of the person in the room.

A modular scale system was used to provide flexibility in testing font sizes for legibility.

A

A

A

A

A

A

130%

A

A

A

A

A

A

130%

Testing legibility

To maximise legibility for the person at the furthest distance in the room, an out-of-home print-based formula was used to calculate the minimum x-height required of the typeface.

Based on the formula, a room's depth of 3m will require a typeface's x-height to be a minimum of 6mm.

x-height

= viewing distance(mm) / 500

= 3000mm / 500

= 6mm

Testing was done on similar TVs with the same aspect ratio, determining the minimum font size required.

Copy

Copy

Copy

Maximum viewing distance: 3m

x-height

Defining extra colours

Building on the brand’s primary colours, additional colours were needed to fulfil functionality. These were colours were generated using colour harmonies with contrast.

Defining extra colours

Building on the brand’s primary colours, additional colours were needed to fulfil functionality. These were colours were generated using colour harmonies with contrast.

Defining extra colours

Building on the brand’s primary colours, additional colours were needed to fulfil functionality. These were colours were generated using colour harmonies with contrast.

Extracting more colours from the brand colours

Harmonies that create contrast are typically complementary, triadic, or tetradic on the colour wheel. In this scenario, a triadic harmony was applied on the brand’s primary colour, combined with an analogous harmony to extract additional supporting colours.

Primary (Brand)

BCA-Blue

Brand Pink

Indigo

BCA-Blue

Brand Pink

Indigo

BCA-Blue

Brand Pink

Indigo

Functional

Neutral

Success

Caution

Error

Focus

Neutral

Success

Caution

Error

Focus

Neutral

Success

Caution

Error

Focus

Sequencing for diagrams (e.g bar and pie charts)

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

3

Modular components

Data display elements were then designed with responsiveness in mind so they can fit in highly-configurable spaces.

3

Modular components

Data display elements were then designed with responsiveness in mind so they can fit in highly-configurable spaces.

3

Modular components

Data display elements were then designed with responsiveness in mind so they can fit in highly-configurable spaces.

Examples of status indicators, information panels, chart styles and overlays.

Examples of status indicators, information panels, chart styles and overlays.

Examples of status indicators, information panels, chart styles and overlays.

4

Screen designs

Screens were designed on a 16:9 canvas. Users could choose to cast across 8 screens, single, 2x2 grid or a 1x2 grid for longer pages. Here are examples relating to channel and campaign analytics.

4

Screen designs

Screens were designed on a 16:9 canvas. Users could choose to cast across 8 screens, single, 2x2 grid or a 1x2 grid for longer pages. Here are examples relating to channel and campaign analytics.

4

Screen designs

Screens were designed on a 16:9 canvas. Users could choose to cast across 8 screens, single, 2x2 grid or a 1x2 grid for longer pages. Here are examples relating to channel and campaign analytics.