San Francisco, CA
PROJECT OVERVIEW
IdeaBoxAI specializes in creating AI-powered solutions that enhance human capabilities and transform business operations. They aim to empower industries like finance, HR, customer support, manufacturing, and technology.
COMPANY
IdeaboxAi, North Carolina
My Role: Product Strategy, Agentic flow, Conversational UI, Subscription Model,
Design System, Hi fidelity designs
CHALLENGE
Design intuitive and trustworthy AI-powered experiences that seamlessly integrate into user workflows, enhance decision-making, and drive adoption across diverse industries.
Problem Area
-
Supporting diverse industries makes AI workflows inherently complex,
but users need a simple, intuitive experience to trust and effectively engage with AI agents
-
Lack of AI execution is no. 1 barrier of adoption rate
Design Process
UX
Research & Competitor Analysis
UI
Design System & Component Library
Define Product Features with USP
High-Fidelity Screens
Feature Prioritization & User Flows
Testing & Iteration
Research and Analysis
To ensure our AI platform stood out, I collaborated closely with my team to conduct a deep dive into the competitive landscape and user needs to identify pain points across industries.
-
Competitor Analysis:
We reviewed key players in AI solutions, focusing on features, usability, and integrations. This helped us understand gaps, like complex interfaces and limited adaptability, that we could improve on.
-
Qualitative Research:
Through user interviews and feedbacks, we identified common struggles such as overwhelming workloads, fragmented systems, and limited customization. We focused on addressing these by making the platform easy to use and highly flexible.
Insights and Opportunities
From the competitive analysis and user research, several key opportunities for differentiation emerged.
Features | Competitors | Our solution |
|---|---|---|
No-Code/Low-Code AI Builder | Requires technical expertise for AI development. | No-code/low-code builder for easy design and deployment. |
Context-Aware AI Agents | Lack memory, leading to static decision-making. | AI agents with short-term and long-term memory for smarter. |
Seamless System Integration | Struggle with integrating multiple systems. | Seamless integration with CRMs, ERPs, APIs, and third-party apps. |
Scalable & Flexible Deployment | Limited to specific deployment models, not scalable. | Scalable and flexible deployment options via SaaS or on-cloud/on-prem infrastructure. |
24/7 AI Customer Support Agents | Limited to business hours or manual escalation. | 24/7 AI customer support agents handling routine inquiries and escalating complex cases. |
Target Audience - B2B Users
Potential of our AI Agents to augment various roles within various organization, thereby unlocking higher productivity and efficiency across teams
Product Goal - Optimize Operations with AI Solutions
AI Agents
Agents that learn, adapt, and automate critical business processes seamlessly.
Workflow Automation
End-to-end workflow enhancing operational efficiency by avoiding repetitive tasks.
Process Optimization
Use pre-built AI insights to analyze and optimize operations, removing bottlenecks and boosting productivity.
Context-Aware Assistants
Deploy AI assistants that process data in real time and
provide actionable recommendations for success.
.jpg)
Evolution of Design System
(before)
Problem Area
X Current color palette appears dull and outdated
X Lacks vibrancy, making the product feel less engaging
X Colors do not align with the overall brand identity
X Inconsistent visual language: poor brand recognization
Solution
-Defining primary, secondary, tertiary color of the brand
-Extending it to the product design system
-Expanding the library with the parent colors
-Creating components for visual hierarchy
Design System (after)
Dark Mode vs Light Mode
Color Palette
Adaptive color palette designed for both dark and light modes, ensuring seamless accessibility (WCAG) and brand consistency across the product.
Typography
scalable typography hierarchy that enhances readability, visual harmony, and consistency.
.jpg)
Header & Sidebar
Scalable header & collapsable sidebar system for intuitive navigation, ensuring a seamless and structured user experience.
Buttons
Versatile button system with consistent styling, states, and accessibility considerations.
Input Fields
Input fields with clear labels, dynamic states, and seamless validations
Chat User Flow
.jpg)
High Fidelity Solutions
Conversational AI - Before & After User Testing
Before
x User-agent replies merged, causing confusion
x Reasoning steps lacked clear context
x Low transparency; progress felt like a black box
x Minimal explanation led to trust issues
%202.jpg)
After (version 2.0)
Conversational + Generative AI
Generative AI features
-
Converts natural language to code (SQL/Python)
-
Auto-fetches & processes real-time data
-
Breaks tasks into logical steps
-
Creates visualizations (charts/tables)
-
Handles APIs smartly with parameters
Conversational UI features
-
Simple, chat-based interaction, better highlighted user vs agent
-
Shows running status with progress indicators
-
Displays step-by-step reasoning
-
Toggle between Table and Chart view
-
Uses conventional icons for attachment, voice command, stop, and play
-
responsive screen for 2 column
Table
.jpg)
Chart
.jpg)
Pre-Built Agents
Domain-Specific AI Agents – Delivering tailored solutions without
the need for custom development.
Features
-
Dynamic Search and pagination
-
Scalable sidebar to add extra features
-
Ability to delete and edit domain name and description
-
Ability to create new agents and self customize.
Create Customized Agents
A flexible framework supporting diverse Agentic design patterns (React, MultiAgent, Reflection, etc.)
Rapid Deployment – Launch pilots within days, not months—no deep AI expertise required.
Features
-
Instant agent info onboarding
-
Knowledge Base
-
Tools
-
Sample Questions
.jpg)
Tools Integration API's
-
Real-Time & Accurate Data from external sources instantly
-
Automation & Efficiency – Reduces response time and integrates seamlessly into workflows
-
Scalability & Flexibility – Supports multiple data sources, improving AI adaptability
-
Configurable API tools for flexibility, faster deployment, easy customization
%202.jpg)
Automations
-
Automates repetitive tasks through scheduling for efficiency.
-
Integrates with tools and knowledge bases for seamless workflows.
-
Reduces errors by handling routine work automatically.
-
Frees users to focus on higher-value activities.
Best Practices for UI vs Dev Alignment
Behind the Scene - Dev Ready Files
-
Prototyped user flow
-
Annoted edge case scenarios
-
Detailed states for each flow
Project Learnings
-
AI & LLM Integration: Gained hands-on experience in designing UX for AI-driven automation, understanding LLM models, agentic workflows, and their impact on user interactions. Learned how to optimize conversational AI interfaces while integrating third-party APIs for seamless functionality.
-
Scalable & Accessible Design Systems: Developed expertise in creating modular design systems for B2B SaaS, focusing on accessibility, UI consistency, and efficient collaboration between design and engineering teams. Strengthened knowledge of token-based design systems and scalable UI frameworks.