Optimization Swisscom Design System Chart Components

Swisscom AG uses the Swisscom Digital Experience (SDX) design system, which provides reusable components and guidelines for web development.
Within SDX, chart components (pie chart, horizontal bar chart, vertical bar chart) are migrated to modern web components to create a unified design and user experience.
While the pie chart is optimized, the other charts rely on rudimentary implementations of basic technologies, resulting in inconsistent design and a complex usage.
This thesis aims to reimplement the legacy chart components as web components using the Stencil library and Scalable Vector Graphics (SVG).

A comprehensive analysis clarified the functionality and identified areas for improvement, focusing on horizontal and vertical bar charts.
The aim was to achieve a consistent design and improved usability. Key technologies used included Stencil for web components, SVG for scalable graphics and anime.js for animations.
A prototype was developed for testing and familiarization.
The implementation followed an agile approach.
Usability and user experience testing validated the usability for developers and an enhanced experience for users.

To ensure timely delivery, only the horizontal bar chart component was implemented.
It handles input attributes, displays error messages for input data related issues and improves the user experience across desktop and mobile devices.
Using SVG, it displays colored, stacked bars and labels while adhering to SDX design constraints.
Rigorous testing verified correct behavior through manual and code testing.
The component is delivered as a web component, enhancing its usability within HTML.
Usability testing provided positive feedback, with improved readability and comprehension compared to the legacy chart component.