Projects
Projects
Create/Manage AI Agent Via Lua
Create/Manage AI Agent Via Lua
Create/Manage AI Agent Via Lua
Lua enables any business to launch AI powered sales, support and booking agents in minutes.
The core project goal is to redesign the existing "Create / Manage Agent" flow into an experience that feels like onboarding a friendly teammate, not configuring complex software. The redesign focused on creating a two-pane Agent Builder for a desktop web app, emphasizing clarity, immediate feedback, and use of plain language for non-technical users.
Lua enables any business to launch AI powered sales, support and booking agents in minutes.
The core project goal is to redesign the existing "Create / Manage Agent" flow into an experience that feels like onboarding a friendly teammate, not configuring complex software. The redesign focused on creating a two-pane Agent Builder for a desktop web app, emphasizing clarity, immediate feedback, and use of plain language for non-technical users.
Category
Category
AI
AI
Sass
Sass
Web app
Web app
Role
Role
Product Designer
Product Designer
Company
Company
Lua AI
Lua AI
Duration
Duration
2 days
Problem Statement
Problem Statement
Problem Statement
The primary design problem is making the process of creating powerful AI agents accessible and intuitive for non-technical users building an agent for the first time, necessitating the removal of all technical complexity and jargon.
The primary design problem is making the process of creating powerful AI agents accessible and intuitive for non-technical users building an agent for the first time, necessitating the removal of all technical complexity and jargon.
Solution
Solution
Solution
The solution is a two-pane Agent Builder (Build on the left, Live Test on the right) designed to be calm, fun, and obvious. It utilizes plain language only (avoiding terms like “RAG” or “LLM”), incorporates friendly defaults and presets for quick success, and ensures an always-on preview where material changes trigger an automatic chat reset for immediate testing.
The solution is a two-pane Agent Builder (Build on the left, Live Test on the right) designed to be calm, fun, and obvious. It utilizes plain language only (avoiding terms like “RAG” or “LLM”), incorporates friendly defaults and presets for quick success, and ensures an always-on preview where material changes trigger an automatic chat reset for immediate testing.
Challenges Encountered
Challenges Encountered
Challenges Encountered
The main challenge was ensuring the experience was successful for a non-technical audience, requiring the design to strictly avoid technical jargon and instead adopt a tone and structure that makes configuring the agent feel like providing a simple job brief to a teammate
The design has a fixed structure i.e The left pane is for the Agent configuration /Resources, and the right pane is for the "Live Test" chat panel. This fixed structure dictates how content is organized and how users interact with the building and testing process simultaneously.
The main challenge was ensuring the experience was successful for a non-technical audience, requiring the design to strictly avoid technical jargon and instead adopt a tone and structure that makes configuring the agent feel like providing a simple job brief to a teammate
The design has a fixed structure i.e The left pane is for the Agent configuration /Resources, and the right pane is for the "Live Test" chat panel. This fixed structure dictates how content is organized and how users interact with the building and testing process simultaneously.
Results
Results
Results
Lua's underlying service, which this builder supports, is trusted by 100+ businesses globally. This redesign will help Lua's AI sales, support, and booking agents that currently operate in 7 countries, helping businesses onboard seamlessly by converting conversations to sales 24/7 through integrations into large revenue engines like Shopify and Ordable.
Lua's underlying service, which this builder supports, is trusted by 100+ businesses globally. This redesign will help Lua's AI sales, support, and booking agents that currently operate in 7 countries, helping businesses onboard seamlessly by converting conversations to sales 24/7 through integrations into large revenue engines like Shopify and Ordable.
Current Interface
Current Interface
Current Interface
The current interface is not intuitive enough for non-technical users
The current interface is not intuitive enough for non-technical users
Current create/manage agent interface
Create/Manage breakdown
Create/Manage breakdown
Create/Manage breakdown
I broke down the create/manage agent feature into 6 different sections to make the user journey less overwhelming and intuitive for non-technical users.
I broke down the create/manage agent feature into 6 different sections to make the user journey less overwhelming and intuitive for non-technical users.
Agent basic info setup
Agent basic info setup
Agent basic info setup
The user is prompted to name their agent ("What should we call our agent?"). Users must describe the agent like a person, who they help, and what they care about.
An auto-generated avatar appears, with the option to regenerate it via a text prompt (e.g., "friendly helper in blue hoodie").
Provide a short description of about your product/services potentially pre-filled from integrations like Shopify.
Constraints, here you set boundaries. Constraints are the guidelines that keep your AI agent helpful, safe, and on-topic. They prevent the agent from making promises it can't keep, accessing information it shouldn't have, or wandering into topics outside its expertise.
The user is prompted to name their agent ("What should we call our agent?"). Users must describe the agent like a person, who they help, and what they care about.
An auto-generated avatar appears, with the option to regenerate it via a text prompt (e.g., "friendly helper in blue hoodie").
Provide a short description of about your product/services potentially pre-filled from integrations like Shopify.
Constraints, here you set boundaries. Constraints are the guidelines that keep your AI agent helpful, safe, and on-topic. They prevent the agent from making promises it can't keep, accessing information it shouldn't have, or wandering into topics outside its expertise.
Basic info (Agent name, avatar, about product & constraint) prototype
Persona
Persona
Persona
The importance of redesigning the Persona section to be intuitive for non-technical users, including providing persona presets and variation of tone style, is crucial because the primary audience consists of non-technical users who are often building an agent for the first time.
Defining Brand Identity and Voice: The agent's ability to speak in the business's brand voice is fundamental to Lua's service offering. The persona section must clearly facilitate this definition. Providing options like Voice chips (Friendly, Caring, Playful, Professional) and an Energy dropdown (Calm / Friendly / Playful / Expert) allows businesses to precisely define how the agent sounds and feels, ensuring the unified experience sounds and feels like their brand.
While presets provide quick success, the Persona Adjuster allows users to refine the persona by giving examples of "What didn’t feel right?" and "How would you reply?".
The importance of redesigning the Persona section to be intuitive for non-technical users, including providing persona presets and variation of tone style, is crucial because the primary audience consists of non-technical users who are often building an agent for the first time.
Defining Brand Identity and Voice: The agent's ability to speak in the business's brand voice is fundamental to Lua's service offering. The persona section must clearly facilitate this definition. Providing options like Voice chips (Friendly, Caring, Playful, Professional) and an Energy dropdown (Calm / Friendly / Playful / Expert) allows businesses to precisely define how the agent sounds and feels, ensuring the unified experience sounds and feels like their brand.
While presets provide quick success, the Persona Adjuster allows users to refine the persona by giving examples of "What didn’t feel right?" and "How would you reply?".
Persona setting prototype
Enable skills
Enable skills
Enable skills
I redesigned the skills section to be intuitive for non-technical users, including clear options for functionalities and constraints, centers on achieving the overall project goal.
The core function of Lua agents is to get things done, helping customers complete sales and bookings seamlessly. Providing clear, pre-packaged skill options ensures the agent is functional immediately.
The skills include support tickets, live chat handoff, web search and knowledge search. They are key functionalities that must be easy to enable. The redesign ensures these "superpowers" are easy to access and understand.
I redesigned the skills section to be intuitive for non-technical users, including clear options for functionalities and constraints, centers on achieving the overall project goal.
The core function of Lua agents is to get things done, helping customers complete sales and bookings seamlessly. Providing clear, pre-packaged skill options ensures the agent is functional immediately.
The skills include support tickets, live chat handoff, web search and knowledge search. They are key functionalities that must be easy to enable. The redesign ensures these "superpowers" are easy to access and understand.
Enable skills prototype
Add resources
Add resources
Add resources
The core function of the Resources tab is to provide the agent with the necessary information to act like the business's best staff member. Lua agents are trained on your sales materials and processes. The redesign ensures that non-technical users can easily supply this critical information without third party assistant.
Options like "uploading documents" and "add live links are provided and users can test after adding resources.
Since Resources are considered a "material change" to the agent, enabling a resource addition triggers the auto-reset chat in the Live Test pane. This allows the user to immediately ask questions based on the new resource and see the agent's updated responses, providing instant feedback on their work.
The core function of the Resources tab is to provide the agent with the necessary information to act like the business's best staff member. Lua agents are trained on your sales materials and processes. The redesign ensures that non-technical users can easily supply this critical information without third party assistant.
Options like "uploading documents" and "add live links are provided and users can test after adding resources.
Since Resources are considered a "material change" to the agent, enabling a resource addition triggers the auto-reset chat in the Live Test pane. This allows the user to immediately ask questions based on the new resource and see the agent's updated responses, providing instant feedback on their work.
Add resources prototype
Live test
Live test
Live test
The Live Test panel, positioned as the fixed chat panel in the right column of the two-pane layout, serves as an always-on preview where changes feel immediate. This immediate feedback is a high-priority metric. Non-technical users need to see the direct result of their configuration changes instantly to build confidence and understand the agent's behavior.
The Live Test panel, positioned as the fixed chat panel in the right column of the two-pane layout, serves as an always-on preview where changes feel immediate. This immediate feedback is a high-priority metric. Non-technical users need to see the direct result of their configuration changes instantly to build confidence and understand the agent's behavior.
Live test prototype
Version control -> preview
Version control -> preview
Version control -> preview
Preview section of version control is essential for providing safety, transparency, and confidence during the agent management process.
The primary audience is largely non-technical and building an agent for the first time. They need assurance that configuration changes won't break a functional agent. By mandating that the version history provides a Preview in chat action, the redesign allows users to test (preview) any historical version or draft without actually deploying it. This promotes experimentation while keeping the successful, launched version secure.
Preview section of version control is essential for providing safety, transparency, and confidence during the agent management process.
The primary audience is largely non-technical and building an agent for the first time. They need assurance that configuration changes won't break a functional agent. By mandating that the version history provides a Preview in chat action, the redesign allows users to test (preview) any historical version or draft without actually deploying it. This promotes experimentation while keeping the successful, launched version secure.
Version control -> preview prototype
Version control -> compare
Version control -> compare
Version control -> compare
Non-technical users, who are often building an agent for the first time, need a clear and straightforward way to know exactly what was changed between different configurations (Drafts or Launched states). The inclusion of the Compare action allows the user to easily view the differences (the "diffs") between two versions. This prevents confusion and ensures they understand the impact of previous edits.
Non-technical users, who are often building an agent for the first time, need a clear and straightforward way to know exactly what was changed between different configurations (Drafts or Launched states). The inclusion of the Compare action allows the user to easily view the differences (the "diffs") between two versions. This prevents confusion and ensures they understand the impact of previous edits.
Version control -> compare prototype
Version control -> restore
Version control -> restore
Version control -> restore
The principle that "Undo / restore is always available" is a fundamental requirement and a critical metric . For non-technical users who are often building an agent for the first time, the Restore function acts as the ultimate safety net, allowing them to confidently experiment with changes without fear of permanently damaging a stable, "Launched" agent version.
The principle that "Undo / restore is always available" is a fundamental requirement and a critical metric . For non-technical users who are often building an agent for the first time, the Restore function acts as the ultimate safety net, allowing them to confidently experiment with changes without fear of permanently damaging a stable, "Launched" agent version.
Version control -> restore prototype
Version control -> launch
Version control -> launch
Version control -> launch
The importance of redesigning the Launch section of version control to be intuitive for non-technical users is essential for completing the agent creation workflow safely and providing positive, immediate feedback.
The Launch action marks the final, successful step in the configuration process. Launching creates a new version in the history timeline, clearly communicating that the agent is now live and ready to convert conversations into sales 24/7.
The importance of redesigning the Launch section of version control to be intuitive for non-technical users is essential for completing the agent creation workflow safely and providing positive, immediate feedback.
The Launch action marks the final, successful step in the configuration process. Launching creates a new version in the history timeline, clearly communicating that the agent is now live and ready to convert conversations into sales 24/7.
Version control -> launch prototype
Design System
Design System
Design System
Here are the components that made up the design systems used in this project.
Here are the components that made up the design systems used in this project.
Design system
Design system
Key Takeaways
Key Takeaways
The redesign reimagined how Lua’s AI agents are created and managed, turning what once felt like configuring complex software into an experience more like onboarding a helpful teammate—especially for non-technical users. This was made possible through a two-pane Agent Builder with a constant live preview and a strict commitment to plain, jargon-free language.
Thoughtful features such as smart defaults and presets for quick setup, an auto-reset chat that instantly reflects major updates, and an easy-to-use version history with Preview, Compare, and Restore options create a smooth and secure workflow. The result is a highly intuitive builder that empowers any business to quickly launch AI sales, support, and booking agents that communicate seamlessly in their brand voice.
The redesign reimagined how Lua’s AI agents are created and managed, turning what once felt like configuring complex software into an experience more like onboarding a helpful teammate—especially for non-technical users. This was made possible through a two-pane Agent Builder with a constant live preview and a strict commitment to plain, jargon-free language.
Thoughtful features such as smart defaults and presets for quick setup, an auto-reset chat that instantly reflects major updates, and an easy-to-use version history with Preview, Compare, and Restore options create a smooth and secure workflow. The result is a highly intuitive builder that empowers any business to quickly launch AI sales, support, and booking agents that communicate seamlessly in their brand voice.
