NABERS Datavis
2020
Consolidated dashboard
& Video for social media
OVERVIEW
The National Australian Built Environment Rating System (NABERS) is a national rating system that measures the environmental performance of Australian buildings, tenancies and homes.
​
NABERS entrusted us to develop a set of datavis for their Annual Report 2020, with outputs including a consolidated dashboard and a video for social media. I was responsible for designing and implementing both pieces of work along with the supplementary work such as research, data review and beyond.
CLIENT
National Australian Built Environment Rating System
RESPONSIBILITIES
-
Data visualisation
-
Dashboard design and implementation
-
Motion graphic design
GOAL
-
Consolidated dashboard for the annual report: To give an overview across all results and give NABERS a place to engage with state-based stakeholders.
-
Video (data-driven motion graphics) for social media: To show the stability and growth of NABERS over the years and market the annual report.
APPROACH
Both pieces of work were carried out simultaneously, yet in the separate workflow using different approaches.
​
I. Consolidated Dashboard
-
Data: Receive data; Do data review
-
Meeting: Discuss what data is available, what metrics are most suited; Workshop the priorities and visualisation types with client team
-
Mock-ups: Wireframe and present; Create high fidelity mock-up for feedback; Get approval to go into implementation
-
Final output: Implement with real data; Draft for review and tweaks; Hand over Tableau files
II. Video (data-driven animation)
-
Data: Receive data; Do data review
-
Meeting: Kick-off; Confirm visual and sound direction with client team
-
Mock-ups: Create storyboard and present for feedback; Iterations; Get approval to implement storyboard
-
Final output: Receive copy guidance; Implement with real data in After Effects; Draft for review and tweaks; Export of files for LinkedIn and Twitter; Hand over After Effects file
BRAND GUIDELINES
Both dashboard and video are required to adhere to the NABERS brand style ranging from colours, fonts to iconography.
​
I. Colours
Primary Colours
Teal
Aqua
Neutral
Light Grey
#007298
#0091b3
#939597
#eeebea
Accent Colours
Energy
Water
Indoor
Carbon Neutral
Waste
#ed960a
#00c2f3
#05fc03e
#5c4ea0
#3e573a
II. Fonts
Gotham Rounded - Medium
ABCDEFGHIJKLMNOPQRSTUVWYXZ abcdefghijklmnopqrstuvwyxz
0123456789(.,:;?!$&@*)
Gotham Rounded - Book
ABCDEFGHIJKLMNOPQRSTUVWYXZ abcdefghijklmnopqrstuvwyxz
0123456789(.,:;?!$&@*)
III. Icon Suite
Building Type
Office
Hotel
Shopping
Centre
Data Centre
Hospital
Apartment
School
Warehouse
Retirement
Living
Aged Care
Rating Type
Energy
Water
Indoor
Environment
Carbon
Neutral
Waste
DATA REVIEW
The data file includes two datasets:
-
Emissions saved & water saved across all sectors over the "Life of program"
-
All NABERS metrics across all sectors over the "Life of program"
NABERS shared two datasets to be reorganised and visualised on the consolidated dashboard along with basic requirements: everything in one go; breakdown by state.
​
I. Raw Data
II. Data Structure
After analysing the raw data, I then distilled the structure of both datasets and mapped the relationships of all metrics, to interpret the data to be more lucid and logical.
[Suppose one specific state has been selected]
III. Hierarchy and Chart Types
Based on the data structure, I further translated it into a skeletal framework to explore an effective hierarchy of the dashboard. Meanwhile, I visualised the real data to try out the appropriate chart types.
Rationales:
-
Tab bar of states on the top level of the hierarchy is working as the first interaction with users, which defines the dashboard to be state-based on the whole, and better engages target stakeholders.
-
The filters (at the top right) applied to all charts on a page are working as the second interaction with users, which could minimise users' manual effort.
-
The sheer volume of data visualised as four dual-axis charts on a page could make it easier for users to explore the consolidated dashboard.
Tools:
-
Layout - Figma
-
Datavis - Infogram
MEETING
At the kick-off meeting with client team, they gave more information on the project context and verified our interpretation of the data along with a few suggestions:
-
The dashboard should tell a story of what NABERS Life of Program has done, and the "continuous, steady, gradual" growth over the last 20 years.
-
State policymakers are the target audience but they might have no clue about substantiality or not even be interested.
-
The dashboard is expected to engage and convince stakeholders so that they can easily understand NABERS substantiality achievements.
-
So it should be less data-heavy but more human (something people can relate to), as an opportunity to start a conversation.
-
One possible way to make the data more tangible could be by scaling as below:
WIREFRAME
Informed by the discussion with client team, we pivoted the design strategy applied to the dashboard, i.e. highlighting the insights of NABERS Life of Program achievements; repositioning certain filters to make the dashboard more understandable to audience; scaling/converting the big numbers to bring data to life.
Scaling methods we adopted include:
-
Using scaling objects such as Sydney Opera House, Olympic size swimming pool, MCG
-
Converting obscure concepts into something people can relate to, e.g. converting the amount of energy used into energy bills
-
Converting the mass of a substance into its volume in the form of geometric objects (e.g. a cube) to be compared to a scaling object
I also realised these design solutions and rebuilt the structure of the dashboard,
ending up with the wireframe as below:
​
Tools:
-
Wireframe - Figma
-
Datavis - Tableau
MOCKUP
Based on the wireframe, I then created a one-page design mock-up which focuses on the aesthetics of the overall layout and each individual chart. As required, the design adheres to NABERS brand guidelines to be consistent with NABERS annual reports in terms of chart types, colours, typography and icons. Thus some chart types (e.g. star rating chart, energy saving chart) are changed in the mock-up to be same as annual reports.
Tools:
-
Mockup - Figma
-
Datavis - Tableau
PROTOTYPE
Our data specialist did data transformation and visualisation on Tableau and ended up with the charts, navigation components for making the dashboard. I was responsible for creating the prototype by polishing and integrating all individual components and formating the dashboard.
​
Tool: Tableau
DATA REVIEW
The animation is dedicated to showing the stable growth of NABERS, which is aimed to deepen the customer basis. Thus we decided to animate the count of each rating and the grand total of all ratings each year, to represent how NABERS is growing over the years.
STORYBOARDS
Tools:
-
Storyboard - Figma
-
Datavis - Infogram
Version I. Pre-alpha
According to the visual direction proposed by the client, the video should stand against
a light background with a neat and clean style. We came up with the idea that includes:
​
-
The scale of a bubble stands for the quantity of a rating type (using real data)
-
The grand total of all ratings as the heading in the top right
-
The legend item pops up in sync with a new rating introduced
-
The flip clock in top left gives the context of that year
-
The timeline at the bottom shows key milestones
-
From 2021, bubbles filled with blended colours (using ghost data) denote the future
Hover to
see more
Version II. Alpha
The client gave us feedback with a few suggestions:
​
-
Change the whole colour scheme of the 2021 scene to denote the future more obviously
-
The new sector bubbles on the 2021 scene are very different looking and much bigger than the existing ones
-
Zoom out the existing bubbles to accommodate the new sector expansion and highlight that it’s a view into the future
-
Add an end frame with the headings as provided
​
Based on client's feedback, I then iterated the ending part of the video and ended
up with the following frames:
Version III. Pre-beta
The client's feedback on the last version are as follows:
​
-
Bubbles are not supposed to overlap
-
Remove or combine certain elements since when it is animated viewers cannot focus on a few things at once
-
The writing “NABERS is expanding to new sectors” to be the hero in between the screen changes
​
Design solution (re: the second bullet point):
Timeline, legend, bubble indicators are combined, so the focal point is around the above area only (except for the last three years/2018-2020 as the timeline began to extend to the bottom area), so that viewers can easily catch the information and keep track of the progress. Also, the vertical timeline can save more space for the text around it can be laid out horizontal.
Hover to
see more
Version IV. Beta
At the video catch-up meeting, we discussed the last iteration and ended up with the
following changes:
​
-
Add an intro screen with colourful treatment and smoother transition to bubbles
-
Move timeline to top with the labels around bigger and continue the 2021 line
-
Move the word "Ratings" elsewhere (in a smaller size and not bold)
-
Move the legend of types (energy, water, etc) to bottom
-
Make new sector bubbles more integrated with existing bubbles on 2021 scene
Hover to
see more
Version V. Gamma
The client then provided further feedback that suggested big changes:
​
-
Add a celebration-themed frame at the end of 2020 to highlight the success of this year
-
Remove the section about expansion (new sector bubbles) and combine the end frame
Design solution (re: the first bullet point):
-
Use a radial bar chart that looks like a firework to celebrate the moment of 4081 ratings in 2020
-
Set a light background circle that represents the total for that year, which is also the centre of the "firework", to transition between the frames
Hover to
see more
VIDEO MAKING
At the stage of video making, my focus was then switched from ideation/visual design to developing the data-driven animation, which requires prepping data, writing Java-Script commands, graphing and animating the dataset and more.
​
Tool: After Effects
I. Prepping Data
To make the data readable for After Effects, I transformed the data format (converting the CSV file to JSON file).
II. Expressions
The dataset is dedicated to driving the bubbles scaling in After Effects, I then wrote commands using the expression language (a scripting language based on JavaScript) to run the data.
III. Keyframes
In addition to the expressions used to animate the bubbles and radial bar chart, I also used keyframes to set parameters of other elements such as text animation, transition, audio and a lot more.
