Instoried Design System

Design System

AI Content Generation Tool (CGT): Driving Consistency, Efficiency, and Scalability

Instoried's AI Content Generation Tool (CGT) is a platform designed to generate tailored content for specific needs using AI, such as product descriptions, paraphrasing, ad copy, taglines, and much more. My key contribution in this project was designing a comprehensive design system that included design tokens and components such as text fields, tooltips, error states, modals, button states, chips, tiles, selectable tabs, and modifiers (decorative icons, AI presence).

Role: Design System, Interaction Design, Usability Testing

Team: 2 UX Designer, 1 Motion Designer, 3 Developers, 4 AI/ML Engineers

Timeline: 2 months

The Challenge

Why do we need a design system?

Instoried's analysis tool had already adopted a Neumorphism style. However, based on user analytics and feedback, we identified concerns around color contrast, readability, and usability, which prompted us to revise the design to better address these needs. The goal of this project was to create a fresh identity for the new tool while keeping the color scheme and typography consistent with existing tools within the organization. Our CTO emphasized the need for a unique brand presence, prompting us to implement significant changes in the user interface (UI) to enhance both the tool’s visual identity and overall user experience.

How to implement a brand-aligned, scalable design system for the Instoried's Tools to streamline & enhance workflows for both designers and developers?

The Solution

CGT Design System at a glance

CGT Design System uses an atomic structure to create simple, reusable components that make design and development faster and more consistent.

See the Process

Planning out the steps

Before diving into the requirements, I mapped out a pathway, including a to-do list outlining the necessary steps to complete the task and the anticipated outcomes. To kick off the project, I organized collaborative team workshops, bringing together designers, developers, and stakeholders to align on project goals. During these sessions, we identified major pain points, including inconsistent design patterns and a lack of reusable components that led to inefficiencies for designers and developers.

01 Identify the Need

Should we need this component or is it already there?

We reviewed 50+ screens to list all existing components and identified overlaps, gaps, and comparison showing inconsistent buttons, colors, icons and input fields on different screens. Below are the list components we needed:

02 Look for Inspiration

How other companies approach these goals?

To understand how other design systems tackle similar goals, we compared IBM Carbon, Google Material Design, and Apple HIG. Since we already had an idea about our platform’s support and development capabilities, this helped us narrow down our research scope. Consistency, Efficiency, and Scalability were considered the key pillars guiding our design system decisions.

To further make the decision we decided to go with Decision Matrix (Weighted Scoring Model)

This method was adopted after a lot of brainstorming discussions with the development team and feedback from the CTO. We referenced previous findings, development bandwidth, and business factors to decide the criteria, which were assigned a weight based on their importance. Each system was rated from (least)1 to 10 (best) based on research insights, and industry reviews.

IBM Carbon Wins! Based on user needs, usability testing, and weighted scoring, IBM Carbon emerges as the best choice due to its high flexibility, accessibility, scalability and developer compatibility for enterprise web applications.

IBM Carbon scored the highest because: 

✅ Highly flexible & customizable for enterprise-scale applications. 

✅ Strong accessibility focus for inclusive design. 

✅ Optimized for performance-heavy, data-driven applications. 

✅ Well-supported for web development using React, Angular, Vue.

Key Findings

03 Design & Test

Designing color style, tokens and the components

After finalizing the carbon design system, I created tokens, color anatomy, and 7 components-Inputs fields, Dropdowns, snackbars, chips, tooltips, Tokens, Modals, and Buttons.

04 Critique & Feedback

Learning from issues identified during testing

I collaborated with the developers during component testing and encountered issues with the Text Field (Input Component) and Dropdown (Selection Component), as outlined below. During this process, I realized that even small changes can significantly impact component reusability and overall usability. A minor adjustment at the component level can make a huge difference in creating a more intuitive user experience.

Before

After

05 Documentation & Hand-off

Ensuring a smooth hand-off to the dev...

As the design components were handed off to the developers, we conducted iterative usability testing to ensure that the AI-driven features functioned as intended. We tested core components in real environments to check their performance and usability. Through this testing phase, we identified several improvements that refined the design.

Key learnings from the Handoff Process📚

Regular communication with developers not only clarified technical limitations but also sparked new ideas for improving design elements. The iterative feedback loop made our system stronger.
The more we tested our designs, the more we identified opportunities to refine components. Testing early and often helped us avoid major reworks later.
Clear documentation and component specifications in tools like Storybook ensured the developers could build with confidence and minimized misunderstandings. This became particularly important as new developers joined the project.

Reflections

Focusing on the smallest building block to make an impact!

This project was a significant change for everyone in the organization, and I learned a lot about atomic design. It taught me the true power of scalable design and how breaking down components into smaller, reusable parts can lead to a more efficient and adaptable system.

One of the most valuable lessons came from staying open to feedback from the development team. By doing so, I was able to see where my designs could improve and make more impactful decisions.

I also learned how to address initial resistance from teams when new workflows were introduced. By showcasing metrics and the impact of the changes, I was able to get buy-in during workshops and foster a smoother, incremental adoption of the design system.