This is a task for building one of the modules in the newcomer homepage: the start module.
**Main audience**: users who are not confident enough to just start being bold in editing an article, and prefer to have more guidance or practice.
**Invision mockups**: https://wikimedia.invisionapp.com/share/KUQV2QDJ8A7#/screens/353627437 (in places where the mockups and the specifications on this task disagree, the specifications take precedent.)
**Summary**: Our user tests (T218084) showed that after users create their account, many are looking for a clear pathway to get started. In this module, we make it clear what our recommendations are for the right ways for a user to complete their account and to learn to edit. At first the module gives the user some choices of how to start, but in the longer run, we may add options, allow more options to appear over time, or structure the ordering in which the user does them. In absence of intelligent task recommendations, this gives newcomers something clear and valuable to do when they arrive on their homepage.
The specifications below are detailed. If anything about these specifications is not performant, we can discuss how to alter them.
* **Overall**
** {icon check-square color=green} Module consists of four sub-sections, each of which operates completely independently of the others.
** {icon check-square color=green} The sub-sections may each have multiple states.
** {icon check-square color=green} Module is not dismissable.
** {icon check-square color=green} Module has two states:
*** {icon check-square color=green} State 1: in which not all the sub-sections have been completed.
**** {icon check-square color=green} Title: "Start here"
**** Drop shadow: heavy
*** {icon check-square color=green} State 2: in which all the sub-sections have been completed.
**** {icon check-square color=green} Title: "First steps complete." (period is included)
**** Drop shadow: light
* ** {icon check-square color=green} Section 1: account creation**
** {icon check-square color=green} This module only has one state, but its content does change over time.
** {icon check-square color=green} Title: "Account created"
** {icon check-square color=green} Icon: green checkmark
** {icon exclamation-triangle color=red} Next: avatar icon
** {icon check-square color=green} Next line: [USERNAME]
** {icon check-square color=green} Next line: number of edits, written like "0 edits", "1 edit", "2 edits", etc.
** {icon check-square color=green} Next line: length of time the user has had an account, written like, "You've had an account for 3 days." This line should sensibly handle the way to phrase lengths of time, e.g. "1 year and 2 months" instead of "425 days"; "4 months" instead of "16 weeks". If standards do not exist for this and specific rules are needed, please ask.
* ** {icon check-square color=green} Section 2: email**
** {icon check-square color=green} This module has three states: no email, unconfirmed, confirmed.
** If the user has no email address...
*** {icon check-square color=green} Title: "Add your email"
*** {icon check-square color=green} Icon: gray email icon
*** {icon check-square color=green} Next line: "Recommended for account recovery"
*** {icon exclamation-triangle color=red} Button text: "Add email"
*** Clicking on button takes user to Special:ChangeEmail
*** {icon check-square color=green} Button is blue.
*** {icon exclamation-triangle color=green} When a user has a valid email address, the state of the module should change to "unconfirmed" below.
** {icon check-square color=green} If the user has an unconfirmed email address...
*** {icon check-square color=green} Title: "Confirm your email"
*** {icon check-square color=green} Icon: gray email icon
*** {icon check-square color=green} Next line: "Check your email for a confirmation link, or send a new link."
*** {icon check-square color=green} Button text: "Get a new link"
*** {icon check-square color=green} Button is blue.
*** {icon check-square color=green} Clicking on button takes user to Special:ConfirmEmail.
*** {icon exclamation-triangle color=green} Link under button: "Change your email address". This links to the "Email options" header in Special:Preferences.
** {icon check-square color=green} If the user has a confirmed email address...
*** {icon check-square color=green} Title: "Email added"
*** {icon check-square color=green} Icon: green checkmark
*** {icon check-square color=green} Next line: "Your email has been confirmed. You can change your email settings in Preferences."
*** {icon check-square color=green} Button text: "Preferences"
*** {icon check-square color=green} Button is in non-blue state.
*** {icon check-square color=green} Clicking on button takes user to Special:Preferences.
* ** {icon check-square color=green} Section 3: tutorial**
** {icon exclamation-triangle color=red} We would like this module to have two states: its state before the user clicks the button and its state afterward. Is it possible to govern the state purely on whether a user has clicked on the button?
** {icon check-square color=green} If a user //has not// clicked on the button...
*** {icon check-square color=green} Title: "Learn to edit"
*** {icon check-square color=green} Icon: gray book icon
*** {icon check-square color=green} Next line: "Follow a quick tutorial to learn how to edit Wikipedia."
*** {icon check-square color=green} Button text: "Tutorial"
*** {icon check-square color=green} Button is in //blue state//.
*** {icon check-square color=green} Clicking on button takes user to a tutorial page specified by the community. This is another instance, similar to help panel links, in which we will request a recommended tutorial link from each community. Those links will be listed as sub-bullets when we collect them from Czech, Korean, and Vietnamese Wikipedia.
** {icon exclamation-triangle color=red} If a user //has// clicked on the button...
*** Title: "Learn to edit"
*** Icon: green checkmark
*** Next line: "Follow a quick tutorial to learn how to edit Wikipedia."
*** Button text: "Tutorial"
*** Button is in //non-blue state//.
* ** {icon check-square color=green} Section 4: user page**
** {icon check-square color=green} This module has two states: one when the user page does not exist, and one when it does.
** {icon check-square color=green} If the user page //does not// exist...
*** {icon check-square color=green} Title: "Create your user page"
*** {icon check-square color=green} Icon: gray pencil icon
*** {icon check-square color=green} Next line: "Practice editing while building your public profile.”
*** {icon check-square color=green} Button text: "Create user page"
*** {icon check-square color=green} Button is in blue state.
*** {icon check-square color=green} Clicking button takes user to their uncreated user page with the editor open.
*** {icon exclamation-triangle color=red} Link under button: "Guidelines for user pages". This links to the appropriate language version of https://en.wikipedia.org/wiki/Wikipedia:User_pages, which exists in 90 languages. If this does not exist in the language at hand, this links should not be shown at all.
** {icon check-square color=green} If the user page //does// exist...
*** {icon check-square color=green} Title: "Edit your user page"
*** {icon check-square color=green} Icon: green checkmark
*** {icon check-square color=green} Next line: "Continue working on your public profile."
*** {icon check-square color=green} Button text: "Edit user page"
*** {icon check-square color=green} Button is in non-blue state.
*** {icon check-square color=green} Clicking button takes user to their user page with the editor open.
*** {icon exclamation-triangle color=red} Link under button: "Guidelines for user pages". This links to the appropriate language version of https://en.wikipedia.org/wiki/Wikipedia:User_pages, which exists in 90 languages. If this does not exist in the language at hand, this links should not be shown at all.
**Color codes**
* checkmark icon color is #fff
* checkmark icon bg color is #00AF89
* normal state icon color is #54595D
* normal state icon bg color is #D5FDF4
* normal state icon border is 1px solid #C8CCD1
* profile avatar icon color is #fff
* profile avatar icon bg color is #54595D
* CTAs color is #36c
* error color is #d33
**Future**: a list of capabilities that may be needed in future versions, listed here for planning purposes.
* We may want to allow the various sub-sections to cycle through different calls-to-action as users complete them, instead of remaining there in a "completed" state. For instance, if someone has done the tutorial, we might want to suggest another one. Or if someone has made their user page, we might suggest that they edit in their sandbox.
* Sub-sections might contain specific task recommendations at some point -- in other words, it may turn out that our design for the task recommendations module involves //this// module evolving into task recommendations as the user completes the sub-sections that are in it by default.
* Another sub-section might be completing the welcome survey (for users that skipped or abandoned it). Or perhaps just showing one question at a time from the survey. This idea first ticketed in T212021.
* This module might one day show some kind of percentage or progress bar of how much a user has accomplished in terms of its sub-sections.
* We may want to add tooltips at some point for little question mark icons, to help clarify what the section is talking about.