{"id":24,"date":"2025-12-19T02:30:20","date_gmt":"2025-12-19T02:30:20","guid":{"rendered":"https:\/\/delandabarbosa.com\/eng\/?post_type=jetpack-portfolio&p=24"},"modified":"2026-04-16T04:54:12","modified_gmt":"2026-04-16T04:54:12","slug":"nobotz-ai","status":"publish","type":"jetpack-portfolio","link":"https:\/\/delandabarbosa.com\/eng\/portfolio\/nobotz-ai\/","title":{"rendered":"NoBotz AI"},"content":{"rendered":"\n
\n
\n
\n

NoBotz AI<\/h1>\n Enterprise AI-powered customer support platform, designed from scratch based on 3 weeks of observation with real support teams. Seamless handoff, real-time monitoring, and continuous AI training.\n
\nRole:<\/b> UX\/UI Designer
\nPlatform:<\/b> Web App
\nScope:<\/b> End-to-end UX\/UI, information architecture, handoff and monitoring flows, design system, interactive prototype<\/span>\n
<\/div>\n <\/div>\n \n <\/div>\n<\/section>\n\n\n\n
\n
\n The Challenge<\/b>
\nBefore any wireframes, I spent 3 weeks with the support team at ControleNaMao \u2014 the platform\u2019s pilot client. I identified an operational design problem: existing tools did not reflect how support work actually happens.\n\nEvery design decision in NoBotz AI was grounded in this research. The information architecture, handoff flow, and priority system all derive from friction points observed in the field, not assumptions about how the product should work.

\nArchitecture & Flows – <\/b>designed around real workflows. The platform architecture was defined by the three user roles identified in the research (agent, manager, and AI training owner), with a central hub (Conversations) serving as the entry point for all.\n <\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
\n UX and UI Decisions<\/b>
\nEach design decision was validated against research findings. When a friction point was observed in the field, there was a corresponding design decision.
\nUX – <\/b> AI summary + 30-day history before handoff: when opening a conversation for a potential handoff, the agent sees a side panel with three blocks: an AI-generated summary of what has been discussed, a 30-day interaction history (collapsed by date), and the reason the conversation was flagged. The decision to take over or not happens with full context, without reading the chat line by line.
\nSingle action button at the top: the \u201cTake over conversation\u201d button is positioned at the top of the chat screen, always visible regardless of scroll. A single click transfers control: the avatar changes from orange (AI) to the agent\u2019s photo, the status in the list changes from green to blue, and a system note appears in the chat indicating the transfer.\n <\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
\n UI – <\/b>
\nDark mode is not a preference: support teams monitor conversations in 8\u201312 hour shifts, including nighttime periods. Light interfaces in dark environments cause documented visual fatigue. All element contrast was implemented according to WCAG AA standards.
\n\nAlways-visible company selector: for operations managing multiple clients (agencies, BPOs), the company selector is placed in the top bar with the active client name highlighted. Switching clients takes less than 2 seconds and does not require a full reload. The active company is always visible, eliminating errors caused by responding to the wrong client due to lack of session context.\n <\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
\n \n<\/div>\n<\/div>\n\n\n\n
\n
\n System –<\/b> Product team trains the AI directly, without involving engineering: the Training module is a WYSIWYG interface for the AI knowledge base. Each entry includes: the question or intent (editable), the AI\u2019s current response (inline editable), the confidence score from the last inference (0\u2013100%), and the number of times it was used in the month.\n\nThe product owner edits a response, saves it, and the AI starts using the updated content in the next conversation \u2014 no code, no engineering tickets required.
\n <\/div><\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n Results<\/b>
\n Enterprise platform designed from scratch, grounded in field research. Every design decision has a corresponding observed friction point \u2014 documented and justified in the process.
\n6<\/b> modules designed from scratch \u2014 Conversations, Questions, Training, Reports, Intelligences, Team.
\n3<\/b> – weeks \u2014 field research with real support teams before any wireframes.
\n2<\/b> native themes \u2014 light as default, dark as alternative, both with a complete semantic palette.
\n0<\/b> design decisions without research justification \u2014 every element addresses a mapped friction point.\n <\/div><\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
<\/div>\n\n\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

NoBotz AI Enterprise AI-powered customer support platform, designed from scratch based on 3 weeks of observation with real support teams. Seamless handoff, real-time monitoring, and continuous AI training. Role: UX\/UI Designer Platform: Web App Scope: End-to-end UX\/UI, information architecture, handoff and monitoring flows, design system, interactive prototype The Challenge Before any wireframes, I spent 3 […]<\/p>\n","protected":false},"author":1,"featured_media":25,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"jetpack-portfolio-type":[],"jetpack-portfolio-tag":[],"class_list":["post-24","jetpack-portfolio","type-jetpack-portfolio","status-publish","format-standard","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio"}],"about":[{"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/types\/jetpack-portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":7,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio\/24\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio\/24\/revisions\/78"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/media\/25"}],"wp:attachment":[{"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"jetpack-portfolio-type","embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio-type?post=24"},{"taxonomy":"jetpack-portfolio-tag","embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio-tag?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}