Design System
Year
2020 - present
Client
Plus Xnergy Edge Technologies
​
​
My Role
Design Innovation, Manager
Team
with Lead Designers
Scope of work
Design Leadership, Design Management, UI Design
Business Website
https://edge.plus-solar.com.my/
Background
As the SOURCE ecosystem's products grew to be more complex, as well as the team of designers and software engineers grew bigger. There was a need to standardise design elements used in the products to avoid confusions, that could delay development. It is an initiative from design innovation team who identified the needs and proposed to the product owner and management.
​
My responsibilities
With the lead designers in the team at different times throughout a year and more, we researched, discussed and studied from multiple sources. We developed the design system by bench-marking ourselves to Uber and Airbnb. As the products continue to grow, we found that the design system, will be a work in progress to continue to mature to meet all the needs we intend to deliver with the product outcome. I guided and made decisions on considering the design system that will serve different platforms and screens sizes from HD TV, laptop, tablet and mobile.
Research
Research Goal
-
Discover users pain points and needs
-
To discover what are the best practices of current dashboards
1. Stakeholder interviews
To deepen the understanding of the brief. Stakeholders interview happened during a meeting where the client - business owners, the internal engineers, and business development who involve in facing clients presented. They represent the key users for the dashboard.
​
2. Define Users & Personas
In order to define key features for a new project without being a domain export. Because the users who use the dashboard are not only the solar system owners, but also the internal engineers - the original intention of the dashboards existed. Therefore, two personas were present as below:
Persona A:
Ms. Marion
Building Manager
​
36, Female
Key Tasks
-
Ensure the building energy performs normal
-
Ensure solar performance with no downtime
-
Attend to any building energy anomaly
​
Pain Points
-
Desire convenience to gain monthly energy consumption report to present to the management
-
Often needs manual checking on building systems
-
Alert are usually depends on-site manpower, who are usually labour workers. Delayed alert impose risks and danger to the workers and the building.
​
Persona B:
John
Senior Project Engineer
​
29, Male
Key Tasks
-
Conduct routine checkup on sites from time to time
-
Ensure healthy level of solar system performance
-
Alert factory owner / manager for operation & maintenance
-
Attend to system downtime issue, rectify cause and problems
​
Pain Points
-
One-way checking on the solar systems
-
To extract report from the monitoring system to share with the factory manager is somewhat counter-productive
3. Findings & Analysis
-
Existing dashboard are mainly for engineers to understand
-
Observed patterns of simplified data by using some semiotic representations
-
Data visualisation are less appealing for layman, e.g. building supervisors, who are not necessarily engineers
4. Key features & data
-
Overview to all buildings, mainly for internal engineers
-
Major list of building energy consumption data: solar power, utility, exported & imported energy, performance ratio, irradiance, etc.
-
Timestamp for crucial energy data point, e.g. max / min building consumption
-
Flexible viewing mode / calendar design - by year, month, week, day
-
Export energy report
Design Development
The Challenge
Low-fidelity wireframe process was eliminated, because various graphs and charts are involved with data visualisation dashboard design. With the actual visualisation of the data, it carried out deeper considerations for the designer and the stakeholders, which led the design iterations to carry on.
Screens Design
Into the final stage of design, the choice of colours, typography are ready for final decision at this stage.
Left: A map view as an overview of all buildings under the SOURCE system
Middle: Main dashboard of a single building energy data visualisation
Right: A display screen that serve as a general daily "lookout point", as well as for branding purpose.
Accessibility option for older generation
For users who find the original - dark theme colour scheme challenging to view, this bright theme version.
Users of older generation (50 years old above) preferred a bright theme mode. As the colour of white text on dark theme are not legible.
The colours of the dashboard, were reconsidered for such group of users, where contrast of colours and text increased.
Result
Design System has improved:
- Daily design collaborations
- Helped