GenAI Assistant for Enterprise: A UI/UX Case Study

GenAI Assistant for Enterprise

Leading design for an agentic AI chatbot that reduced system setup time by >50%.

Background

Intelligent Assets (IA) is an enterprise SaaS platform created by ClearBlade. Operations teams across industries like agriculture and transportation use it to remotely monitor equipment at scale using IoT sensors.

This project focused on designing a generative AI Assistant to help admins configure their IA systems faster—a process that previously required manually setting up each of the following components from scratch:

Assets — The real-world objects being monitored (e.g. Truck, Engine), which can have several custom Attributes tracked on them (e.g. Speed, Temperature).
Rules — Conditional logic that watches for specific thresholds.
Events — Alerts that trigger when a Rule's conditions are met.

The diagram below illustrates the full admin system setup workflow in IA:

Awards

Winner of the Compass Intelligence "Emerging Tech - AI Chatbot" award

MY ROLE

Lead UX/UI Designer

(Planned & co-executed all design tasks; managed stakeholder relationships)

TOOLS

Figma, Figjam, Figma AI, ChatGPT, Jira, Confluence, Slack, Google Suite, Heurio

TEAM

1 Junior UX/UI Designer
1 AI Full-Stack Engineer
1 AI Back-End Engineer

Timeframe

2 months (Dec 2024–Jan 2025)

The Problem

Before the AI Assistant, setting up a new Intelligent Assets system meant manually creating every component using long settings forms with little in-context guidance. The steep learning curve pushed most customers to rely on ClearBlade's Services Engineers to handle all the setup—costing more time and money, and working against IA's goal of empowering users to manage their own systems.

The Goals

Business Goals: Introduce agentic AI-assisted workflows into IA, strengthening its competitive position in the enterprise IoT market.

Design Goals: Make complex system configuration faster and more intuitive, thereby reducing users' reliance on ClearBlade's support team for commonly occurring workflows within IA.

The Results

The Impact:

Reduced enterprise system configuration task time by >50%.
Received positive feedback from customers and stakeholders.
Won the Compass Intelligence "Emerging Tech – AI Chatbot" award.

The Solution (First MVP):

The new AI Assistant could…

Accept a natural-language prompt and complete the requested task.
Generate Asset Types, Assets, Event Types, and Rules on the user's behalf.
Proactively suggest more relevant settings based on the user's prompt–reducing both setup time and mental load.
Answer questions about how Intelligent Assets works.

See the design process below

Before & After

Phase 1

Discover

Project Kickoff: How It All Started

When the design team was brought in, the AI engineering team had already started building a working chatbot prototype (using React Chatbot) in parallel with training the LLM (Large Language Model). Since ClearBlade planned to release a public Beta MVP of this feature within just 6 weeks, we realized there wouldn't be time to do in-depth discovery and research, or to reconsider whether a chat interface was actually the best choice for our users' needs.

Thus, I shifted the design team's focus to:

Assessing what was already built.
Identifying the current usability gaps.
Improving the experience within the constraints of the existing component framework.

Project Kickoff: How It All Started

Thus, I shifted the design team's focus to:

Assessing what was already built.
Identifying the current usability gaps.
Improving the experience within the constraints of the existing component framework.

Auditing the Existing UI

One of our first steps was performing a full heuristic evaluation of the AI chatbot prototype that had already been built:

We assessed what was working already, and what opportunities there were for improvement.
We cross-referenced this with secondary research on best practices in conversational AI interface design.
We also asked the dev team questions about how the LLM worked, and what the full capabilities and constraints were of the React Chatbot component they were using.

Key Issues We Identified:

01.

Overly technical language: Messages like loading states read like developer logs (e.g., "Fetching Details").

01.

Overly technical language: Messages like loading states read like developer logs (e.g., "Fetching Details").

02.

Layout Issues: Message bubbles too wide; bot responses are right-aligned like user messages, user input field is only 1 line.

02.

Layout Issues: Message bubbles too wide; bot responses are right-aligned like user messages, user input field is only 1 line.

03.

Lack of in-conversation guidance to help users know what to say or do next to finish generating items.

03.

Lack of in-conversation guidance to help users know what to say or do next to finish generating items.

Phase 2

Define

Our Core Users

Drawing from our existing repository of user and stakeholder interviews, my junior designer and I defined three primary user archetypes for Intelligent Assets:

Greg, The Manager — A business operative who remotely directs on-site teams when things go wrong.
Tina, The Technician — An on-site maintainer and subject-matter expert, and IA's primary power user.
Marcus, The Customer Support Engineer — A ClearBlade Services Engineer who helps customers set up their systems.

Since our AI Assistant MVP's scope centered on just admin system setup tasks for now, we prioritized Greg as our primary user, while still keeping Tina's and Marcus's needs in mind to account for future feature additions.

Mapping the Current User Journeys

