User story & summary

As a new account holder, I want a focused account setup experience that personalizes my experience so that I can get a more personalized experience and see relevant suggestions.

Background & research

Parent task: T430058: [EPIC] Account Setup (DE1.3.1 - early onboarding)

This task covers the first part of the Account setup flow: the loading state, screen 1 (welcome) and screen 2 (account type). Screen 3 (interests) is covered by T432811: Account setup: Create interest selector and storage of interests (DE1.3.1).

Account setup is presented as a dialog layered over the newcomer homepage rather than as a separate page, so that the destination is visible (blurred) behind the dialog from the first moment and dismissing setup lands the user on the newcomer homepage.

Design

Figma designs

Prototype: Create a (fake) account from the Main Page or any article.

Baby globe asset: https://commons.wikimedia.org/wiki/File:Wikipedia%27s_25th_birthday_mascot_-_Confetti_Baby_Globe.gif

Note on the GIF timing: the animation is deliberately delayed (1 second) and plays/loops only once. Two reasons: it gives the dialog time to fully load, and it leaves room for the operating system's save-credentials prompt, which can appear immediately after account creation. Users need a moment to confirm or dismiss that prompt before anything animates underneath it.

---

Acceptance criteria

Please refer also to this comment which outlines the whole flow for additional context.

✅ AC1

• Given I have just submitted the account creation form
• When my account is created
• Then I am taken to the newcomer homepage, with the homepage blurred (backdrop-filter: blur(30px);) and the account setup dialog displayed on top of it. on mobile the dialog is full height, on desktop we set an arbitrary height of 640px/size-4000 that we can refine as we implement and test this

🛠️ WIP AC2

• Given the newcomer homepage has loaded but the account setup dialog is not ready yet
• When I am waiting
• Then I see the waiting screen (blurred background, codex progress indicator, and a "Did you know..." fact) until the dialog is ready

✅ AC3

• Given I was mid-edit when I started account creation
• When I finish account creation
• Then I am returned to the editor and NOT interrupted by account setup
• AND my account creation reason is automatically logged as "Edit"

Screen 1: welcome

✅ AC4

• Given the account setup dialog has opened
• When I view screen 1
• Then I see "Welcome to Wikipedia, $Username!", the baby globe animation, a step indicator showing 1 of 3, a close button in the top left, and a "Personalize your Home" primary button

🛠️ WIP AC5

• Given screen 1 has opened
• When the animation plays
• Then the GIF holds on its first frame for 1 second, loops once, and then rests back on the first frame

✅ AC6

• Given I am on screen 1
• When I tap the close button
• Then the dialog is dismissed and I am on the newcomer homepage (with no interests stored
• AND Suggested edits shows unfiltered random suggestions)

✅ AC7

• Given I am on screen 1
• When I tap "Personalize your Home"
• Then I am taken to screen 2

Screen 2: account type

✅ AC8

• Given I have arrived on screen 2
• When I view the dialog
• Then the step indicator shows 2 of 3, the close button has been replaced by a back button, and I see three options: "Reading and exploring", "Editing and contributing", and "A bit of both", plus a "Skip" quiet button

✅ AC9

• Given I am on screen 2
• When I select any one of the three options
• Then I am taken immediately to screen 3 (no separate confirm step)
• AND my selection is saved in a permanent user property so the Home view can be configured based on it

✅ AC10

• Given I am on screen 2
• When I tap "Skip"
• Then I am taken to screen 3 with no account type stored

✅ AC11

• Given I am on screen 2
• When I tap the back button
• Then I am returned to screen 1