UX Discovery/Planning for new setting pages

[ryanwelcher]

With our new roadmap to allow multiple Providers and Services ( see #28 ), we will need to review the current settings screen to be able to show multiple Providers, their Services and the individual Service settings.

[helen]

I did some reviewing and work on this in #37, will be starting a branch/draft PR for image captioning via another service shortly so that will probably address this.

[jeffpaul]

I've sent a visual brief to @chriswallace on this topic to get some help on UX for better set up process and selecting service providers, so I'm going to punt this to Future Release as well as the related #81 that will force us into this scenario where we have multiple service providers for the same functionality (in that case Watson and Azure for Language Processing).

[jeffpaul]

I'm punting this issue as it's mainly relevant when we introduce an additional service provider within an existing feature. So once we get to that point we'll look to finish up and handle this work.

[jeffpaul]

Example NUX flows from Site Kit:

[jeffpaul]

Example NUX flows from WooCommerce:

[jeffpaul]

Figma with previous NUX work.

Updates to make to the Figma: 1.) Add a post-activation notification like SiteKit_1 using existing ClassifAI assets: https://www.figma.com/file/UhNcRXul3aYX2SWHd1EtZro8/ClassifAI?node-id=240%3A52&t=hy8OxtMyNUYH3QTq-0 2.) Hide the FAQs section behind a (?) Help item like on the SiteKit_2 and Woo_6 screenshots 3.) Remove the “ClassifAI has been successfully installed” admin notice from Figma and replace that top section with a similar header from the SiteKit_2 and Woo_6 screenshots 4.) Add a “Settings” icon+link to the left of the (?) Help item that would display the ClassifAI Registration, Language Processing, and Image Processing detailed settings tabs. On the detailed settings tab view (that will still include the ClassifAI header menu), the “Settings” icon+link should be replaced with a “Set Up” icon_link that would redirect back to showing this New User Experience flow. 5.) Remove the person+puzzle image from the Figma as it detracts from the focus of the settings flow and is not really ClassifAI-related 6.) Label 3 step flow as: Enable Features, Register ClassifAI, Access AI. This will be similar to the Woo_1 flow but under the ClassifAI header from Step 3 above. 7.) After the 3 step set up flow, can finish with some sort of “Welcome to ClassifAI” summary of what’s been set up with a primary action button “Done” that redirects to the WP Admin Dashboard and a secondary action link to “Adjust ClassifAI settings” that redirects to the detailed settings page showing the ClassifAI Registration, Language Processing, and Image Processing detailed settings tabs. 8.) Show the “ClassifAI” WP Admin menu item underneath “Settings” instead of “Tools”. 9.) The (?) Help content can render the content from https://github.com/10up/classifai#table-of-contents as well as a primary action button “Report issue / enhancement / get help” that directs to https://github.com/10up/classifai/issues/new/choose