Themes - KPI display design

[LiamOSullivan]

Some charts benefit from the use of a large KPI numerical display as per the screen of the old dashboard. Would be good to have a general design for this.

For example, the bikes chart will use a number for the average capacity available over the selcted time period, so the display will be

Number - variable name/clarifying description of a few words

[CC-Claire]

• KPI Takes the colour of it's corresponding variable in the chart
• Font weight increased to 500 for KPIs

In paragraph KPI:

List form:

[LiamOSullivan]

Can I be a dissenting voice here and suggest something like this (quickly bodged together as a sketch)...

I like breaking up the text a bit, but understand real estate might be more scarce at lower res

[CC-Claire]

By all means dissent! I wasn't sure exactly how much or little accompanying text description was needed in those KPIs, but more minimal like yours above the better. How's this look to you? I'm taking the highlight colours from the corresponding variable (I'm thinking icon wise i'll re-use the bus icon for bus eireann and dublin bus but just change colours, similarly with luas and dart. As the change in icons needed for each will be so minimal it seems a bit inconsequential to have 4 different icons for each mode).

• I've left aligned the KPI descriptor text to the text box above and that whole KPI is now on read left to write with the idea of next stop being the graph on the right.
• Icon is 48px
• Variable text is 24px + weight increased
• Variable in descriptor text - weight increased

[CC-Claire]

Icons

Dublin Bus + Bus Eireann:

• https://github.com/BuildingCityDashboards/bcd-dd-v2.1/blob/staging/docs/BCD-Design/Icons/Icons_24px/Icon_bus.svg

Dart + Luas:

• https://github.com/BuildingCityDashboards/bcd-dd-v2.1/blob/staging/docs/BCD-Design/Icons/Icons_24px/Icon_rail.svg

Dublin Bikes:

• https://github.com/BuildingCityDashboards/bcd-dd-v2.1/blob/staging/docs/BCD-Design/Icons/Icons_24px/Icon_bike.svg