Dataviz library

Discover how a long journey collaboration between QDS core team and the Guild led to designing datavisualization library for web-responsive and Power Bi.

Quantum project

Scope

Datavisualization or Dataviz encompasses data and information which are displayed throught smart and abstract representations in order to reinforce user’s instant understanding, big picture, data correlation and awarness.

This field is crossroads between Design, Infographics and Data Sciences and plays an important role when it comes to make data meaningful, extract values from amount of data and while also speed-up dashboarding analysis.

Other the past few years, Dataviz became more and more ubiquitous in the Thales digital journeys for tracking among other things KPIs (ex: manufacturing efficiency, on-time delivery, forecasting, system health and monitoring...). The Thales entities have started to use some consumer market dataviz libraries or use Mircrosoft Power BI tool to help them valorizating data. However they faced some challenges:

The Power BI widgets or market-consumer components were not fully aligned with Thales expectations, the Designers and Engineers had to think and adapt the market’s solutions to fit their needs wasting time and energy in the process and while also introducing major performances issues.

Sentiment of no consistency concerning the Dataviz patterns across the Thales organization.
Unconsistency about colors application (lack of semantics and fonctional colors).
No sharing of the new Dataviz patterns and reinventing the wheel all other again.
No Thales brand alignment.

The QDS core team and the Guild decided to support Thales digital product teams by extending the design system to Datavisualization patterns.

The case study proceeded with the following objectives:

Extend QDS by designing the dataviz design assets aligned with the Thales business needs and provide the related guidelines for web-responsive applications (axis, container, legend, key metric, indicator, custom cards, stastistics card, power-bi platform header and page header, bar chart, line chart, pie chart, scatter chart)
Design Degraded web component according to Power-BI constraints and avoiding performances issues.
Embed some Quantum components in Power BI (ex: buttons, header, form fields) and evaluate the performance impacts.
Re-looking existing Power BI styles with Quantum foundations by providing a Theming json file.

Ways of working

1h weekly collaborative session in Figma
Bi-monthly review/follow-up with the Quantum core team and stakeholders every 2 weeks

Outcomes

Firstly, this project allowed to make state of the art regarding Dataviz patterns and better identify what kind of assets we should target for the company. This collaboration cross-entities was really key to map the Thales Dataviz use cases and business applications and more espcially to scope a suitable Dataviz library for Thales.

Although the project is still on-going the Dataviz team already delivered a Dataviz Alpha release (axis, container, legend, key metric, indicator, custom cards, stastistics card, power-bi platform and page header, bar chart and line chart) designed and available on Thales Figma and provided guidelines to support the Design of dashboards and reinforce the meaningfulness of data and information for digital products.

The dataviz library has been build upon the QDS foundations and components which ensures consistency and re-alignment to the Thales branding.

The library is currently in early-use stage with up to 16 Design teams in the loop, this step is key to capture their feedbacks and anticipating the public release more serenely.

Futhermore, the Dataviz team with the contribution of Data centre of DCC AVS and Thales Alenia Space IS/IT provided a first re-styling of the existing Power BI styles with Quantum foundations (Theming json file) which reinforce the digital experience continuity between digital apps and PowerBI dashboards.

The dataviz team is also in touch with the Thales Dataviz community to share and distribute the differents deliveries and put in place a common bucket to brake the silos between entities.

Deliveries

QDS Dataviz Alpha release - Published into the QDS and fully documented on-line
Power BI x QDS Theming - To be published GitLab with read me instrcutions and wiki documentation

The following visuals show the scope of Quantum Design System Dataviz lib for web-responsive applications and PowerBI Theming correspondance: