Here's draft mockup.

This design is built off the assumption that what people will see will not depend on the notification delivery channels they have enabled.
@ppelberg is going to file a new ticket for designing an experience that prompts people to enable email notification if they do not have it enabled.

@DLynch @matmarex - if you build off the designs here in the next two weeks, I will review and update with illustrations. The modal that should appear here is built off a component from the Growth team work.

In T262103#7233729, @iamjessklein wrote:

@ppelberg is going to file a new ticket for designing an experience that prompts people to enable email notification if they do not have it enabled.

The ticket that captures what Jess described above is T288178.

Change 714438 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/DiscussionTools@master] [WIP] First-run experience popup for automatic topic subscriptions

https://gerrit.wikimedia.org/r/714438

Test wiki created on Patch Demo by Matma Rex using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/4b915f2804/w/

You can try the first version here: https://patchdemo.wmflabs.org/wikis/4b915f2804/wiki/Talk:Main_Page (note that you must be logged in to see topic subscriptions)

For ease of testing, the popup appears every time you get auto-subscribed. In the final version it will only appear once.

Thoughts and questions:

• What to do when the [unsubscribe] button is off-screen (because the section is very long)? Right now the popup just kind of floats there in top-right corner, attached to nothing (and the little arrow detaches in an ugly way).
• The copy needs to be different depending on whether the user has email notifications enabled.
• I assumed the icon in the design was a placeholder, and I put in a bell icon instead (like we use for notifications), did you have a different one in mind?
• How/When should the popup be hidden? Currently it's hidden when you click anywhere outside of it, or on the close button. I'm wondering whether it's too easy to accidentally close it, especially given that it is shown only once. On the other hand, we probably don't want it to stay visible forever and cover the content until the user leaves the page.

First-run experience design approaches
@iamjessklein: I've reviewed and added comments to the designs you have in Figma. [i]

Please let me know if you think anything I've written could benefit from more clarity.

i. https://www.figma.com/file/NreUF7q404NYuoMOPJGeWl/OWC-x--Work-in-Progress?node-id=2076%3A24581

During today's team meeting, we arrived at the following question which @iamjessklein will explore in the next design iteration:

• In cases where the [ subscribe ] affordance is not visible to someone who just posted a comment or started a new discussion [i], how can the current design approach be adapted so that: 1) people become aware that they have automatically been subscribed to the conversation they just started or participated in and 2) the dialog/popup/etc. that makes them aware of "1)" is presented in such a way that people associate the information contained within it with the [ subscribe ] affordance?

Case	Screenshot	Link
i. Example: a long conversation, where the section heading is not visible after you've published a comment in the conversation		Wikipedia:Village_pump_(technical)#dtenable_testing

Just want to clearly document the issue that we are focusing on right now. I created this flow chart (below) to show the tension that we are facing in this moment because we want to communicate two things simultaneously to contributors:

1. Acknowledging that they have successfully "edited" the page and
2. Informing them that they are automatic subscribed to topic subscriptions and direct them to where they can go to make changes to that (preferences)

The tension is where the blue/green boxes on the chart appear.

The solution that we are working towards is "variant b":

We will be choosing from the following OOUI components:

My next steps:

1. iterating on variant B with ooui components for look and feel
2. consider the ux for pages when the subscribe button isn't geographically close to the reply/new topic

After doing a bunch of iteration, I believe that our best path forward is to use a modified version of the pop-up used by the Growth team. Compared to the simple dialog in OOUI, this would not feel as disruptive. The copy and imagery in these mockups are not final. The noticeable difference in the approach here is that I have moved away from anchoring the dialog to the "unsubscribe" button. My thinking here is that the primary message that we are trying to communicate here is:

1. you have been auto-subscribed
2. you can change that subscription in your preferences

I think that the anchor is adding unnecessary complexity to the communication in this moment by bringing in a third component (the button). This solution would eliminate the need to create different treatments for longer threads or mobile.

Update: 14-Sep
I'm documenting the next steps that surfaced in the conversation @iamjessklein and I had offline earlier today:

• 1. @iamjessklein is going to iterate on the designs she shared in T262103#7352110 by including an image within the currently-named Automatic Subscriptions dialog that leads people to know where on the page to look to know they're subscribed to a converation.
• 2. @iamjessklein is going to take a first pass at drafting the copy that will be included within the dialog. For now, this copy will be shown within the mockups themselves.

...in line with the above I've made updates to the task description's ===Requirements and ===User Stories sections.

I've incorporated illustrations into the mockups (the copy is not final in these mockups).

Additionally, on a separate figma frame I made three attempts at the copy for this:

@ppelberg Please leave feedback on the figma files as comments.

In T262103#7365857, @iamjessklein wrote:

@ppelberg Please leave feedback on the figma files as comments.

As @iamjessklein and I talked about offline, I've commented the changes I think we should consider making to the designs + copy in the Figma files and in the footer of this comment [i][ii].

Next steps

• 1. @iamjessklein to decide which – if any – of the changes I referenced above she will act on before handing the designs off to Editing Engineers to implement
• 2. Once "1." is done, @iamjessklein will post the update mockups (copy included) to the task description's ===Mockups and ===Copy sections.

Note: implicit in the changes below is Jess and I coming to agree to reduce the scope of what this pop-up experience will strive to make people aware of: i) they are going to receive notifications when people post new comments, ii) where they can expect to learn if/when someone posts a new comment, and iii) what they can do to adjust the settings that control these notifications in preference.

