Sustainability Dashboard: UI Design and Colour Library Design
World's Largest Retail Furniture Company
This project involved the redesign of a dashboard for a reputed company’s sustainability management across Southeast Asian Countries.
Overview
The project aimed at re-designing the existing dashboard and assigning a colour palette that distinguishes the brand green and the data representation elements for more clarity.
Problem Statement
There were two primary factors that needed attention.
-
Colour System: In the existing dashboard screen, a colour scheme other than green was needed to help the users discern the different levels and categories within the data on the dashboard.
-
Dated and clunky UI design.
Existing UI Design
Objectives of the Project
The two main goals of this project were as follows:
1. Colour Palette Design: A colour palette other than green had to be assigned to categories like countries, centres, and stores, where each of these had an individual colour.
2. Dashboard Design: Alignment with the existing brand style was necessary for balancing the display of the necessary data.
Target Audience
The dashboard would be used by teams at a reputable retail company with employees aged 20 to 50. These teams were located in different parts of Southeast Asia.
Design Process
This project was scoped for a week. I designed the UI for the dashboard and a colour system to differentiate the brand colours from the colours used to represent the data.
Day 1 - Research
-
Brand Orientation
-
UI Design - Dashboard Concept 1
Day 3 - Design
-
UI Design - Dashboard Concept 2
-
Colour System Design
Day 5 - Handover
-
UI Design Handover
-
UI Presentation
-
Colour System Handover
Day 2 - Ideate
-
UI Design - Dashboard Concept 2
-
Colour Theory Research
Day 4 - Iterate
-
UI Design Dashboard Iterations
-
UI Design Style Guide
Brand Orientation
This project was scoped for a week. I had only a day to research the brand. The brand research involved getting familiar with the brand style guides, colour palettes, iconography, and tone of voice.
The imagery below describes the brand’s tone of voice:
Curious
Humble
Playful
Confident
Optimistic
UI Design
The UI design involved designing two dashboard concepts, each with five screens. One of the concepts was finalised and further developed.
​
-
Home Page
-
Table Page Template
-
Bar Chart Page Template
-
Horizontal Graph Page Template
-
Graph Page Template
​
Sustainability Dashboard - UI Design Concept 1
Concept 1 - Dashboard Homepage
The first concept had tints and tones of Green and was bolder and a little closer to the existing concept.
Bold strokes of green were used for the UI elements.
UI Design Concept 1 - Dashboard Screens
Sustainability Dashboard - UI Design Concept 2
Concept 2 - Dashboard Homepage
The second concept was clean with ample white spaces and minimal use of the brand colour green.
Final UI Designs - 5 Screens
The Concept 2 with more cleaner and spaced out look and feel was finalised and further developed.
Concept 2 Screens
Colour System Issues
A colour system had to be designed for the entire dashboard UI and data representation. In terms of the overall UI, it had to be clean, minimal, and not confusing.
The two pressing issues were:
1. Overuse of the Green Colour
The existing UI of the dashboard overused the brand colour (green) in the data visualisation sections.
2. Individual colour requirements for each country, centre, and store
There was a colour requirement for the primary categories like country, centres, and stores of the brand. The trickiest part was that every individual country, centre, and store needed a colour.
Countries
Centres
Stores
Colour System Inspiration
Red was an obvious choice because I wanted a colour scheme that would contrast with green. But due to accessibility constraints, such as colour blindness, I decided to use the colours that are adjacent to green and red on the colour wheel.
1. Triadic Colour Scheme
A scheme closer to a Triadic colour scheme was used for data visualisation. The tones of orange, magenta, and blue almost equally distant from each other on the colour wheel were used.
Colour Wheel - Triadic Colours marked in Black
2. Colour Framework
1. The colours are placed in an order where the darker hues are at the bottom and the lighter ones at the top, as this helps create colour harmony.
​
2. The weight of a darker hue anchors at the bottom of the graph, creating an eye movement from bottom to top.
​
3. The use of the hues from same family of colour for a particular category, in this case brown, orange, and yellow for countries, maintains a visual synergy in the data visualisation.
Lighter Hue at the top
Darker Hue at the bottom
Colour System Solution
Separating the Brand colours and the data visualisation colours was essential in order to avoid any overuse of green. And a colour scheme was assigned to the categories in the data visualisation.
1. Use of Green and Black in the UI components
The overall UI is clean and minimal, with a white background and subtle use of strokes and drop shadows for the UI elements for differentiation and accessibility in the brand colour and shades of grey.
2. Application of the triadic scheme to the Data visualisation
There is no use of green for data visualisation. A Triadic colour scheme is applied to the data visualisation, contrasting with the green colour in the user interface.
Style Guide And Handover in Figma
I provided a style guide page in the Figma file of the screens with all the specifications for the UI elements, instructions for inspecting components in Figma, and links to the Figma file and the assets.
Outcome!👌
The designs and colour system were received very well by the retail company.
These templates were used to further develop all the other pages in the system.
If you liked reading the case-study, check out a couple more below. 😊
