In T232419, there are specifications for a "difficulty overlay", which is a single overlay that users see when they initiate the suggested edits module. Later designs, based on user testing, break the "difficulty overlay" into two separate overlays:
* Intro overlay
* Difficulty overlay
**A note on topic matching**: in v1.0, there will be no topic matching, and so these overlays do not address initial topic selection. But in v1.1, there //will// be topic selection, and that topic selection step will be combined into the //intro overlay//, not the //difficulty overlay//. See [[ https://wikimedia.invisionapp.com/share/FUTVMSLV24X#/screens/383472088 | this mockup ]] for what that will look like.
* **{icon check-square color=green} Intro overlay**: after initiating suggested edits by clicking the call-to-action in the start module, the intro overlay appears on top of the newcomer homepage.
** {icon check-square color=green}The top of the overlay says "1 of 2" along with two dots, with the first one filled in.
** {icon exclamation-triangle color=green} The overlay's header is "Suggested edits to get started".
** {icon check-square color=green}The overlay has two buttons: "Cancel" and "Continue". "Cancel" closes the overlay and the homepage is unchanged from before the user initiated the overlay. "Continue" advances the user to the difficulty overlay.
** {icon check-square color=green} This overlay's content depends on a user's welcome survey responses. All users have a certain set of default content, but if users answered the welcome survey question about "why they created their account", they have additional personalized content.
** {icon check-square color=green} Users with no survey response ([[ https://wikimedia.invisionapp.com/share/FUTVMSLV24X#/screens/387456313 | desktop mockup ]] and [[ https://wikimedia.invisionapp.com/share/2TU9L4HJAKW#/screens/387504696 | mobile mockup ]]):
*** {icon exclamation-triangle color=green} Under the header is a large heart graphic.
*** {icon exclamation-triangle color=green} Then there is a second header that says, "Wikipedia is built by people like you working together."
*** {icon check-square color=green} Then there is a paragraph that says, "Your edits help improve Wikipedia and further the mission to share free knowledge with the world. Continue to start with small suggested edits."
** {icon check-square color=green} Users with survey responses ([[ https://wikimedia.invisionapp.com/share/FUTVMSLV24X#/screens/387456312 | desktop mockup ]] and [[ https://wikimedia.invisionapp.com/share/2TU9L4HJAKW#/screens/387504695 | mobile mockup ]]):
*** {icon check-square color=green} The additional content appears below the default content. The copy for each of these scenarios is listed in [[ https://docs.google.com/spreadsheets/d/1nruwhKmIFWZCCDLlxt-CjR52WTX7AfXOICeeUhIZnEY/edit#gid=1288788984 | this sheet ]], and is keyed to different welcome survey responses as follows:
**** {icon check-square color=green} Users who respond "To fix a typo or error": "Intro overlay subheader 1 typo or error"
**** {icon check-square color=green} Users who respond "To add a photo or image": "Intro overlay subheader 1 image"
***** {icon check-square color=green} This text comes along with a link (as specified in the copy). Below are the specific links for each of our target wikis.
****** [[ https://en.wikipedia.org/wiki/Help:Introduction_to_images_with_VisualEditor/1 | enwiki ]]
****** [[ https://vi.wikipedia.org/wiki/Tr%E1%BB%A3_gi%C3%BAp:H%C3%ACnh_%E1%BA%A3nh | viwiki ]]
****** [[ https://cs.wikipedia.org/wiki/N%C3%A1pov%C4%9Bda:Obr%C3%A1zky_ve_Vizu%C3%A1ln%C3%ADm_editoru | cswiki ]]
****** [[ https://ar.wikipedia.org/wiki/%D9%85%D8%B3%D8%A7%D8%B9%D8%AF%D8%A9:%D9%85%D9%82%D8%AF%D9%85%D8%A9_%D8%B9%D9%86_%D8%B1%D9%81%D8%B9_%D8%A7%D9%84%D8%B5%D9%88%D8%B1/1 | arwiki ]]
****** [[ https://ko.wikipedia.org/wiki/%EB%8F%84%EC%9B%80%EB%A7%90:%EA%B7%B8%EB%A6%BC_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 | kowiki ]]
**** {icon check-square color=green} Users who respond "To create a new Wikipedia article": "Intro overlay subheader 1 new article"
***** {icon check-square color=green} This text comes along with a link (as specified in the copy). Below are the specific links for each of our target wikis.
****** [[ https://en.wikipedia.org/wiki/Help:Your_first_article | enwiki ]]
****** [[ https://vi.wikipedia.org/wiki/Wikipedia:B%C3%A0i_vi%E1%BA%BFt_%C4%91%E1%BA%A7u_ti%C3%AAn_c%E1%BB%A7a_b%E1%BA%A1n | viwiki ]]
****** [[ https://cs.wikipedia.org/wiki/N%C3%A1pov%C4%9Bda:Jak_vytvo%C5%99it_%C4%8Dl%C3%A1nek | cswiki ]]
****** [[ https://ar.wikipedia.org/wiki/ويكيبيديا:مقالتك_الأولى | arwiki ]]
****** [[ https://ko.wikipedia.org/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EC%83%88_%EB%AC%B8%EC%84%9C_%EB%A7%8C%EB%93%A4%EA%B8%B0 | kowiki ]]
**** {icon check-square color=green} Users who respond "To add or change information": "Intro overlay subheader 1 add or change"
**** {icon check-square color=green} Any other response receive the default intro overlay as if they had no survey response.
*** {icon check-square color=green} Each of those scenarios should be shown along with the corresponding graphic.
* **{icon check-square color=green} Difficulty overlay**: this overlay is the same for all users; no personalization. ([[ https://wikimedia.invisionapp.com/share/FUTVMSLV24X#/screens/383472089 | desktop mockup ]] and [[ https://wikimedia.invisionapp.com/share/2TU9L4HJAKW#/screens/387501623 | mobile mockup ]])
** {icon check-square color=green} The top of the overlay says "2 of 2" along with two dots, with the second one filled in.
** {icon check-square color=green} The overlay has two buttons: "Back" and "Get suggestions". "Back" returns the user to the intro overlay. "Get suggestions" completes the initiation and returns the user to the homepage where the suggested edits module is now displayed and the page is rearranged accordingly.
** Copy for this overlay is in [[ https://docs.google.com/spreadsheets/d/1nruwhKmIFWZCCDLlxt-CjR52WTX7AfXOICeeUhIZnEY/edit#gid=1312190183 | this sheet ]].