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.

Client Segmentation & Persona Definition, Designing for B2B2C contexts, Design System Creation, Wireframing & Prototyping, Modular System Design, Designing for Scalability, Cross-functional Alignment, Product Strategy

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.

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.

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.

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.

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.

A comprehensive Design System customizable in:

• 3 Styles x 2 Modes (Light/Dark) - To switch from one to the other in a couple click - 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

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.

• The corporate

• The Tech-Savvy

• The Playful

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.

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).

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.

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.