Page MenuHomePhabricator

Create app-wide onboarding screens introducing new users to the app and its features
Closed, ResolvedPublic

Description

Background

For the Fortune cookie we are releasing a number of new features, so it is a good opportunity to introduce onboarding to new users of the app highlighting key features, namely:

  • There is a greater variety of feed content available with improved random and the new On this day card
  • Customizing the feed for a more tailored experience
  • Emphasize that users can save articles to reading lists for offline reading
  • Potentially add more of an introduction to Wikipedia in general
Proposed

Essentially the proposal is to amend the app onboarding implemented on T166393 for new users on the Fortune cookie release, whereby the following is updated:
a. Addition of an app Onboarding screen '0' as a general welcome
Adding a screen prior to the initial 3-steps which provides a more general introducing to Wikipedia. This is based on user feedback from iOS onboarding (see T174206) whereby some users wanted more of a welcome/orientation into the Wikipedia app.

  • Illustration - vector illustration globe
  • Proposed text (taken from iOS welcome screen) uses the title "The free encyclopedia" and the description "Wikipedia is written collaboratively by volunteers and consists of more than 40 million articles in nearly 300 different languages. Learn more" (which links out to the About Wikipedia page).

b. Update Onboarding screen 1 "New ways to explore"

  • Update the description text refer to new feed content and the new customization option. Proposed description is "Dive down the Wikipedia rabbit hole with a constantly updating Explore feed. <br/> Customize the feed to your interests – whether it’s learning about historical events On this day, or rolling the dice with Random."
  • Update the illustration to no longer show the globe (since this is now in the previous screen)

c. Update Onboarding screen 2 - promoting reading lists

  • Update the illustration to refer to saving to reading lists and offline (since sync is not yet available)
  • Update text to refer to saving to reading lists only. Proposed title is "Save to reading lists", and proposed description is "Create reading lists from articles you want to read later, even when you’re offline."
Mocks:
App onboarding 0
App Onboarding 0 - Intro to app varA.png (1×720 px, 749 KB)
App onboarding 1
App Onboarding 1 - updated.png (1×720 px, 751 KB)
App onboarding 2
App Onboarding 2 alt.png (1×720 px, 722 KB)
App onboarding 3
App Onboarding 3.png (1×720 px, 722 KB)
Assets:
'Welcome' vector globe drawable
'Welcome' vector globe SVG
'New ways to explore' drawable
'New ways to explore' SVG
'Reading list' Drawable:
'Reading list' SVG:
Steps for QA
  1. Swipe or tap ">" to move through each of the 4 screens for app onboarding. It is **expected"" that the illustrations appear as per mocks in the task description on each screen
  2. Confirm the "Learn more" link on Step 1 opens the 'About Wikipedia' page in the user's browser
  3. Confirm the "Learn more" link on Step 4 opens 'Offline reading and data' section in the Android FAQs page
  4. Confirm that the and the "SKIP" links works as expected (closes the onboarding flow to show the Explore feed)

Event Timeline

RHo renamed this task from Create app-wide onboarding screens for new users informing them of new Explore features to Create app-wide onboarding screens introducing new users to the app and its features.Nov 23 2017, 1:04 AM
RHo updated the task description. (Show Details)

Change 393700 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@master] Create app-wide onboarding screens introducing new users to the app and its features - Update images and texts

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

Change 393700 merged by jenkins-bot:
[apps/android/wikipedia@master] Create app-wide onboarding screens introducing new users to the app and its features - Update images and texts

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

  • First illustration looks mangled on Nexus 5 (6.0.1):

main-MainActivity-12042017133459.png (1×1 px, 807 KB)

  • Also, tapping on the links in the onboarding brings up an app selection bottom sheet every time (which does not appear on any other places where users are taken to a browser link)

app-ChooserActivity-12042017135031.png (1×1 px, 390 KB)

Compared to (as expected) on Pixel (8.0.0):
Illustration:

image.png (1×1 px, 1 MB)
| Tapping on link goes directly to browser page:
browser-ChromeTabbedActivity-12042017135633.png (1×1 px, 315 KB)

@cooltey ^ Let's just use a (single, optimized) raster drawable for the globe, and call it a day.

@RHo
For the second issue, does it also happen on the Forgot your password? in Log in to Wikipedia?

@Dbrant OK!

@cooltey - oh yes, it also happens on the Forgot your password? and Privacy policy links on the Login screen for my Nexus 5 (6.0.1)

@RHo I see. Could we open another Phabricator to investigate it?

Change 395067 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@master] Update the onboarding globe imag - use a regular png file for the globe - also update the ic_illustration_app_onboarding_0.xml

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

@RHo
I've updated the task description that created on last week, so we wont need to open another task for it - T181459

@Dbrant
I change the drawable from xml file to a png file, hope it would improve the performance (and also the mangled issue)

Change 395067 merged by jenkins-bot:
[apps/android/wikipedia@master] Update the onboarding globe image

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

hi @cooltey - At the moment the PNG globe looks a bit blurry, can you use the full set of sizes for PNGs (see attached zip)?

Example blurry globe:

main-MainActivity-12042017210121.png (1×1 px, 884 KB)

Asset at different sizes:

-> Use a (crushed) version of the highest-resolution image in that zip file.

Change 395079 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@master] Update the onboarding globe image

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

Change 395079 merged by jenkins-bot:
[apps/android/wikipedia@master] Update the onboarding globe image

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

thanks @cooltey - globe looks nice and crisp on Nexus 5 and Pixel now:

Nexus 5
main-MainActivity-12042017234446.png (1×1 px, 840 KB)
Pixel
image.png (1×1 px, 1 MB)

Only thing before moving to QA is a couple of items on the final app onboarding screen:

  • the "Learn more" link relating to sending data should open to the 'Offline reading and data' section in the Android FAQs page, not the generic privacy policy page
  • The 'on' switch is colored in the Accent50 blue, not teal.

Change 395153 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@master] Update the URL and the switch color on the final app onboarding screen - Add a URL and a text item with Offline-Working-Group - Update the on switch color to Accent50

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

Change 395153 merged by jenkins-bot:
[apps/android/wikipedia@master] Update the URL and the switch color on the final app onboarding screen

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

Testing on Samsung-SM-JI20A Galaxy Express 3 (Android 6.0.1) and Wikipedia app 2.6.206-alpha-2017-12-05. Included below are screenshots of the onboarding as well as a video documenting QA Step 2, 1, 4 and 3 (in this order). Things seem to work as expected.

T181149 App onboarding 0.png (800×480 px, 214 KB)
T181149 App onboarding 1.png (800×480 px, 211 KB)
T181149 App onboarding 2.png (800×480 px, 188 KB)
T181149 App onboarding 3.png (800×480 px, 193 KB)

ABorbaWMF subscribed.

Tested v2.6.206-alpha-2017-12-04 on a Pixel and Nexus 4. New onboarding looks good!