After the user selects an "add an image" task from the suggested edits feed, the next thing they will experience is onboarding. Onboarding will contain a combination of overlay and tooltips.

• Overlay
  • The first part of onboarding is a full screen overlay, similar in structure to the onboarding overlays from "add a link" in T269490.
  • To the extent possible, it should be the next thing the user sees after selecting a task. They should not first see the article they selected and then see the onboarding cover it up.
  • The only difference with the "add a link" overlays is that there should not be a stepper with the dots that say "1 of 3", etc.
  • It should have a "Don't show again" checkbox in the lower left. Until the user checks this, the onboarding should show up every time they start a new "add an image" task. When they check it, they should still get the subsequent tooltips, but that will be the last time. This "don't show again" will not apply to other task types, such as "add a link". This "don't show again" will not apply to the separate captions onboarding (see T291715: Add an image: captions onboarding tooltip (PLACEHOLDER)).
  • When the user taps to advance, the overlay should fade to the tooltips over the "add an image" experience.
  • When the user taps the "Skip all" button in the upper right, the overlay should fade straight to the "add an image" experience with no tooltips.
  • Graphic: TBD
  • Header: TBD
  • Body: TBD
• Tooltips
  • After the overlay, the user should proceed through a series of three tooltips.
  • The article and image inspector should load first, and then the first tooltip should fade in.
  • The tooltips should have steppers that say "1 of 3", etc.
  • The tooltips have "X"s in the upper right to close them. When a user closes a tooltip with an "X", they will not see the subsequent tooltips for that task. This does not apply to the captions onboarding (see T291715: Add an image: captions onboarding tooltip (PLACEHOLDER)).
  • When each tooltip is displayed, we want to gray out the parts of the screen that the tooltip is not talking about, so as to make it very clear to the user the element the tooltip is describing. This should be a black overlay with opacity 50%.
  • When tooltips are displayed, the rest of the screen is not interactive, i.e. the buttons to open up image details or select "yes/no/unsure" cannot be tapped.
  • As the user navigates between tooltips, they should crossfade.
  • First tooltip
    • Points to the image thumbnail in the image inspector.
    • Only the image thumbnail is not grayed out.
    • Has an arrow to advance to the next tooltip.
    • Header: TBD
    • Body: TBD
  • Second tooltip
    • Points to the article title.
    • Only the article title and the article body are not grayed out.
    • Has a progressive blue arrow to advance and a gray arrow to go back to the first tooltip.
    • Header: TBD
    • Body: TBD
  • Third tooltip
    • Points to the suggestion reason at the top of the image inspector body.
    • Only the rectangle including the suggestion reason, image thumbnail, and image metadata is not grayed out.
    • Has a progressive checkmark button and a gray arrow to go back to the second tooltip.
    • Header: TBD
    • Body: TBD

Mockups:

NOTE: Refer to Figma for up-to-date detailed redline mocks and specs:
https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task-%5BGrowth%5D?node-id=3018%3A9560