MemorAIz | From Product Vision to Modular Design System
Structure the core product strategy and create a complex, multi-mode design system, ShadCN-ready to bring order to chaos, enable rapid prototyping, maximize scalability and improve cross-team collaboration in an early start-up environment.
Applied skills
Achivements
Client Segmentation & Persona Definition, Designing for B2B2C contexts,
Design System Creation, Wireframing & Prototyping, Modular System Design,
Designing for Scalability, Cross-functional Alignment, Product Strategy
-90%
Time to prototype
Context
MemorAIz provides modular, AI-driven solutions (such as widgets and chatbots) that can be fully customized in terms of style, content, and functionality.
Modules can be combined to deliver enhanced outcomes.
This approach enables the company to offer products that seamlessly integrate into existing ecosystems (such as LMS), reducing adoption costs, while also allowing the rapid creation of standalone experiences by using modular components as building blocks.
The problem
When I joined MemorAIz, the startup was still in its early stages. Due to time constraints, little focus was placed on product research and testing.
Validation relied almost exclusively on customer satisfaction and acquisition—an approach that proved effective in the short term but unsustainable in the medium to long term as we lacked structure.
Although components existed within the developers’ Storybook, they were missing both a coherent narrative and a clear strategic framework.
Many features of modules overlapped, and we were still defining how modules could be combined, what constituted the true MVP of each, and which additional configurations actually increased market value.
A major challenge was the pressure to acquire new customers quickly.
The design team was often pulled into creating last-minute pitches and prototypes, leaving little time to concentrate on product development itself.
To complicate matters further, the existing design system was not compatible with the front-end language used by the development team.
Process
The project unfolded in two key phases:
Definition — Identify the core values of each module, outline their individual MVPs, and craft clear product narratives.
System Design — Build a scalable, iterative design system that supports rapid prototyping while freeing up resources for research and long-term product strategy.
Phase 1 | Definition
In response to the company’s needs, I conducted extensive research and benchmarking on widgets — the individual modules — to strategically define each of them with clear core values, MVPs, customization paths, and variations.
This work revealed an opportunity to create a clear framework and a structured widget library that could evolve with the company.
The primary objective was to establish consistency by introducing a company-wide framework that ensured every future widget would be developed with the same level of strategic alignment and attention to detail.
Hover to enlarge / Click to open in a new tab->
Phase 2 | System Design
Since I had already decided to leave the company to pursue projects on a medium and larger scale, I wanted my final contribution to be useful for the teams, so I expressed the desire to dedicate my last month of work to creating a design system easy to adopt and extend, even for new team members who would join after me. Taking on this challenge felt like the best way to leave something truly valuable behind.
So I set out to design a modular system that allowed the team to create prototypes quickly and efficiently—freeing up time to focus on higher-value tasks such as research, strategy, and innovation.
Desired Outcome
A comprehensive Design System customizable in:
3 Styles x 2 Modes (Light/Dark)
To switch from one to the other in a couple clicks
To ensure consistency
Which needed to have:
Complex Components
Manageable entirely from the settings panel to simplify the workflow of new team members
That has to be:
ShadCN-Ready
To simplify the workflow for the dev-team
To set the basis for an easy scalability and lay the groundwork for shared language and methodologies
Client Segmentation | Research Phase
The study of design system styles focused on a retrospective of our target customers.
Considerable time was spent searching for plugins and consistent methodologies to enable rapid batch modifications—for clients requiring highly customized solutions.
Since MemorAIz follows a B2B2C model, defining client personas upfront for this project wasn’t the best choice; instead, I decided to cluster the most common customer segments into three archetypes.
So I identified distinct behavioural and stylistic patterns retrospectively, by analysing the clients we had worked with most frequently over time.
These insights came from continuous conversations, codesign sessions, and strategic workshops we facilitated during the product’s evolution.
Although the offering remains the same for all—modular, high-tech generative AI widgets that can be embedded into existing platforms or assembled into standalone experiences — we noticed that different types of clients approached and applied our technology in significantly different ways.
Client Archetypes
The Corporate
Includes both large private companies and public institutions (particularly in education and government).
They typically use our tools to:
• Deliver internal training programs
• Streamline existing workflows with AI-enhanced processes
These clients tend to favor:
• A formal tone
• Reliable, structured user flows
• Power transformative AI features (like dynamic content generation)
The Tech-Savvy
These are companies across various industries —such as publishing, travel, or media—that already deliver digital experiences and want to scale them using advanced AI.
They often combine our modules to integrate chatbots or multimodal agents into broader ecosystems.
This client group values:
• Technical flexibility
• Rapid experimentation
• Seamless integration
The Playful
Younger/smaller companies with a bold, creative voice. While they use the same advanced AI tech, they often aim to build standalone experiences that are emotionally engaging and visually distinctive.
They seek:
• A lighter, more expressive tone
• Customizable front-end experiences
• Short time-to-market for MVPs or digital pilots
This cluster reflects our own internal aspirations & the future goal of offering branded, standalone products ourselves.
The challenge: How the system works
The main challenge was to fully understand the best way to integrate primary tokens (based on the Tailwind nomenclature) with ShadCN semantics so that with just a few clicks, it was possible to switch between light and dark modes for each style without difficulty. So…
I set the primitive tokens in color scales, each of which was transposed into the two modes.
I then had to study the ShadCN semantics in depth and better understand which colors to use for each element so that the "switch" to dark mode would not result in errors.
I repeated the same process with typographic scales and Tailwind elements (such as border radius, shadows, etc.) so everything was connected to its own reference style.
I tested everything thoroughly to debug as much as possible before testing the system on real products (and iterate it).
In the end, I arrived at the following scheme (I'm showcasing only three color scales as an example).
Hover to enlarge / Click to open in a new tab->
Wrapping up: the result
Here's a quick demonstration of how the system works to give you an idea of how much it can speed up your work in the short and long term.
Learnings
It was my first experience with a Design System and I was completely alone.
I realized that there are no ready-made tutorials for such complex things; sometimes you just have to sit down, think it through, and accept that you can make mistakes and learn through frustration (a lot of mistakes and frustration!)
Without the initial work of clearly defining the widgets, the system would not have been able to hold up: putting down on paper what to build and how to segment it was the key to everything.
I learned that complexity can only be tamed with structure, clarity, and constant iteration.
Thank you!
💖
The challenge:
How the system works
The main challenge was to fully understand the best way to integrate primary tokens (based on the Tailwind nomenclature) with ShadCN semantics so that with just a few clicks, it was possible to switch between light and dark modes for each style without difficulty. So…
I set the primitive tokens in color scales, each of which was transposed into the two modes.
I then had to study the ShadCN semantics in depth and better understand which colors to use for each element so that the "switch" to dark mode would not result in errors.
I repeated the same process with typographic scales and Tailwind elements (such as border radius, shadows, etc.) so everything was connected to its own reference style.
I tested everything thoroughly to debug as much as possible before testing the system on real products (and iterate it).
In the end, I arrived at the following scheme (I'm showcasing only three color scales as an example).
Zoom to enlarge or tap to open in a new tab >
Wrapping up: the result
Here's a quick demonstration of how the system works to give you an idea of how much it can speed up your work in the short and long term.
Learnings
It was my first experience with a Design System and I was completely alone.
I realized that there are no ready-made tutorials for such complex things; sometimes you just have to sit down, think it through, and accept that you can make mistakes and learn through frustration (a lot of mistakes and frustration!)
Creating components with nested instances, inside other nested instances, inside other nested instances, is not an easy task: it requires patience and method.
Without the initial work of clearly defining the widgets, the system would not have been able to hold up: putting down on paper what to build and how to segment it was the key to everything.
I learned that complexity can only be tamed with structure, clarity, and constant iteration.
Thank you!
💖
MemorAIz | From Product Vision to Modular Design System
Structure the core product strategy and create a complex, multi-mode design system, ShadCN-ready to bring order to chaos, enable rapid prototyping, maximize scalability and improve cross-team collaboration in an early start-up environment.
Applied skills
Client Segmentation & Persona Definition, Designing for B2B2C contexts,
Design System Creation, Wireframing & Prototyping, Modular System Design,
Designing for Scalability, Cross-functional Alignment, Product Strategy
Achivements
-90%
Time to prototype
Context
MemorAIz provides modular, AI-driven solutions (such as widgets and chatbots) that can be fully customized in terms of style, content, and functionality.
Modules can be combined to deliver enhanced outcomes.
This approach enables the company to offer products that seamlessly integrate into existing ecosystems (such as LMS), reducing adoption costs, while also allowing the rapid creation of standalone experiences by using modular components as building blocks.
The problem
When I joined MemorAIz, the startup was still in its early stages. Due to time constraints, little focus was placed on product research and testing.
Validation relied almost exclusively on customer satisfaction and acquisition—an approach that proved effective in the short term but unsustainable in the medium to long term as we lacked structure.
Although components existed within the developers’ Storybook, they were missing both a coherent narrative and a clear strategic framework.
Many features of modules overlapped, and we were still defining how modules could be combined, what constituted the true MVP of each, and which additional configurations actually increased market value.
A major challenge was the pressure to acquire new customers quickly.
The design team was often pulled into creating last-minute pitches and prototypes, leaving little time to concentrate on product development itself.
To complicate matters further, the existing design system was not compatible with the front-end language used by the development team.
Process
The project unfolded in two key phases:
Definition — Identify the core values of each module, outline their individual MVPs, and craft clear product narratives.
System Design — Build a scalable, iterative design system that supports rapid prototyping while freeing up resources for research and long-term product strategy.
Phase 1 | Definition
In response to the company’s needs, I conducted extensive research and benchmarking on widgets — the individual modules — to strategically define each of them with clear core values, MVPs, customization paths, and variations.
This work revealed an opportunity to create a clear framework and a structured widget library that could evolve with the company.
The primary objective was to establish consistency by introducing a company-wide framework that ensured every future widget would be developed with the same level of strategic alignment and attention to detail.
Zoom to enlarge->
Phase 2 | System Design
Since I had already decided to leave the company to pursue projects on a medium and larger scale, I wanted my final contribution to be useful for the teams, so I expressed the desire to dedicate my last month of work to creating a design system easy to adopt and extend, even for new team members who would join after me. Taking on this challenge felt like the best way to leave something truly valuable behind.
So I set out to design a modular system that allowed the team to create prototypes quickly and efficiently—freeing up time to focus on higher-value tasks such as research, strategy, and innovation.
Desired Outcome
A comprehensive Design System customizable in:
3 Styles x 2 Modes (Light/Dark)
To switch from one to the other in a couple clicks
To ensure consistency
Which needed to have:
Complex Components
Manageable entirely from the settings panel to simplify the workflow of new team members
That has to be:
ShadCN-Ready
To simplify the workflow for the dev-team
To set the basis for an easy scalability and lay the groundwork for shared language and methodologies
Client Segmentation | Research Phase
The study of design system styles focused on a retrospective of our target customers.
Considerable time was spent searching for plugins and consistent methodologies to enable rapid batch modifications—for clients requiring highly customized solutions.
Since MemorAIz follows a B2B2C model, defining client personas upfront for this project wasn’t the best choice; instead, I decided to cluster the most common customer segments into three archetypes.
So I identified distinct behavioural and stylistic patterns retrospectively, by analysing the clients we had worked with most frequently over time.
These insights came from continuous conversations, codesign sessions, and strategic workshops we facilitated during the product’s evolution.
Although the offering remains the same for all—modular, high-tech generative AI widgets that can be embedded into existing platforms or assembled into standalone experiences — we noticed that different types of clients approached and applied our technology in significantly different ways.
Client Archetypes
The Corporate Client
Includes both large private companies and public institutions (particularly in education and government).
They typically use our tools to:
• Deliver internal training programs
• Streamline existing workflows with AI-enhanced processes
These clients tend to favor:
• A formal tone
• Reliable, structured user flows
• Power transformative AI features (like dynamic content generation)
The Tech-Savvy Client
These are companies across various industries —such as publishing, travel, or media—that already deliver digital experiences and want to scale them using advanced AI.
They often combine our modules to integrate chatbots or multimodal agents into broader ecosystems.
This client group values:
• Technical flexibility
• Rapid experimentation
• Seamless integration
The Playful Client
Usually younger or smaller companies with a bold, creative voice. While they use the same advanced AI tech, they often aim to build standalone experiences that are emotionally engaging and visually distinctive.
They seek:
• A lighter, more expressive tone
• Customizable front-end experiences
• Short time-tomarket for MVPs or digital pilots
This cluster also reflects our own internal aspirations —we’re designing with the future goal of offering branded, standalone products ourselves.
MemorAIz | From Product Vision to Modular Design System
Structure the core product strategy and create a complex, multi-mode design system, ShadCN-ready to bring order to chaos, enable rapid prototyping, maximize scalability and improve cross-team collaboration in an early start-up environment.
Applied skills
Achivements
Client Segmentation & Persona Definition, Designing for B2B2C contexts, Design System Creation, Wireframing & Prototyping, Modular System Design, Designing for Scalability, Cross-functional Alignment, Product Strategy
-90%
Time to prototype
Context
MemorAIz provides modular, AI-driven solutions (such as widgets and chatbots) that can be fully customized in terms of style, content, and functionality.
Modules can be combined to deliver enhanced outcomes.
This approach enables the company to offer products that seamlessly integrate into existing ecosystems (such as LMS), reducing adoption costs, while also allowing the rapid creation of standalone experiences by using modular components as building blocks.
The problem
When I joined MemorAIz, the startup was still in its early stages. Due to time constraints, little focus was placed on product research and testing.
Validation relied almost exclusively on customer satisfaction and acquisition—an approach that proved effective in the short term but unsustainable in the medium to long term as we lacked structure.
Although components existed within the developers’ Storybook, they were missing both a coherent narrative and a clear strategic framework.
Many features of modules overlapped, and we were still defining how modules could be combined, what constituted the true MVP of each, and which additional configurations actually increased market value.
A major challenge was the pressure to acquire new customers quickly.
The design team was often pulled into creating last-minute pitches and prototypes, leaving little time to concentrate on product development itself.
To complicate matters further, the existing design system was not compatible with the front-end language used by the development team.
Process
The project unfolded in two key phases:
Definition — Identify the core values of each module, outline their individual MVPs, and craft clear product narratives.
System Design — Build a scalable, iterative design system that supports rapid prototyping while freeing up resources for research and long-term product strategy.
Phase 1 | Definition
In response to the company’s needs, I conducted extensive research and benchmarking on widgets — the individual modules — to strategically define each of them with clear core values, MVPs, customization paths, and variations.
This work revealed an opportunity to create a clear framework and a structured widget library that could evolve with the company.
The primary objective was to establish consistency by introducing a company-wide framework that ensured every future widget would be developed with the same level of strategic alignment and attention to detail.
Zoom to enlarge >
Phase 2 | System Design
Since I had already decided to leave the company to pursue projects on a medium and larger scale, I wanted my final contribution to be useful for the teams, so I expressed the desire to dedicate my last month of work to creating a design system easy to adopt and extend, even for new team members who would join after me. Taking on this challenge felt like the best way to leave something truly valuable behind.
So I set out to design a modular system that allowed the team to create prototypes quickly and efficiently—freeing up time to focus on higher-value tasks such as research, strategy, and innovation.
Desired Outcome
A comprehensive Design System customizable in:
3 Styles x 2 Modes (Light/Dark)
To switch from one to the other in a couple clicks
To ensure consistency
Which needed to have:
Complex Components
Manageable entirely from the settings panel to simplify the workflow of new team members
That has to be:
ShadCN-Ready
To simplify the workflow for the dev-team
To set the basis for an easy scalability and lay the groundwork for shared language and methodologies
Client Segmentation | Research Phase
The study of design system styles focused on a retrospective of our target customers.
Considerable time was spent searching for plugins and consistent methodologies to enable rapid batch modifications—for clients requiring highly customized solutions.
Since MemorAIz follows a B2B2C model, defining client personas upfront for this project wasn’t the best choice; instead, I decided to cluster the most common customer segments into three archetypes.
So I identified distinct behavioural and stylistic patterns retrospectively, by analysing the clients we had worked with most frequently over time.
These insights came from continuous conversations, codesign sessions, and strategic workshops we facilitated during the product’s evolution.
Although the offering remains the same for all—modular, high-tech generative AI widgets that can be embedded into existing platforms or assembled into standalone experiences — we noticed that different types of clients approached and applied our technology in significantly different ways.
Client Archetypes
The Corporate
Includes both large private companies and public institutions (particularly in education and government).
They typically use our tools to:
• Deliver internal training programs
• Streamline existing workflows with AI-enhanced processes
These clients tend to favor:
• A formal tone
• Reliable, structured user flows
• Power transformative AI features (like dynamic content generation)
The Tech-Savvy
These are companies across various industries —such as publishing, travel, or media—that already deliver digital experiences and want to scale them using advanced AI.
They often combine our modules to integrate chatbots or multimodal agents into broader ecosystems.
This client group values:
• Technical flexibility
• Rapid experimentation
• Seamless integration
The Playful
Younger/smaller companies with a bold, creative voice. While they use the same advanced AI tech, they often aim to build standalone experiences that are emotionally engaging and visually distinctive.
They seek:
• A lighter, more expressive tone
• Customizable front-end experiences
• Short time-to-market for MVPs or digital pilots
This cluster reflects our own internal aspirations & the future goal of offering branded, standalone products ourselves.
The challenge: How the system works
The main challenge was to fully understand the best way to integrate primary tokens (based on the Tailwind nomenclature) with ShadCN semantics so that with just a few clicks, it was possible to switch between light and dark modes for each style without difficulty. So…
I set the primitive tokens in color scales, each of which was transposed into the two modes.
I then had to study the ShadCN semantics in depth and better understand which colors to use for each element so that the "switch" to dark mode would not result in errors.
I repeated the same process with typographic scales and Tailwind elements (such as border radius, shadows, etc.) so everything was connected to its own reference style.
I tested everything thoroughly to debug as much as possible before testing the system on real products (and iterate it).
In the end, I arrived at the following scheme (I'm showcasing only three color scales as an example).
Zoom to enlarge or tap to open in a new tab >
Wrapping up: the result
Here's a quick demonstration of how the system works to give you an idea of how much it can speed up your work in the short and long term.
Learnings
It was my first experience with a Design System and I was completely alone.
I realized that there are no ready-made tutorials for such complex things; sometimes you just have to sit down, think it through, and accept that you can make mistakes and learn through frustration (a lot of mistakes and frustration!)
Without the initial work of clearly defining the widgets, the system would not have been able to hold up: putting down on paper what to build and how to segment it was the key to everything.
I learned that complexity can only be tamed with structure, clarity, and constant iteration.