Next, we mapped the current end-to-end experience of setting up and using an IA system, with each stage showing the actions, friction-points, and emotional states of all three of IA's core personas.

Why this mattered:

Presenting this journey map to stakeholders at our cross-team design review helped us align the larger team on where our users' current friction points were, and what we could deliver within the new AI Assistant to help close those gaps.

Phase 3

Ideate

Iterating With the Team

Getting to our final design required many rounds of exploration and refinement. My junior designer and I considered multiple ideas for each workflow, weighing the tradeoffs before deciding on our strongest concepts. Throughout this process, we relied on regular cross-team input to help guide our designs:

Cross-team design reviews — Monthly meetings where we presented our strongest concepts to a cross-disciplinary audience (sales, services, and C-suite) for feedback and direction.
Services team consults — Outside of reviews, we messaged our customer-facing teammates for additional insights on our users' needs and priorities.
Engineering check-ins — We regularly synced with the developers to ensure our latest iterations were aligned with their ongoing work on the LLM.

UI Copy Flowcharts

Not all of the AI Assistant's messages were fully AI-generated. There were many points where we had direct control over how the chatbot would communicate with users.

Given how much these scripted messages shaped the overall user experience, our design team crafted a complete conversation flowchart, which detailed:

What the AI assistant should say at each step.
Which quick-select options to show at certain decision-points.
How the assistant should respond to specific user-inputted keywords or selections.

Creating this UI copy flowchart required close, ongoing collaboration with the AI engineers to ensure the scripts made sense within the larger context of the LLM's AI-generated messages.

Mockups & Prototyping

Following several rounds of ideation, team feedback, and revisions, we prepared our final high-fidelity mockups and clickable prototypes, using Figma to contain all of our deliverables:

Our components were built on top of IA's existing Material UI design system, as well as the React Chatbot component library.
Our prototypes covered all the core MVP workflows, and served multiple functions: they were an effective tool for communicating our concepts at cross-team design reviews, and also worked as interactive references in our final design handoffs for the dev team.

Phase 4

Deliver

Dev Handoff & Post-Dev Q.A. Review

Since the AI engineering team had less front-end UI experience than the developers we typically worked with, we made a point to be especially thorough in our design handoff and documentation.

The design handoff:
1. Detailed Figma annotations that covered Material UI component usage, typography and color guidance, responsive layout & behavior, and interaction states.
2. A Confluence master document with all handoff materials, including links to each section of our Figma mockups.
3. A handoff meeting with the dev team to walk them through our handoff deliverables.
The Post-Dev Q.A.:
1. After development wrapped up, we conducted a post-implementation audit using Heurio to document and prioritize final design revisions for the engineers.

Click to Expand

Conclusion

What I Would Do Differently Now

In retrospect, the biggest opportunity we missed was getting to be involved earlier, before the engineers started building the LLM and the interface.

With more upfront user research, we might have discovered that users actually wanted the AI to do other things for them in Intelligent Assets, such as generating KPI summaries or event reports.
Nevertheless, this project was a good reminder that enterprise UX rarely happens in ideal conditions. Being able to design within real-world constraints–and still managing to deliver a product that helps solve the users' problems is an essential skill for a designer.

What I Would Do Differently Now

In retrospect, the biggest opportunity we missed was getting to be involved earlier, before the engineers started building the LLM and the interface.

With more upfront user research, we might have discovered that users actually wanted the AI to do other things for them in Intelligent Assets, such as generating KPI summaries or event reports.
Nevertheless, this project was a good reminder that enterprise UX rarely happens in ideal conditions. Being able to design within real-world constraints–and still managing to deliver a product that helps solve the users' problems is an essential skill for a designer.

The Final Design Solution: Key Features

The final AI Assistant addressed all the main issues we had identified in our initial audit, as well as all the core business requirements for the MVP:

Introduced quick-select chip buttons at key steps – This guided users through prompting without leaving them to figure it out on their own.
Edge cases and error states fully designed – the assistant responds gracefully when things don't go as expected.
Redesigned post-generation summary layouts – After it finished generating the user's requested system components, the AI would now show a clearer, easier-to-scan hyperlinked list of the generated items to the user.
Renamed from "AI Bot" → "AI Assistant" – Reframing it as a human-centered collaborator rather than an automated tool.

The Final Design Solution: Key Features

The final AI Assistant addressed all the main issues we had identified in our initial audit, as well as all the core business requirements for the MVP:

Introduced quick-select chip buttons at key steps – This guided users through prompting without leaving them to figure it out on their own.
Edge cases and error states fully designed – the assistant responds gracefully when things don't go as expected.
Redesigned post-generation summary layouts – After it finished generating the user's requested system components, the AI would now show a clearer, easier-to-scan hyperlinked list of the generated items to the user.
Renamed from "AI Bot" → "AI Assistant" – Reframing it as a human-centered collaborator rather than an automated tool.