Improvements in Connectors and AI flow

[fcoveram]

What problem does this address?

Expanding on the problem stated in #428, @jeffpaul and I discussed making the UI more self-explanatory and improving some existing elements in the flow to avoid dead ends and user frustration for those who want to install AI and use it on their site easily.

What is your proposed solution?

connectors.and.ai.page.mp4

The recording above explains the changes in context, but here is a list per page:

Connectors page

• After installing the AI plugin, the banner changes to the new Notice in intent: neutral
• After installing a Connector and going to AI pages from the Notice component, the Connectors page doesn’t show the Notice anymore.

AI page

• When there is no Connector. A Notice intention: error element is visible with a primary action to the Connectors page.
• When there is at least one Connector, all features are enabled by default
• Highlighted feature
  • Image height is smaller
  • Enable/disable uses ToggleControl to keep consistency with the rest of controls
• Toggle label in General settings changes from "Enable AI" to "Enable all AI features and experiments"

Design: Figma file in dev mode

What do you think of this? cc @shaunandrews

[jeffpaul]

@jorgefilipecosta - I know you and I have discussed the flow between the Connectors and AI settings pages a good bit, I'm curious for your thoughts and input here (before we take action on updating either page)?

[jeffpaul]

@fcoveram thanks for the time and effort here, much appreciated! I like the iteration on the image used for the Imagen feature, making it look like its being generated / filled in by AI feels like a solid upgrade to the current image. Perhaps the far right side could have transparent / missing background, perhaps the far left side that's generating could make use of the pink hues from the AI plugin banner?

@shaunandrews as pinged in the issue description, I'd be curious for your input here as well given your design work on the Connectors page so far.

[jorgefilipecosta]

@jorgefilipecosta - I know you and I have discussed the flow between the Connectors and AI settings pages a good bit, I'm curious for your thoughts and input here (before we take action on updating either page)?

Seems like a good direction, I would prefer to have some feature enabled by default but if we don't follow that path this flow provides a good balance.

[jeffpaul]

I had a call with @karmatosed today to talk through the overall goal of going from WP 7.0 upgrade/install about page, to the Connectors page, to having a configured connector, ... waves hands at jump here ..., to a user playing with (meaning using and enjoying) AI functionality.

As an addition to what @fcoveram notes in this issue, one option that came from this was potentially enabling at least the Imagen Feature from a button press on the Connectors page (ensuring the label/copy is clear that will happen) and then taking them to the Generate Image sub-menu within the Media top level menu with a prompt prefilled (e.g. "generate a custom Wapuu for my site") and allowing a user to click generate + refine from there. After that point if we want to try and bring that user back to the AI settings page so they can explore other Features/Experiments, ok, but feels like we've at least achieved some of our goal in doing this.

[fcoveram]

I like the iteration on the image used for the Imagen feature (…) Perhaps the far right side could have transparent / missing background, perhaps the far left side that's generating could make use of the pink hues from the AI plugin banner.

Pink color might look too distracting and plugin-related when we want to highlight this specific feature. But I will try other options that communicate the idea better.

Regarding the flow to highlight the image generation feature, an acciont in the Connectors page feels out of context. Maybe we can try a more appealing label and change the "Control AI features" to say "Explore AI capabilities" and add the button taking to the modal with the Wapuu prefilled text below the toggle within the same card.

Here is a quick mockup for both enabled and disabled variants.

[vishnupprajapat]

AI page

• When there is no Connector. A Notice intention: error element is visible with a primary action to the Connectors page.
• When there is at least one Connector, all features are enabled by default
• Highlighted feature
• Image height is smaller
• Enable/disable uses ToggleControl to keep consistency with the rest of controls
• Toggle label in General settings changes from "Enable AI" to "Enable all AI features and experiments"

While enabling all features by default reduces friction, it might also introduce cognitive overload for new users.

A balanced approach could be:

• Highlighting 1–2 key features (like Imagen) as “recommended starting points”
• Keeping others available but less visually dominant
• Providing contextual guidance instead of exposing everything equally

This way, users are guided instead of overwhelmed.

[DarshitRajyaguru]

One thing that could further improve onboarding is guiding users into a clear “first action” instead of just showing features.
For example, after a connector is set up, we could surface a primary CTA like “Try generating your first image” with a prefilled prompt. This would help users immediately experience value instead of deciding what to do next.
Once that first action is completed, users could be gently directed back to explore other AI capabilities.
This kind of guided entry point could reduce decision fatigue while improving engagement with the features.

In addition to highlighting recommended features, we could also consider progressively revealing functionality based on user interaction.
For example, after a user successfully uses one feature (like image generation), we could surface related or next-step features (e.g., text generation or experiments).
This would allow the interface to stay simple initially while naturally expanding as the user becomes more comfortable.

[fcoveram]

I agree with guiding users to use AI to edit the site, but that message works better after installing a connector than taking the path towards setting controls. IMO, the AI page should be treated as a settings page where the main purpose is understanding the AI-editing capabilities and reaching them quickly, not part of the onboarding.

A success notice after installing a connector that highlights the image generation feature could work. Here is an idea for the whole flow.

Changes explored:

• After installing the AI plugin, the neutral notice suggests installing a Connector and a card shows up at the bottom to keep the link to AI page permanently.
• After installing a Connector, a success message replaces the neutral one and conveys a message to guide users to start using AI and generate an image. The notice element is dismissible.
• If user clicks on the notice's CTA, go to AI from the "manage features" button, or leave the page by going to somewhere else, the success message disappears