#### Background
This task is not meant to serve as the final design of the image recommendations features. The designs in this task is intended to demonstrate the flow and actions that will be included in the Android team's implementation of Image Recommendations.
#### Task
- [ ] @scblr Create a Figma file and link it to this task with screens that show what happens when users interact with actions that align with the requirements below
- [ ] Engineer - review screens and add any questions or possible constraints to consider on the task
- [ ] Engineer- Add subtask to epic for screens that can start being built now based on wireframes
#### Requirements
- Entry point from Suggested Edits Screen (must be below Article Descriptions)
- Two caption variants (one as an optional screen after a user publishes an image and one as a button users can click on the preview screen to enter caption flow)
- A way for users to report the feature that sends them to the support email
- Access to the FAQ page
- A warning screen that appears when a user has spent less than 5s evaluating a task before hitting publish
- Onboarding screens or tooltips
- Ability to read the full article and go back to publish
- Inability to "skip" only options for Yes, no, not sure
- Ability to read image metadata
- Affordance for expanding an image
- Screen for users running out of tasks
- Preview the image in the context of the article before publishing (not a requirement for it to be in the editor)
- Watchlist expiry option
#### Designs ([Figma](https://www.figma.com/file/OUC0Pql9nA4tRsDBY29Un8/add-images-2023?type=design&node-id=187-15818&t=7qSqyJAwmmS8POIz-4))
| 1) Discovery {F37103407} | 2) Home {F37103458} | 3) Onboarding {F37103411} | 4) Tooltip 1/3 {F37103413} | 5) Tooltip 2/3 {F37103415} | 6) Tooltip 3/3 {F37103418} | 7) Feed {F37103420} | 8) Warning snackbar {F37103422} | 9) Overflow menu {F37103424} | 10) Sheet collapsed {F37103426} | 11) Image details {F37103428} | 12) File page {F37103430} | 13) Image detail active {F37103434} | 14) Image detail filled {F37103436} | 15) Preview {F37103438} | 16) Edit summary {F37103440} | 17) Edit summary active {F37103442} | 18) Edit summary loading {F37103446} | 19) Next suggestion {F37103448}
**1) Discovery:** A tooltip points to the Edits tab. Shown in the next session after the "Did you know everyone can edit Wikipedia?" tooltip.
**2) Home:**
- The "Article Images" task is added after "Article descriptions" in "Suggested edits" home
- A "New" indicator on the first launch that the task’s been newly added
**3) Onboarding:** A full-screen onboarding slide informs users about the task at hand
**4) - 6) Tooltips:**
- Contextual tooltips onboard the user to the task
- Ideally, the suggestion at the bottom already starts loading so it’s ready to be displayed once users taps "Next" in the first tooltip
- The first to two tooltips ideally use "Next" to show the next tooltips and the last one should use "Got it" as a call to action
- A number indicator shows how many tooltips are coming at the bottom right (can be hardcoded)
**7) Feed**
- Design is similar to what’s been implemented for the previous "Train image algorithm" task, but uses the updated components
- Image can directly be zoomed (Instagram style)
- Tapping the card takes users to the file page (shown in 12)
- Filename, file description, and suggestion reason should all be *truncated* after two lines to not take up too much space
- "Not sure" triggers a dialog with the same options as in the current Growth implementation
**8) Warning snackbar:** A warning snackbar appears if users spent less than 5s evaluating a task before hitting publish
**9) More menu:**
- "Tutorial" triggers take users back to screen 3
- "Learn more" takes users to the Suggested edits [FAQ page](https://www.mediawiki.org/wiki/Wikimedia_Apps/Suggested_edits) (which needs to be updated)
- The tooltips are triggered (4-6) within the context of the current suggestion, to make it easier for the user to understand what to do
**10) Sheet collapsed:** Collapsed state when the bottom sheet is pulled down (exact design can be evaluated during implementation)
**11) Image details:**
- This view is used to add an image via Wikitext editor. Make sure to also update the view within Wikitext editing
- It’s using new components so it looks more consistent
- Tapping the file information card at the top leads to the file page (screen 12)
- It is possible to tap "Continue" without providing an image caption and alt text (secondary call to action)
**12) File page:** This is the existing file page. No changes are needed currently.
**13) - 14) Image details active + filled:**
Once both fields are filled, the "Continue" button at the top turns into a primary call to action
**15) Preview screen:** Should look more or less like this. Depends on what’s possible from the engineering side.
**16) - 17) Edit summary:**
- Is also optional (similar to image details), but we don’t encourage empty summaries by using a secondary call to action in the empty state.
- This screen is also used already within Wikitext editing
**18) Loading state:** Uses the top progress indicator
**19) Next suggestion:**
- Shown after the previous edit is published
- Snackbar confirms that the edit is published
- View takes users to the Diff page
- Snackbar is shown above Yes, No, Not sure buttons
#### Todos
- [x] What happens when tapping the card in "Add image details"? [Bottom sheet vs. detail page] (RS)
- [ ] New indicator for the task (RS)
- [ ] "Not sure" dialog (RS)
- [ ] Create copy spreadsheet (JT, RS)
- [ ] Review Commons File Page (RS)
- [ ] Info to provide a caption in the context of the article [per RH’s input] (RS)
- [ ] Update FAQ page (JT, AR, RS)
- [ ] What is the article experience? (RS)
- [ ] What do we do with the image caption task in the article? (RS)