io.tt: Building a comprehensive Design System to support product scalability
Designed and developed a Design System from the ground up to support the latest product version, ensuring a cohesive user experience while establishing a strong foundation for long-term scalability and growth.
Product
io.tt is a platform helps brands create connected experiences through QR codes, NFC, and AR technology. By integrating these tools into products, packaging, and digital media, io.tt enables brands to boost consumer engagement, enhance loyalty programs, and collect valuable first-party data.
Challenge
The primary challenge was to build a comprehensive initial asset for the design system from scratch within tight deadlines. This system needed to establish a solid foundation for product development, ensuring a consistent design process that supports scalability and facilitates the seamless integration of new features.
My Role
I led the full design process from concept to implementation, taking complete ownership of both the product's UX and UI. This included creating a design system, researching, defining visual foundations, designing core components, and collaborating closely with developers to ensure seamless integration. The system was built to support the MVP launch and scale with the evolving product ecosystem.
Outcome
The updated design system gave the product a modern, trend-aligned look and feel while improving the overall user experience through a more consistent and scalable UI. Reusable components and a streamlined workflow enabled faster feature rollout and a shorter design-to-development cycle.
Research & Discovery
Our objective was to redesign a B2B SaaS platform from the ground up and deliver a functional MVP within six months. This included rebuilding the product experience and creating a design system that would support fast development and long-term scalability.
To kick off the process, I interviewed key stakeholders — including the Design Lead, UX Lead, project managers, and developers — to align on business goals, user pain points, and technical constraints. I also audited the existing product to identify usability issues and gaps in consistency.
In parallel, I analysed competitor design systems and reviewed industry best practices to identify relevant trends and practical design approaches. This helped guide decisions around what to include in the initial version of our system while ensuring it stayed modern and user-focused.
Based on these insights, I proposed building the product and the design system from scratch. I focused on creating a lean set of foundational elements to meet the MVP's needs while laying the groundwork for future scalability.
Design & System Architecture
I built the system starting from minimal components that served as the foundation for more complex ones, ensuring a scalable and maintainable structure. Throughout the process, I focused on modularity to support flexibility, accessibility to enhance user experience, and reusability to streamline design and development workflows.
I started by defining the fundamental elements:
- Font Family – tailored for a B2B product to ensure readability and cross-platform consistency.
- Color Palette – with Primary (Brand), Secondary and Functional colours.
- Grid System – Enhances usability and speeds up design and development processes.
- Spacings – Avoid losing consistency in product building.
- Icons Library – Free Tabler React icons to reduce development time.
Based on the fundamental elements, I began working on the core UI components that were certain to be used across the platform. These included buttons, forms, tables, dropdowns, toggles, the footer, header, and sidebar menu — a set I knew would appear throughout the product.
The next step was to use these base components in wireframes, transitioning them from low-fidelity to high-fidelity by applying the UI elements from the design system I was building. This helped me validate that the components worked well on pages, interacted smoothly with each other, maintained visual consistency, and functioned correctly across different scenarios.
I started by working with developers to integrate the design system into the codebase using Storybook. This allowed us to create living documentation where components could be tested in different scenarios and validated for correct functionality early on. It also helped ensure alignment between design and development from the beginning.
Alongside this, I began creating minimal documentation for the design system elements. While documentation is often time-consuming and easy to postpone, even a lightweight but well-structured approach helps new team members quickly understand the system, its structure, and how to work with it effectively.
Outcome
During the development of the new product version with a six-month deadline, the design system I worked on evolved like a living organism. The efficient approach I established early on — working with variables and building a strong foundation — helped me minimise time and quality losses when implementing changes. After the MVP launch, the system expanded significantly in depth and scope. I introduced updates based on feedback from users, the team, and stakeholders, as well as structural changes in key user flows and product features. As the product matured into an ecosystem of multiple tools, unifying and optimising the design system became a top priority to ensure it could support a broad range of component needs and visual language use cases across the platform.
This work led to several key outcomes:
Consistent
and scalable UI
Faster
feature rollout
Streamlined
design-to-dev
workflow
io.tt: Building a comprehensive Design System to support product scalability
Designed and developed a Design System from the ground up to support the latest product version, ensuring a cohesive user experience while establishing a strong foundation for long-term scalability and growth.
Product
io.tt is a platform helps brands create connected experiences through QR codes, NFC, and AR technology. By integrating these tools into products, packaging, and digital media, io.tt enables brands to boost consumer engagement, enhance loyalty programs, and collect valuable first-party data.
Challenge
The primary challenge was to build a comprehensive initial asset for the design system from scratch within tight deadlines. This system needed to establish a solid foundation for product development, ensuring a consistent design process that supports scalability and facilitates the seamless integration of new features.
My Role
I led the full design process from concept to implementation, taking complete ownership of both the product's UX and UI. This included creating a design system, researching, defining visual foundations, designing core components, and collaborating closely with developers to ensure seamless integration. The system was built to support the MVP launch and scale with the evolving product ecosystem.
Outcome
The updated design system gave the product a modern, trend-aligned look and feel while improving the overall user experience through a more consistent and scalable UI. Reusable components and a streamlined workflow enabled faster feature rollout and a shorter design-to-development cycle.
Research & Discovery
Our objective was to redesign a B2B SaaS platform from the ground up and deliver a functional MVP within six months. This included rebuilding the product experience and creating a design system that would support fast development and long-term scalability.
To kick off the process, I interviewed key stakeholders — including the Design Lead, UX Lead, project managers, and developers — to align on business goals, user pain points, and technical constraints. I also audited the existing product to identify usability issues and gaps in consistency.
In parallel, I analysed competitor design systems and reviewed industry best practices to identify relevant trends and practical design approaches. This helped guide decisions around what to include in the initial version of our system while ensuring it stayed modern and user-focused.
Based on these insights, I proposed building the product and the design system from scratch. I focused on creating a lean set of foundational elements to meet the MVP's needs while laying the groundwork for future scalability.
Design & System Architecture
I built the system starting from minimal components that served as the foundation for more complex ones, ensuring a scalable and maintainable structure. Throughout the process, I focused on modularity to support flexibility, accessibility to enhance user experience, and reusability to streamline design and development workflows.
I started by defining the fundamental elements:
- Font Family – tailored for a B2B product to ensure readability and cross-platform consistency.
- Color Palette – with Primary (Brand), Secondary and Functional colours.
- Grid System – Enhances usability and speeds up design and development processes.
- Spacings – Avoid losing consistency in product building.
- Icons Library – Free Tabler React icons to reduce development time.
Based on the fundamental elements, I began working on the core UI components that were certain to be used across the platform. These included buttons, forms, tables, dropdowns, toggles, the footer, header, and sidebar menu — a set I knew would appear throughout the product.
The next step was to use these base components in wireframes, transitioning them from low-fidelity to high-fidelity by applying the UI elements from the design system I was building. This helped me validate that the components worked well on pages, interacted smoothly with each other, maintained visual consistency, and functioned correctly across different scenarios.
I started by working with developers to integrate the design system into the codebase using Storybook. This allowed us to create living documentation where components could be tested in different scenarios and validated for correct functionality early on. It also helped ensure alignment between design and development from the beginning.
Alongside this, I began creating minimal documentation for the design system elements. While documentation is often time-consuming and easy to postpone, even a lightweight but well-structured approach helps new team members quickly understand the system, its structure, and how to work with it effectively.
Outcome
During the development of the new product version with a six-month deadline, the design system I worked on evolved like a living organism. The efficient approach I established early on — working with variables and building a strong foundation — helped me minimise time and quality losses when implementing changes. After the MVP launch, the system expanded significantly in depth and scope. I introduced updates based on feedback from users, the team, and stakeholders, as well as structural changes in key user flows and product features. As the product matured into an ecosystem of multiple tools, unifying and optimising the design system became a top priority to ensure it could support a broad range of component needs and visual language use cases across the platform.
This work led to several key outcomes:
Consistent
and scalable UI
Faster
feature rollout
Streamlineddesign/dev
workflow
io.tt: Building a comprehensive Design System to support product scalability
Designed and developed a Design System from the ground up to support the latest product version, ensuring a cohesive user experience while establishing a strong foundation for long-term scalability and growth.
Product
io.tt is a platform helps brands create connected experiences through QR codes, NFC, and AR technology. By integrating these tools into products, packaging, and digital media, io.tt enables brands to boost consumer engagement, enhance loyalty programs, and collect valuable first-party data.
Challenge
The primary challenge was to build a comprehensive initial asset for the design system from scratch within tight deadlines. This system needed to establish a solid foundation for product development, ensuring a consistent design process that supports scalability and facilitates the seamless integration of new features.
My Role
I led the full design process from concept to implementation, taking complete ownership of both the product's UX and UI. This included creating a design system, researching, defining visual foundations, designing core components, and collaborating closely with developers to ensure seamless integration. The system was built to support the MVP launch and scale with the evolving product ecosystem.
Outcome
The updated design system gave the product a modern, trend-aligned look and feel while improving the overall user experience through a more consistent and scalable UI. Reusable components and a streamlined workflow enabled faster feature rollout and a shorter design-to-development cycle.
Research & Discovery
Our objective was to redesign a B2B SaaS platform from the ground up and deliver a functional MVP within six months. This included rebuilding the product experience and creating a design system that would support fast development and long-term scalability.
To kick off the process, I interviewed key stakeholders — including the Design Lead, UX Lead, project managers, and developers — to align on business goals, user pain points, and technical constraints. I also audited the existing product to identify usability issues and gaps in consistency.
In parallel, I analysed competitor design systems and reviewed industry best practices to identify relevant trends and practical design approaches. This helped guide decisions around what to include in the initial version of our system while ensuring it stayed modern and user-focused.
Based on these insights, I proposed building the product and the design system from scratch. I focused on creating a lean set of foundational elements to meet the MVP's needs while laying the groundwork for future scalability.
Design & System Architecture
I built the system starting from minimal components that served as the foundation for more complex ones, ensuring a scalable and maintainable structure. Throughout the process, I focused on modularity to support flexibility, accessibility to enhance user experience, and reusability to streamline design and development workflows.
I started by defining the fundamental elements:
- Font Family – tailored for a B2B product to ensure readability and cross-platform consistency.
- Color Palette – with Primary (Brand), Secondary and Functional colours.
- Grid System – Enhances usability and speeds up design and development processes.
- Spacings – Avoid losing consistency in product building.
- Icons Library – Free Tabler React icons to reduce development time.
Based on the fundamental elements, I began working on the core UI components that were certain to be used across the platform. These included buttons, forms, tables, dropdowns, toggles, the footer, header, and sidebar menu — a set I knew would appear throughout the product.
The next step was to use these base components in wireframes, transitioning them from low-fidelity to high-fidelity by applying the UI elements from the design system I was building. This helped me validate that the components worked well on pages, interacted smoothly with each other, maintained visual consistency, and functioned correctly across different scenarios.
I started by working with developers to integrate the design system into the codebase using Storybook. This allowed us to create living documentation where components could be tested in different scenarios and validated for correct functionality early on. It also helped ensure alignment between design and development from the beginning.
Alongside this, I began creating minimal documentation for the design system elements. While documentation is often time-consuming and easy to postpone, even a lightweight but well-structured approach helps new team members quickly understand the system, its structure, and how to work with it effectively.
Outcome
During the development of the new product version with a six-month deadline, the design system I worked on evolved like a living organism. The efficient approach I established early on — working with variables and building a strong foundation — helped me minimise time and quality losses when implementing changes. After the MVP launch, the system expanded significantly in depth and scope. I introduced updates based on feedback from users, the team, and stakeholders, as well as structural changes in key user flows and product features. As the product matured into an ecosystem of multiple tools, unifying and optimising the design system became a top priority to ensure it could support a broad range of component needs and visual language use cases across the platform.
This work led to several key outcomes:
Consistent
and scalable UI
Faster
feature rollout
Streamlined
workflow
io.tt: Building a comprehensive Design System to support product scalability
Designed and developed a Design System from the ground up to support the latest product version, ensuring a cohesive user experience while establishing a strong foundation for long-term scalability and growth.
Product
io.tt is a platform helps brands create connected experiences through QR codes, NFC, and AR technology. By integrating these tools into products, packaging, and digital media, io.tt enables brands to boost consumer engagement, enhance loyalty programs, and collect valuable first-party data.
Challenge
The primary challenge was to build a comprehensive initial asset for the design system from scratch within tight deadlines. This system needed to establish a solid foundation for product development, ensuring a consistent design process that supports scalability and facilitates the seamless integration of new features.
My Role
I led the full design process from concept to implementation, taking complete ownership of both the product's UX and UI. This included creating a design system, researching, defining visual foundations, designing core components, and collaborating closely with developers to ensure seamless integration. The system was built to support the MVP launch and scale with the evolving product ecosystem.
Outcome
The updated design system gave the product a modern, trend-aligned look and feel while improving the overall user experience through a more consistent and scalable UI. Reusable components and a streamlined workflow enabled faster feature rollout and a shorter design-to-development cycle.
Research & Discovery
Our objective was to redesign a B2B SaaS platform from the ground up and deliver a functional MVP within six months. This included rebuilding the product experience and creating a design system that would support fast development and long-term scalability.
To kick off the process, I interviewed key stakeholders — including the Design Lead, UX Lead, project managers, and developers — to align on business goals, user pain points, and technical constraints. I also audited the existing product to identify usability issues and gaps in consistency.
In parallel, I analysed competitor design systems and reviewed industry best practices to identify relevant trends and practical design approaches. This helped guide decisions around what to include in the initial version of our system while ensuring it stayed modern and user-focused.
Based on these insights, I proposed building the product and the design system from scratch. I focused on creating a lean set of foundational elements to meet the MVP's needs while laying the groundwork for future scalability.
Design & System Architecture
I built the system starting from minimal components that served as the foundation for more complex ones, ensuring a scalable and maintainable structure. Throughout the process, I focused on modularity to support flexibility, accessibility to enhance user experience, and reusability to streamline design and development workflows.
I started by defining the fundamental elements:
- Font Family – tailored for a B2B product to ensure readability and cross-platform consistency.
- Color Palette – with Primary (Brand), Secondary and Functional colours.
- Grid System – Enhances usability and speeds up design and development processes.
- Spacings – Avoid losing consistency in product building.
- Icons Library – Free Tabler React icons to reduce development time.
Based on the fundamental elements, I began working on the core UI components that were certain to be used across the platform. These included buttons, forms, tables, dropdowns, toggles, the footer, header, and sidebar menu — a set I knew would appear throughout the product.
The next step was to use these base components in wireframes, transitioning them from low-fidelity to high-fidelity by applying the UI elements from the design system I was building. This helped me validate that the components worked well on pages, interacted smoothly with each other, maintained visual consistency, and functioned correctly across different scenarios.
I started by working with developers to integrate the design system into the codebase using Storybook. This allowed us to create living documentation where components could be tested in different scenarios and validated for correct functionality early on. It also helped ensure alignment between design and development from the beginning.
Alongside this, I began creating minimal documentation for the design system elements. While documentation is often time-consuming and easy to postpone, even a lightweight but well-structured approach helps new team members quickly understand the system, its structure, and how to work with it effectively.
Outcome
During the development of the new product version with a six-month deadline, the design system I worked on evolved like a living organism. The efficient approach I established early on — working with variables and building a strong foundation — helped me minimise time and quality losses when implementing changes. After the MVP launch, the system expanded significantly in depth and scope. I introduced updates based on feedback from users, the team, and stakeholders, as well as structural changes in key user flows and product features. As the product matured into an ecosystem of multiple tools, unifying and optimising the design system became a top priority to ensure it could support a broad range of component needs and visual language use cases across the platform.
This work led to several key outcomes:
Consistent
and scalable UI
Faster
feature rollout
Streamlined
workflow
io.tt: Building a comprehensive Design System to support product scalability
Designed and developed a Design System from the ground up to support the latest product version, ensuring a cohesive user experience while establishing a strong foundation for long-term scalability and growth.
Product
io.tt is a platform helps brands create connected experiences through QR codes, NFC, and AR technology. By integrating these tools into products, packaging, and digital media, io.tt enables brands to boost consumer engagement, enhance loyalty programs, and collect valuable first-party data.
Challenge
The primary challenge was to build a comprehensive initial asset for the design system from scratch within tight deadlines. This system needed to establish a solid foundation for product development, ensuring a consistent design process that supports scalability and facilitates the seamless integration of new features.
My Role
I led the full design process from concept to implementation, taking complete ownership of both the product's UX and UI. This included creating a design system, researching, defining visual foundations, designing core components, and collaborating closely with developers to ensure seamless integration. The system was built to support the MVP launch and scale with the evolving product ecosystem.
Outcome
The updated design system gave the product a modern, trend-aligned look and feel while improving the overall user experience through a more consistent and scalable UI. Reusable components and a streamlined workflow enabled faster feature rollout and a shorter design-to-development cycle.
Research & Discovery
Our objective was to redesign a B2B SaaS platform from the ground up and deliver a functional MVP within six months. This included rebuilding the product experience and creating a design system that would support fast development and long-term scalability.
To kick off the process, I interviewed key stakeholders — including the Design Lead, UX Lead, project managers, and developers — to align on business goals, user pain points, and technical constraints. I also audited the existing product to identify usability issues and gaps in consistency.
In parallel, I analysed competitor design systems and reviewed industry best practices to identify relevant trends and practical design approaches. This helped guide decisions around what to include in the initial version of our system while ensuring it stayed modern and user-focused.
Based on these insights, I proposed building the product and the design system from scratch. I focused on creating a lean set of foundational elements to meet the MVP's needs while laying the groundwork for future scalability.
Design & System Architecture
I built the system starting from minimal components that served as the foundation for more complex ones, ensuring a scalable and maintainable structure. Throughout the process, I focused on modularity to support flexibility, accessibility to enhance user experience, and reusability to streamline design and development workflows.
I started by defining the fundamental elements:
- Font Family – tailored for a B2B product to ensure readability and cross-platform consistency.
- Color Palette – with Primary (Brand), Secondary and Functional colours.
- Grid System – Enhances usability and speeds up design and development processes.
- Spacings – Avoid losing consistency in product building.
- Icons Library – Free Tabler React icons to reduce development time.
Based on the fundamental elements, I began working on the core UI components that were certain to be used across the platform. These included buttons, forms, tables, dropdowns, toggles, the footer, header, and sidebar menu — a set I knew would appear throughout the product.
The next step was to use these base components in wireframes, transitioning them from low-fidelity to high-fidelity by applying the UI elements from the design system I was building. This helped me validate that the components worked well on pages, interacted smoothly with each other, maintained visual consistency, and functioned correctly across different scenarios.
I started by working with developers to integrate the design system into the codebase using Storybook. This allowed us to create living documentation where components could be tested in different scenarios and validated for correct functionality early on. It also helped ensure alignment between design and development from the beginning.
Alongside this, I began creating minimal documentation for the design system elements. While documentation is often time-consuming and easy to postpone, even a lightweight but well-structured approach helps new team members quickly understand the system, its structure, and how to work with it effectively.
Outcome
During the development of the new product version with a six-month deadline, the design system I worked on evolved like a living organism. The efficient approach I established early on — working with variables and building a strong foundation — helped me minimise time and quality losses when implementing changes. After the MVP launch, the system expanded significantly in depth and scope. I introduced updates based on feedback from users, the team, and stakeholders, as well as structural changes in key user flows and product features. As the product matured into an ecosystem of multiple tools, unifying and optimising the design system became a top priority to ensure it could support a broad range of component needs and visual language use cases across the platform.
This work led to several key outcomes:
Consistent
and scalable UI
Faster
feature rollout
Streamlined
workflow