The location, navigation, and framework of the newcomer homepage is laid out in T215982. This separate task for mobile exists because we anticipate that additional work will be required for a functional mobile version.

InVision mockups (this contains the up-to-date specifications): https://wikimedia.invisionapp.com/share/KUQV2QDJ8A7#/355549128_NH-Homepage_Layout_Mobile
InVision interactive prototype (this shows how the interaction works, but may not contain the up-to-date specifications): https://wikimedia.invisionapp.com/share/28RPQWV67VK#/360015010_Homepage_-_Mobile_Layout_A_V1_Copy_2

Summary: in the mobile version of the homepage, the idea is that when users navigate to their homepage, they can see a short preview of each module in a list, and then when they open them up, they get a full page version of the module. As currently designed, virtually all the functionality that exists on the desktop version of the homepage also exists in the mobile version. But it is possible in the future that we develop complex functionality that makes sense on desktop but is too complex for mobile. In those situations we may make some parts of the homepage desktop-only. Because the mobile homepage will have all the functionality of the desktop homepage, this task only describes how the layout and UI works. None of the module functionality is described, except in the handful of cases in which it deviates from desktop.

Specifications:

• Navigation to the page
  • Users will access their homepage by opening the side menu and tapping their username in the list.
  • Users who have the preference turned on to "Display newcomer homepage" will have the new tabbed layout in their user space, which has a tab each for "Homepage", "User page", and "Discussion". The user will also be able to access their homepage by tapping the "Homepage" tab from their user page.
  • The tabs will be underneath both the title of the page ("Hello, USERNAME!") and the subheader ("This is your homepage...")
  • Note that though the tab layout is associated with "Advanced mobile contributions", we do not want to turn on that whole "Advanced mobile contributions" setting for newcomers -- just the tabs.
• Layout
  • Underneath the tabs, there should be a module preview box for each module, stacked in this order:
    • 1) Start module
    • 2) Impact module
    • 3) Mentorship module
    • 4) Help module
  • Though each module contains an arrow in the upper right, tapping anywhere on the module should open the full page module.
• Module previews
  • Start module
    • Icon: checkmark
    • Sub-modules are shown horizontally, with their icons showing their state above the titles of the sub-modules.
    • This module should have heavy drop shadow until complete, at which point it has light drop shadow.
  • Impact module
    • Icon: chart
    • Unactivated state
      • Top line reads: "You have not yet edited any articles."
      • Second line reads: "This area will show the impact of your edits:"
      • Next to the second line is a large blue "0".
    • Activated state:
      • Top line reads: "X edits to articles", with the number being bold. If only one edit, it should read, "1 edit to articles". This only counts edits in the article namespace. Below is a modification to this business rule based on performance constraints:
        • If the user's total edit count is less than or equal to 1,000, then display the article edit count with this language: "4 edits to articles"
        • If the user's total edit count is greater than 1,000, then display the total edit count with this language: "1,123 total edits"
      • Second line reads: "Views from recent edits (last 60 days):"
      • Next to the second line is a large blue number, calculated as the number of views to the ten most recently edited articles (pages in the articles namespace) the user has edited, just over the course of the previous 60 days, with the current day included. Note that this is not just among the top five articles -- it is of all the ten most recent articles. On the first day the user has edited, there won't be any views yet. This number should show "--". The formatting of this number should respect formatting conventions of different languages in terms of spaces, periods, and commas. Numbers with 6 digits should be able to fit here. Calculating pageviews should use the same logic as in T216217.
  • Mentorship module
    • Icon: happy face speech bubble
    • First line shows an avatar with the mentor's username.
    • Second line shows the number of days since they were active, following the same logic as in T216631.
  • Help module
    • Icon: question mark
    • Content reads "Ask the help desk or read help pages."
    • Note that this module is a different color than the others.
• Full page modules
  • All module headers should have an arrow to bring the user back to the homepage.
  • Using the browser's back button should return the user to the homepage.
  • Start module
    • The four sub-modules in the start module should vertically stack in this order: account created, email, tutorial, user page.
    • All other behavior should be identical to desktop.
  • Impact module
    • All behavior should be identical to desktop.
  • Mentorship module
    • All behavior should be identical to desktop.
    • Question for engineers: do you think we should use dialogs on mobile the way we do on desktop? Or since the desktop help panel is already a dialog, we should make the experience more closely aligned with the help panel -- meaning a text box to type when the module is opened, etc.?
  • Help module
    • All behavior should be identical to desktop.
    • Question for engineers: do you think we should use dialogs on mobile the way we do on desktop? Or since the desktop help panel is already a dialog, we should make the experience more closely aligned with the help panel -- meaning a text box to type when the module is opened, etc.?