léan fourie
Connect UI
IoT.nxt makes connect devices easy. The redesigned design system, Connect UI, powers the frontend for these solutions.
client
IoT.nxt
role
UX / UI consulting & Dev
year
2023
Overview
Connect UI is a design system that will be used in multiple products within IoT.nxt. The design system need to be accessible, scalable and adaptable to work within different environments.
The challenge
The company went through a change from a product company to a service company. With this change the design system needed to be refreshed all the while keeping in mind that it should cater for the brand of multiple companies rather than just one. We needed to create a new design system that can easily be used by all the teams, dev and design and should be easily theme according to the product it will be used in.
The process
We investigated building a consistent multi-brand design system usable by any team. We assessed charting libraries' limitations for component theming to establish what we can and cannot do. With time constraints, we used Untitled UI as the design system base, recreating the components to fit our needs, and StencilJS for component development. We documented the components extensively for effortless use.
The concept
The design system concept is form follows function. We followed a minimalism design style which made adapting them to multiple brands easy. These components form the basis of the products and they had to be more focused on function rather than delight.
Key learnings
Collaboration and communication between design and development is important for a successful design system. Understanding development limitations and allowing for creative design freedom where possible can result in products that are not only functional but eastetically pleasing. Both design and dev have valuable insights on how to make a component work and display best for the end user.