Back to PortfolioAngie AI Integration
Leading the design for how Elementor's AI assistant integrates across a multi-surface editor and three account tiers, without disrupting the flow of the millions of users building pages inside it.
Angie is Elementor's in-editor AI assistant, and I led the design for how it integrates across the editor and three account tiers. By weaving it contextually into the existing flow instead of bolting on a chatbot, it reached more than 80,000 installs, lifted task completion by 30%, and measurably shifted how users perceive the value of AI inside the editor.
Introduction
Angie is Elementor's native AI assistant, and I led the design for how it integrates into the V4 editor, a product that powers a meaningful slice of the entire web. The work spanned the full editor surface, the Top Bar, the Widget Panel, and Search, across three commercial tiers: Core, Pro, and One.
The strategic bet was simple: an assistant is only worth building if people actually reach for it mid-task. So this was never about bolting a chatbot onto the product. I owned the harder question of how AI earns a place inside an expert tool, surfacing in the right context, offering the right capability per tier, and never interrupting someone in the middle of building a page. I partnered closely with product and engineering to turn that principle into a coherent, shippable interaction model.
Impact
installs of Angie since launching it in the Editor
lift in task completion rate after embedding Angie contextually
shift in perceived value of in-editor AI after embedding Angie contextually
Goals
- Define a clear strategy for where Angie appears across the editor and what it offers at each touch point
- Design consistent entry points across the Top Bar, Widget Panel, and Search, each fitting its own context
- Balance tier differentiation with monetization, gating capability across Core, Pro, and One in a way that drives upgrades without feeling punitive
- Lower the discovery barrier so AI feels findable, not hidden behind a separate mode
- Fit the AI interaction model into the editor's existing panel architecture rather than fighting it
My Role
As the product designer leading this initiative, I owned it end to end:
1. Strategy and flow mapping: defined where Angie should live and mapped every user flow across all three tiers and touch points into one interaction matrix, giving the team a single source of truth
2. Entry-point design: designed the Angie experience in the Top Bar, Widget Panel, and Search, including the empty, loading, and error states that make or break an AI feature
3. Tier and monetization UX: shaped how capability and upsell work across Core, Pro, and One, partnering with product to communicate value without creating friction
4. Cross-functional handoff: drove alignment with engineering and delivered fully annotated specs, built on our design system, with edge cases and copy resolved up front
Problem Statement
AI assistants in creative tools often fail in the same way: they are powerful in isolation but awkward in context. You leave your workflow to invoke the AI, do something, then return, and the break disrupts the creative state.
The challenge with Angie was integration without interruption. The V4 editor is a complex, panel-driven environment where users are in a focused building mode. Angie needed to fit inside that mode: appearing when useful, staying out of the way when not, and never making someone feel like they have to learn a second product to use the first.
Turning that principle into concrete, shippable decisions, where Angie lives, how it behaves at each tier, and how it fails gracefully, was the core of my work.
Multi-Surface Entry Points
Angie surfaces at three editor touch points, each with a distinct use case:
Top Bar: the primary access point for open-ended AI tasks: generating content, suggesting layouts, asking questions about the page
Widget Panel: contextual Angie suggestions that appear when a user is browsing or selecting widgets, lowering the discovery barrier
Search: Angie-enhanced search results that blend traditional widget results with AI-generated suggestions
Each entry point needed its own interaction model, empty state, and loading treatment, all built on the editor's shared design system so the AI feels native rather than bolted on.
Account-Tier Capability Matrix
Angie's capabilities vary by account type, and presenting that clearly, without turning the editor into a feature-matrix sales page, was one of the core design challenges.
My solution was to show Angie's full surface to everyone but gate specific actions at the point of use, with contextual copy that explains the value rather than just the restriction. Core users see what Angie can do; the gate only appears when they reach for it.
That was a deliberate tradeoff. Showing locked capability risks frustration, but hiding it kills both discovery and the upgrade path. Revealing value and gating at the moment of intent was the balance that served users and the business at the same time.
Future Features
Contextual Awareness
Expand Angie's context window to include the active page structure, enabling AI suggestions that are specific to what the user is currently building
Conversation History
Add persistent Angie conversation history within a session so users can reference or re-apply previous AI interactions
One-Click Apply
Design a direct "apply to page" flow for Angie-generated layout and content suggestions, reducing the friction from suggestion to implementation
