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 campaign analytics. Presented in a command centre where time-sensitive campaign monitoring decisions can be made quickly, easy scan-ability was the focus.

Working with a data scientist, UX designer and a front-end engineer, I was tasked with designing the interfaces and component assets.

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 campaign analytics. Presented in a command centre where time-sensitive campaign monitoring decisions can be made quickly, easy scan-ability was the focus.

Working with a data scientist, UX designer and a front-end engineer, I was tasked with designing the interfaces and component assets.

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 campaign analytics. Presented in a command centre where time-sensitive campaign monitoring decisions can be made quickly, easy scan-ability was the focus.

Working with a data scientist, UX designer and a front-end engineer, I was tasked with designing the interfaces and component assets.

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.

Defining typography and levels of content

Calibri was the choice of font requested by the client.

Defining typography and levels of content

Calibri was the choice of font requested by the client.

Testing legibility

In order to maximise legibility 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 room's depth of 3m, the typeface's x-height will have to be a minimum of 6mm to be legible.

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

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.

Using a modular scale to control font sizes in both design and implementation would provide more flexibility for testing.

A

A

A

A

A

A

130%

A

A

A

A

A

A

130%

Defining extra colours

Building on the brand’s primary colours, additional colours were generated using effective colour harmonies, with contrast as a guiding principle to create a luminance hierarchy.

Defining extra colours

Building on the brand’s primary colours, additional colours were generated using effective colour harmonies, with contrast as a guiding principle to create a luminance hierarchy.

Defining extra colours

Building on the brand’s primary colours, additional colours were generated using effective colour harmonies, with contrast as a guiding principle to create a luminance hierarchy.

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 designed with responsiveness in mind, enabling them to fit in highly-configurable spaces.

3

Modular components

Data display elements were designed with responsiveness in mind, enabling them to fit in highly-configurable spaces.

3

Modular components

Data display elements were designed with responsiveness in mind, enabling them to fit in highly-configurable spaces.

Flexible switching

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

Flexible switching

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

Flexible switching

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

4

Screen designs

Screens were designed on a canvas size of 1920x1080 (16:9). Users can choose to cast in a single screen, 2x2 grid or even a 1x2 grid for longer pages.

4

Screen designs

Screens were designed on a canvas size of 1920x1080 (16:9). Users can choose to cast in a single screen, 2x2 grid or even a 1x2 grid for longer pages.

4

Screen designs

Screens were designed on a canvas size of 1920x1080 (16:9). Users can choose to cast in a single screen, 2x2 grid or even a 1x2 grid for longer pages.

Channels and campaigns

Examples relating to channel and campaign analytics.

Channels and campaigns

Examples relating to channel and campaign analytics.

Channels and campaigns

Examples relating to channel and campaign analytics.