Problem statement

IoT.nxt moved from being a product company to being a service company. With this change came the concept of multi-brand platforms and different technologies. They needed a solution that could support their existing products, built in Angular and branded as IoT.nxt solutions, but also their new, once off service solutions for clients build in React.

Proposed solution

The idea was to create a single, reusable multi-brand design system that was cross-platform. This design system will allow existing and new products to use a single source of truth, branded the way the product needed it to be.

My Role

I was responsible for building the design system and acted as a design consultant, helping align design and development align on technical feasibility. I also created the identity for the design system which I had to align to the other existing product identities.

Process & Execution

The project started with research, looking into different technologies we could use to build not only base components, but data components such as graphs and charts as well. We also did research on how to build multi-brand design systems in Figma. We concluded that StencilJS and Apache ECharts were most flexible to support out use case. The components were designed in Figma, and built inside an NX monorepo, using StencilJS & Apache ECharts for components, and a custom SCSS theming library o support multi-brand themes. The components were documented using Storybook and deployed using Chromatic.

Key features

• Reusable, framework agnostic component library.

• Standalone theming library which could be used outside of the design system project.

• Full code and design documentation inside Figma and Storybook.

Outcome

The result was a scalable, framework-agnostic design system that reduced duplication, improved consistency, and enabled faster product development across multiple IoT.nxt client brands.