top of page

AI Agent

tags.png

AI Agent is a conversational AI assistant in the B12 platform that helps users manage and optimize their websites through simple, natural language commands. Acting as both a tactical co-pilot and strategic advisor, it simplifies the editor experience by turning user intent into actionable results.

Organization:

B12

Role:

Product Designer

Team:

Cross-functional (Design, Engineering, Product, AI)

AIAgent.png

Overview

B12’s website editor is powerful but can feel overwhelming for users. The AI Agent is a conversational co-pilot that allows users to make both tactical and strategic updates to their websites via chat. It bridges the gap between high-level requests (“What content should I publish?”) and low-level interface actions (“Add a page, change the style”)

AI Agent_mobile.png

Problem

32-archery-target 1.png

The B12 editor is feature-rich but complex; users often don’t know the exact steps to achieve their goals.


Group.png

Users sometimes want strategic guidance, not just tactical actions.

Layer 2.png

Current workflows require switching between multiple tools (e.g., opening GPT outside the editor), creating friction.

Example user pain points:

Group 9.png
Group 12.png
Group 11.png

Solution

AI Agent: A chat-based co-pilot that:

  • Provides tactical help: executing direct commands like “Add page X” or “Change my style.”

  • Provides strategic advice: helping with content calendars, conversion optimization, or site improvements.

  • Integrates seamlessly into the existing B12 editor, supporting website editing and other sections (domains, payments, plans).


Return - desktop.png

Key features

Group 17.png

Single-chat-per-project paradigm (Each website has its own chat, so the interface stays clean and simple.).

Group 19.png

Suggestions for next steps after initial actions (e.g., “Try adding a page” or “Update your images”) to reduce user frustration.

Group 18.png

Conversational guidance continues from GPT or signup flows.

Design Process

Research → Ideation → Wireframes → Prototype → Testing

Research & Insights

  • User interviews revealed users often start with high-level intentions rather than interface-level tasks.

  • Observed users opening GPT externally to try modifying their sites—highlighted a need for integrated AI assistance.

Chat - examples.png

Wireframes & Prototypes

  • Mid-fidelity wireframes of chat interface within the left pane and mobile sizing.

  • Prototyped chat interactions showing:

    • User request (“Can you make the site more modern…”)

    • System reply (strategic advice + tactical execution)

    • Suggested next steps for ongoing edits

Outcome

Business Impact

  1. Users no longer need to leave the editor to interact with AI.

  2. Reduced friction for new users learning the editor.

  3. Positive feedback from beta testing:

    • “It feels like the AI is my co-pilot, not just a tool.”

    • “I like that it gives suggestions instead of just doing everything for me.”

​

Reflections​​

​

By keeping AI interactions simple and contextual, adoption becomes more natural. Users value guidance that blends advice with actionable execution. A single-chat-per-project approach keeps the experience lightweight today, while leaving room to evolve as multi-project workflows expand.

bottom of page