top of page

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. 

Sus -  2.png

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.

Screenshot 2023-06-20 at 12.08.02 PM.png

Existing UI Design

Objectives of the Project

The two main goals of this project were as follows:

Screenshot 2023-06-20 at 12.08.02 PM.png

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_2x 1-1.png

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.

Thailand.png
China.png
Thailand-1.png
Thailand-2.png

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:

Screenshot 2023-06-20 at 1.32.58 PM.png

Curious

Screenshot 2023-06-20 at 1.33.03 PM.png

Humble

Screenshot 2023-06-20 at 1.33.07 PM.png

Playful

Screenshot 2023-06-20 at 1.33.17 PM.png

Confident

Screenshot 2023-06-20 at 1.33.26 PM.png

Optimistic

UI Design

The UI design involved designing two dashboard concepts, each with five screens. One of the concepts was finalised and further developed.

  1. Home Page

  2. Table Page Template

  3. Bar Chart Page Template

  4. Horizontal Graph Page Template

  5. Graph Page Template

Sustainability Dashboard - UI Design Concept 1

Option 2 - Dashboard.png

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

Dashboard - Option 1 Template.png

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.

Screenshot 2023-06-20 at 12.08.02 PM.png

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.png

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

Colour Framework.png

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_2x 1-1.png

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.

All Centres + Stores Graph Template.png

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.

UI Style Guide.png

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. 😊 

Screen Shot 2020-08-12 at 1.40.01 PM.png
Screen Shot 2020-09-01 at 11.46.15 AM.png
bottom of page