[Integrations][Design] Make add agent step more obvious

[mostlyjason]

A critical step when adding an integration is to add an elastic agent in order to send data to Elastic. However, our analytics show that many users are missing this step. We'd like to make this step more obvious to help users successfully send add an agent.

When a user adds an integration to an agent policy with no agents we show a toast message in the lower right that prompts the user to add an agent. Only 5% of users who add an integration click on the link to open the add agent flyout.

The toast message below is not obvious and it disappears after a few seconds:

One possibility is to make the add agent step a full page instead of just a toast message. After a user saves an integration, we could show a full page with instructions on how to add an agent. We could then direct users to the next step, which is viewing the assets like dashboards to visualize their data.

Another requirement is to be able to track clicks on this button in FullStory. This requires using a CSS select or button text that is unique.

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[hop-dev]

If we were sticking with a toast we do have the option to make the button more prominent (see "Success" here )

another option would be a success flyout?

[mostlyjason]

@hop-dev good idea to discuss the available options!

A toast message that is more prominent and sticks around longer could be an option. It still has the disadvantage of being less obvious in the lower right corner of the screen. Also, a toast typically is not a primary call to action. We could consider it if we don't have capacity for better options.

Another option is to show the add agent flyout opened up by default. That is much more prominent, but its still competing with calls to action on the background page. Also, would it be unexpected that clicking a button to save an integration takes you to another page with a flyout open?

A success modal is another option and it could be front and center and remain open until dismissed. Could it also contain the instructions to add an agent? The instructions are long and I haven't seen scrolling modals very often. Another disadvantage is that the background elements may be distracting.

Adding a full page step for adding an agent avoids distractions and provides scrolling for the instructions. I'm worried it would require more development effort though.

[mostlyjason]

@jen-huang I discussed this with @mukeshelastic yesterday and we'd like to determine if there is a small adjustment we can get into 7.16, potentially leaving bigger changes for a future release? The goal is increase the percentage of users who see the prompt to add an agent. I listed several options above but could you evaluate them from a development effort perspective? If any are less feasible from a capacity perspective, that could provide guidance to Dmitry.

@dborodyansky could we add this to your list of design tasks after unified integrations?

[mukeshelastic]

@mostlyjason thanks for raising it here.. Let's work with Dmitry in exploring couple options to not miss the add agent part and then Jen and team can evaluate the cost and then we can work together to see if we need to drop anything from existing 7.16 items to support this.

[dborodyansky]

Thank you @mukeshelastic and @mostlyjason. I will prioritize this design effort to follow Unified Integrations.

[mostlyjason]

@jen-huang adding this a requirement in 7.16 as part of the larger empty state effort #111374. I'm hoping we can identify a better short term solution for 7.16.

[dborodyansky]

Proposed design and rationale document ready for review and feedback.

[mukeshelastic]

@dborodyansky delighted to see very thorough idea exploration on this very imp topic. Kudos!

+1 on add agent modal in the initial flow and add agent button prominently when no agents are detected on integration policy screen.

Also +1 to prioritizing the post 7.16 flow in subsequent releases.

Thank you so much for getting this done in such a short time and thoroughly.

[mostlyjason]

Dmitry and I met during the design sync and we decided to move forward with option A.

[jen-huang]

Thank you @dborodyansky and @mostlyjason for driving a decision here for 7.16. The proposed option A looks good to me. I have created an implementation issue here and have added it to our planning: #112626

[hop-dev]

Proposed design and rationale document ready for review and feedback.

Hi @dborodyansky I have noticed the add integration button has changed in your design, here it is on 8.0.0 currently:

and here it is in the designs:

is this change part of your design for this issue? or being tracked elsewhere? Thanks

[dborodyansky]

is this change part of your design for this issue? or being tracked elsewhere?

@mostlyjason This button copy revision is something we discussed as a potential enhancement. It still seems like a worthwhile UI clarification. Would you recommend including it as a change along with Agent implementation, or tracking elsewhere?

[mostlyjason]

My worry is the button text will get quite long like "Add Azure Application Insights Metrics Overview Integration". Can we break that into a separate issue so we can validate the user problem and discuss the options in more detail?

[hop-dev]

Created #112947 to track button changes 👍

[hop-dev]

HI @dborodyansky I see we have changed the wording of from "save" to "save and continue" on the add integration page.

I am assuming that we want to keep the edit integration wording as "save" as there are no further steps? Or would you like this to also be changed? Thanks

[dborodyansky]

@hop-dev, Yes, Save and continue if new addition. Save integration if editing existing makes sense.

[hop-dev]

@dborodyansky @mostlyjason Just had a thought! The designs above show the user adding an integration from the integrations view and then being redirected back to that package. A user can also add an integration to an empty policy from the policy view, where they are redirected back to the empty policy:

empty_policy_flow.mp4

Should we have the new modal and the tour tooltip to the add agent dropdown above? Or maybe have a more prominent add agent button on an empty policy?

[dborodyansky]

Great thought @hop-dev. I think we might be able to adapt existing "0 agents" label to a call-to-action. Here is a mockup and a link to more detailed flow.

https://www.figma.com/file/RVYNk5W3gyJdWOGDj8ixPH/Fleet?node-id=1937%3A404594

[dikshachauhan-qasource]

Hi @EricDavisX

We are unable to check out mocks at Figma. Could you please look out and provide us access to validate other UI changes.

Screenshot:

Thanks
QAS

[EricDavisX]

@jen-huang who is the contact for Figma, is it IT or an individual team? Are you able to help with this please?