I've incorporated the proposed copy and done a handful of explorations.

Here's what it could look like in context with my preferred illustration

@ppelberg please confirm if this is also your preference or if one of the others work better in your opinion (or none).

In T262103#7390009, @iamjessklein wrote:

@ppelberg please confirm if this is also your preference or if one of the others work better in your opinion (or none).

Of the three approaches you are proposing [i], I prefer "B." because it most closely resembles the tray icon I assume people will see. [ii]

...@iamjessklein, the above leads me to wonder: what contributed to you suggesting the orange'ish dot shown in "A." and "C." ?

i. Sketch proposals:

Next steps

• @iamjessklein is going to create an iteration of "C." that removes the orange dot. Once done, she is going to add the final mockups and copy to their respective sections within the task description and move this ticket to Ready to be worked on for the Editing Engineering to pickup.

Here is the updated design:

I've updated the description with mockups.

Test wiki created on Patch Demo by Matma Rex using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/ce0ce4c75c/w/

Second version, based on the new designs: https://patchdemo.wmflabs.org/wikis/ce0ce4c75c/wiki/Talk:Main_Page (note that you must be logged in to see topic subscriptions)

EDIT: Please log in as "Patch Demo" to test (or give administrator rights to the account you're logged in as). There's a bug in this version that breaks posting if a CAPTCHA would be shown, and the demo wikis show all non-administrators CAPTCHAs. It will be fixed in the next version.

As before, for ease of testing, the popup appears every time you get auto-subscribed. In the final version it will only appear once.

Thoughts and questions:

• I've copied most of the styling from the (lamentably named) Popups extension, rather than trying to get it pixel-perfect like the mockups, since I assume your design was based on that
• (I also copied some pretty fade-in and fade-out transitions from there)
• Currently the popup is only hidden when you click the button to close it. Should it disappear by itself, or when clicking elsewhere on the page?

The drop shadows in the Popups extension is non-standard. I would prefer we used normal drop shadows:

As seen in VE and desktop notifications:

Re: alignment, the popup should either be centred in the content area, or right aligned in the content area (to be close to the [ subscribe ] button).

Currently I think it is centred to the page, which looks odd (slightly to the left of centre of the content area).

Should it disappear by itself, or when clicking elsewhere on the page?

I think there should be primary button to dismiss the popup (cf "Okay, got it" in VE education popup). Failing that one should be able to dismiss it by clicking elsewhere on the page.

Having the next expected step by the user be to click an 'x' to close the window seems wrong.

I think this button label should be either "Preferences" or "Edit preferences". "Visit" seems unnecessary, or suggests they are read-only.

Thanks for feedback @Esanders

• drop shadow - I chose that component because it was the only component that I could find that has both an image and text besides eachother with a button underneath. If this is non-standard then of course, I'd default to the standard shadow.

• alignment - It should be centered aligned to content, it's a bit off center at the moment and therefore looks disorienting.

• disappearance - again, I was trying to align with the standard component here, if that is not standard, then yes, an okay i got it button would work well here instead of the x.

• button label let's change to Edit preferences

• responsiveness As the browser width decreases the mobile design variant of the design behaves in an unexpected way. As the width decreases and decreases the pop up moves to the top of the browser and gets cut off. I'm tempted to recommend here that we don't use the mobile version until we have a mobile design. example:

Update: I've modified the OOUI dialog (instead of the Growth dialog) so that it now will have the OOUI themed borders (cc @Esanders). I also adjusted the button position and copy, see:

Next steps

• 1. @iamjessklein to post updated mockups to the task description's ===Mockups section
• 2. @iamjessklein to move to the Ready to be worked on column for engineers to pick up

Test wiki created on Patch Demo by Matma Rex using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/2f3d9efbec/w/

Updated everything per the comments above (and also fixed the CAPTCHA bug).

Third version: https://patchdemo.wmflabs.org/wikis/2f3d9efbec/wiki/Talk:Main_Page (note that you must be logged in to see topic subscriptions)

As before, for ease of testing, the popup appears every time you get auto-subscribed. In the final version it will only appear once.

Just one thing I want to address:

In T262103#7468468, @iamjessklein wrote:

• responsiveness As the browser width decreases the mobile design variant of the design behaves in an unexpected way. As the width decreases and decreases the pop up moves to the top of the browser and gets cut off. I'm tempted to recommend here that we don't use the mobile version until we have a mobile design. example:

Fixed – this occurred because when you resized the browser's width, the height of the content changed as well (because of paragraph wrapping), but the position of the popup was not updated to match. It will be updated now.

I've kept the mobile design implementation because of that, but I'm happy to remove it for now if you actually want it removed (rather than only want it removed if it didn't work).

nice work @matmarex

+1

I believe this has been code reviewed so I am moving it over to QA, please correct me if I'm wrong.

(No, we still need to click the buttons, sorry)

Change 714438 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] First-run experience popup for automatic topic subscriptions

https://gerrit.wikimedia.org/r/714438

(The buttons were clicked)

This has been reviewed as part of T284836, there is one design change that has been suggested by QA which is being tracked here: T295946. So, we can close this one.

Test wiki on Patch demo by Matma Rex using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/4b915f2804/w/

Test wiki on Patch demo by Matma Rex using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/2f3d9efbec/w/

Test wiki on Patch demo by Matma Rex using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/ce0ce4c75c/w/