Page MenuHomePhabricator

Build receiving workflow for shareable reading lists
Closed, ResolvedPublic

Assigned To
Authored By
JTannerWMF
Aug 31 2022, 10:01 PM
Referenced Files
F35838397: Screenshot_20221205-152047.png
Dec 5 2022, 2:31 PM
F35838395: Screenshot_20221205-152041.png
Dec 5 2022, 2:31 PM
F35828130: Screenshot_20221202-123218.png
Dec 2 2022, 11:35 AM
F35828126: reading-list-share-13.png
Dec 2 2022, 11:29 AM
F35828121: Screenshot_20221202-122634.png
Dec 2 2022, 11:29 AM
F35828120: Screenshot_20221202-122634.png
Dec 2 2022, 11:29 AM
F35828106: Screenshot_20221202-121220.png
Dec 2 2022, 11:22 AM
F35823929: Screenshot_20221129-112145.png
Nov 29 2022, 10:28 AM

Description

Background

The Android team is working on allowing reading lists to be shared. Details can be found in T313269 and T316822. In order to achieve this goal, the concept of receiving a reading lists needs to be built in the app.

Must Haves (Technical Details)
  • Follow steps detailed in T316822 section 4 for the diagram that starts with user receives text
  • Feature should be feature flagged so that it can be rolled out to specific users at a time
User Stories
  • As a Wikipedia Android app user and student in Morocco, I want to export my reading lists, so that I can use it at the Mohammed V University school library
  • As a Wikipedia Android app user in Ghana, I want to share my reading list with a family member in the US that has an iOS device, so they can read the articles I've saved about Accra ahead of their trip home in December.
  • As a Wikipedia Android app user organizer in South Asia, I want to share reading list via Whatsapp after an event, so people that have attended know which articles are in need of contributions
Design (Figma)
1) Clicks link2) Clicks 'GET'3) Downloads app4) Opens app5) After onboarding6) Clicks link7) Names list8) List is added9) Views list10) Survey ask11) Takes survey
reading-list-receiving-01.png (1×720 px, 158 KB)
reading-list-receiving-02.png (1×720 px, 110 KB)
reading-list-receiving-03.png (1×720 px, 100 KB)
reading-list-receiving-04.png (1×720 px, 104 KB)
reading-list-receiving-05.png (1×720 px, 144 KB)
reading-list-receiving-06.png (1×720 px, 162 KB)
reading-list-receiving-07.png (1×720 px, 95 KB)
reading-list-receiving-08.png (1×720 px, 237 KB)
reading-list-receiving-09.png (1×720 px, 825 KB)
reading-list-receiving-10.png (1×720 px, 575 KB)
reading-list-receiving-11.png (1×720 px, 136 KB)

👉 Check out T316836 for the Send/Share workflow


APK: https://github.com/wikimedia/apps-android-wikipedia/pull/3697

Event Timeline

JTannerWMF created this task.
JTannerWMF updated the task description. (Show Details)

Hi @JTannerWMF and @scblr

Please see the demo video about clicking a wiki short link and importing it to the app.
https://www.youtube.com/shorts/5aFy5s_kxwU

The implementation is completed, please download the APK from the ticket description to test the function.

Here's the wiki short URL for the test: https://etherpad.wikimedia.org/p/DeepLinkForTests, please use the first link in the document.

Here is another demo video for the Google Play install referrer.
https://youtube.com/shorts/cB3iOf9S7Q8

Please note that the pause in Google Play was waiting for the Android Studio to install directly to the device in order to simulate the installation process.

@cooltey – I followed these instructions multiple times:

CleanShot 2022-10-28 at 12.30.14@2x.png (394×1 px, 95 KB)

But didn’t get the popup that you get in the video.

However – I think the flow that you’re showing in the video is exactly as we discussed it (based on the constraints) 👍

@cooltey – I followed these instructions multiple times:
But didn’t get the popup that you get in the video.

@scblr That popup will only appear when installing the production version of the app, not the alpha builds. We'll have to provide you with a production APK separately.
However, you should still be able to test the actual import functionality, i.e. tapping the shared URL after the app is installed. Can you try that?

Is this the correct task to share what the landing page should look like or do we need another task for that @Dbrant , referencing task T316822 with the designs

Thanks @Dbrant @cooltey – I can see this dialog now:

Screenshot_20221102-112952.png (2×1 px, 240 KB)

1) I suggest the following, minor copy updates 👇

Before:
A reading list has been shared with you
We noticed that a reading list has been shared with you. To view the list in the app, go back to the original message and tap the link again.

After:
A reading list has been shared with you.
We noticed that a reading list has been shared with you. To view this list in this app, go back to the original message and tap the w.wiki link again.


2) Currently, I don’t see the list when tapping the link (https://w.wiki/5jCo) provided on Etherpad.

It currently leads to this page (logged in):

Screenshot_20221102-113216.png (2×1 px, 202 KB)

Or logged out, to here:

Screenshot_20221102-114321.png (2×1 px, 83 KB)

I noticed that screen 7 says secondary? @scblr

I think the content of screen 7 should read what is in T322088

@cooltey can you ensure when lists are received they're in alphabetical order

Thanks @Dbrant @cooltey – I can see this dialog now:

Screenshot_20221102-112952.png (2×1 px, 240 KB)

1) I suggest the following, minor copy updates 👇

Before:
A reading list has been shared with you
We noticed that a reading list has been shared with you. To view the list in the app, go back to the original message and tap the link again.

After:
A reading list has been shared with you.
We noticed that a reading list has been shared with you. To view this list in this app, go back to the original message and tap the w.wiki link again.

Done.
APK: https://drive.google.com/file/d/1sC-nqsLaI2b24eSvHOah4kehom2b215s/view?usp=share_link

2) Currently, I don’t see the list when tapping the link (https://w.wiki/5jCo) provided on Etherpad.

I have updated the link. But now you can actually test the entire shareable reading list flow from "share" to "import".

Steps to reproduce:

  1. Long press on any reading list item from the list and click on "Share.."
  2. Share the list to your own Slack channel or whatever message app you preferred.
  3. Go to your message app and click on the wiki short link you just shared.
  4. You'll see the import reading list dialog.

@cooltey can you ensure when lists are received they're in alphabetical order

Done.

Thanks @cooltey – not quite sure where to drop the feedback as sending and receiving is now intertwined (T316836).


Design feedback

1) Move the Share... option out of the overflow menu for better discovery

ImplementationvsDesign
Screenshot_20221121-150149.png (2×1 px, 1 MB)
reading-list-sending-01.png (1×720 px, 887 KB)

2) Introduce the discovery tooltip and copy:

reading-list-sending-02.png (1×720 px, 867 KB)

3) Update copy and CTA’s of the dialog:

ImplementationvsDesign
Screenshot_20221121-151948.png (2×1 px, 963 KB)
reading-list-sending-05.png (1×720 px, 599 KB)

→ Source of truth spreadsheet

4) Update copy when sharing for easier translations

ImplementationvsDesign
Screenshot_20221121-153646.png (2×1 px, 152 KB)
Screenshot_20221121-153716.png (2×1 px, 200 KB)

→ Source of truth spreadsheet

5) URL is not shortened:

Screenshot_20221121-153646.png (2×1 px, 214 KB)

6) I might be missing something, but when I click the Slack link that I generated via the reading list Share... in the latest APK from the description, this is what I see:

ImplementationvsDesign*
Screenshot_20221121-161208.png (2×1 px, 197 KB)
reading-list-receiving-02.png (1×720 px, 110 KB)
  • Does not have to match 100% per previous conversations

This is the case for both when the production app (provided by @cooltey T316834#8377739) is installed or not.

Expectation when the app is installed is a redirect to the app import dialog (Figma)

reading-list-receiving-07.png (1×720 px, 95 KB)

Expectation when the app is not installed is a redirect to the web landing page and app install flow (Figma)

reading-list-receiving-02.png (1×720 px, 110 KB)
reading-list-receiving-03.png (1×720 px, 100 KB)
reading-list-receiving-04.png (1×720 px, 104 KB)
reading-list-receiving-05.png (1×720 px, 144 KB)

More resources

Per discussion with @Dbrant

Thanks @cooltey – not quite sure where to drop the feedback as sending and receiving is now intertwined (T316836).


Design feedback

1) Move the Share... option out of the overflow menu for better discovery

ImplementationvsDesign
Screenshot_20221121-150149.png (2×1 px, 1 MB)
reading-list-sending-01.png (1×720 px, 887 KB)

Should be possible.

2) Introduce the discovery tooltip and copy:

reading-list-sending-02.png (1×720 px, 867 KB)

RS will provide translations. CF will look into it (small to medium)

3) Update copy and CTA’s of the dialog:

ImplementationvsDesign
Screenshot_20221121-151948.png (2×1 px, 963 KB)
reading-list-sending-05.png (1×720 px, 599 KB)

→ Source of truth spreadsheet

Doable. RS provides translations ASAP.

4) Update copy when sharing for easier translations

ImplementationvsDesign
Screenshot_20221121-153646.png (2×1 px, 152 KB)
Screenshot_20221121-153716.png (2×1 px, 200 KB)

→ Source of truth spreadsheet

Doable. RS provides translations ASAP.

5) URL is not shortened:

Screenshot_20221121-153646.png (2×1 px, 214 KB)

We’re not using an URL shortener for this iteration.

6) I might be missing something, but when I click the Slack link that I generated via the reading list Share... in the latest APK from the description, this is what I see:

RS needs set app language to Test or HI for it to work

Hi @scblr

All the feedback has been addressed. Please download the latest APK from the updated link in the description.

If you like to test the production APK, please download it from here:
https://drive.google.com/file/d/1yJ1R2Ve2k3NeVfIvex4MWI0gyhfyO3RV/view?usp=share_link

Final question: should we manually add the translated strings from the spreadsheet before re-releasing to beta?

Great work @cooltey 👏 Looking good so far!

1) Update copy and structure for the landing page

ImplementationvsDesign
test.m.wikipedia.org_wiki_Special_ReadingLists_limport=eyJsaXN0Ijp7ImVuIjpbMjc1NTE5LDQwMDI1MSw0NjAwNDYsNjQ4NTMwLDkzMjA0MiwxNDkzNDE4MF19fQ==(Samsung Galaxy S8+) (2).png (2×1 px, 278 KB)
test.m.wikipedia.org_wiki_Special_ReadingLists_limport_eyJsaXN0Ijp7ImVuIjpbMjc1NTE5LDQwMDI1MSw0NjAwNDYsNjQ4NTMwLDkzMjA0MiwxNDkzNDE4MF19fQ_(Samsung_Galaxy_S8_)_(4).png (2×1 px, 279 KB)

a) Copy updates:

Shared reading list

A user on this site has created a reading list to share with others (probably you). It is not moderated, and its contents do not reflect the site's editors.

To import this reading list, install the latest version of the Wikipedia app:

Android CTA: Get in on Google Play
iOS CTA: Download on the app store

After installing the app, tap this button to import the list:

CTA: Import

b) I’ll make sure to obtain the translations for it and will add it to the UI copy spreadsheet

c) Remove the tab “Your lists” from the landing page (see Design)

2) Snackbar

Introduce a “Reading list import successful” snack bar as it’s currently not clear what happened after the list has been imported

reading-list-receiving-07.png (1×720 px, 95 KB)
reading-list-receiving-08.png (1×720 px, 212 KB)

3) Delay for Sender survey ask

Screenshot_20221124-174926.png (2×1 px, 1 MB)

Can we introduce a slight delay for the survey ask when sharing lists? Two things popping up at the same time might be confusing to users. We want them to use the feature (share a list) first – then evaluate the experience (when they come back to the app).

4) Timing for Receiver survey ask

Can we show the survey ask after the list has been successfully imported? Ideally, after the snack bar (see #2) fades away. It currently shows it directly after tapping OK to create a new list - which feels kind off since the user journey hasn’t been completed yet. @Tsevener might be able to help here as the timing of the survey ask is ideal on iOS (T322158).

Screenshot_20221124-180603.png (2×1 px, 261 KB)

Hi @scblr

Please download the update APK from the link in the ticket description.

Great work @cooltey 👏 Looking good so far!

1) Update copy and structure for the landing page

@Dbrant would you be able to update the copy for the landing page?

2) Snackbar

Introduce a “Reading list import successful” snack bar as it’s currently not clear what happened after the list has been imported

reading-list-receiving-07.png (1×720 px, 95 KB)
reading-list-receiving-08.png (1×720 px, 212 KB)

Done.

3) Delay for Sender survey ask

Screenshot_20221124-174926.png (2×1 px, 1 MB)

Can we introduce a slight delay for the survey ask when sharing lists? Two things popping up at the same time might be confusing to users. We want them to use the feature (share a list) first – then evaluate the experience (when they come back to the app).

I changed the dialog to pop up when you "resume" the page. But if you tap on "maybe later" and go back to the other screen, the survey dialog will pop up again. Not sure if this behavior will annoy the user or not.

4) Timing for Receiver survey ask

Can we show the survey ask after the list has been successfully imported? Ideally, after the snack bar (see #2) fades away. It currently shows it directly after tapping OK to create a new list - which feels kind off since the user journey hasn’t been completed yet. @Tsevener might be able to help here as the timing of the survey ask is ideal on iOS (T322158).

Done.

Great work @cooltey – I think we are almost there.

1) The Privacy policy link points to the wrong places, please make sure to update according to this list:

2) I noticed we are using color_group_44 for the *new* indicator. We’ve used green in the past. Please change it to color_group_58

Screenshot_20221129-112145.png (2×1 px, 208 KB)

Hi @scblr, please download the latest APK to check the changes.

Great work @cooltey – I think we are almost there.

1) The Privacy policy link points to the wrong places, please make sure to update according to this list:

Added for different languages. I also added Urdu survey (both send and receive) links.

2) I noticed we are using color_group_44 for the *new* indicator. We’ve used green in the past. Please change it to color_group_58

Screenshot_20221129-112145.png (2×1 px, 208 KB)

Done.

Thanks @cooltey – looks good to me now! 🎯

Keeping this in “Did not pass Design” due to this:

1) Update copy and structure for the landing page

ImplementationvsDesign
test.m.wikipedia.org_wiki_Special_ReadingLists_limport=eyJsaXN0Ijp7ImVuIjpbMjc1NTE5LDQwMDI1MSw0NjAwNDYsNjQ4NTMwLDkzMjA0MiwxNDkzNDE4MF19fQ==(Samsung Galaxy S8+) (2).png (2×1 px, 278 KB)
test.m.wikipedia.org_wiki_Special_ReadingLists_limport_eyJsaXN0Ijp7ImVuIjpbMjc1NTE5LDQwMDI1MSw0NjAwNDYsNjQ4NTMwLDkzMjA0MiwxNDkzNDE4MF19fQ_(Samsung_Galaxy_S8_)_(4).png (2×1 px, 279 KB)

@Dbrant would you be able to update the copy for the landing page?

Hi @cooltey,
I was testing the data wiring, and accidentally discovered this bug in receiving workflow.
Steps:

  1. Uninstall all flavors of our app on device
  2. Click on the shared link
  3. Tap on the google play link to install
  4. Go back to the lick and tap
  5. Click import on landing page. We see the unexpected "Please make sure the app is installed" toast.

Also did not see the new install dialog
[Device: Pixel3]

Video: https://youtube.com/shorts/eV5AjWECTiE?feature=share

Hi @cooltey,
I was testing the data wiring, and accidentally discovered this bug in receiving workflow.
Steps:

  1. Uninstall all flavors of our app on device
  2. Click on the shared link
  3. Tap on the google play link to install
  4. Go back to the lick and tap
  5. Click import on landing page. We see the unexpected "Please make sure the app is installed" toast.

Also did not see the new install dialog
[Device: Pixel3]

Video: https://youtube.com/shorts/eV5AjWECTiE?feature=share

Hi @Sharvaniharan.

I cannot reproduce the issue. Can you please check the app settings which the app will open supported links is on?

@cooltey Realized why this was an issue... we will not be able to test this until our import supporting version is on the play store.. However, it should have failed for you too. Lmk how you test the fresh install dialog. - Dmitry pointed me to the test plan. - all good 👍

Things I noticed while writing the usability test protocol:

1) Tooltips in a reading list overlap

Screenshot_20221202-121220.png (2×1 px, 1 MB)

Prioritize the "Changes you make..." tooltip over "Share this reading list..." when a user has freshly imported a list. Show "Share this reading list..." after "Changes you make..." (sequentially after tapping GOT IT in the first tooltip)

2) Skip onboarding (show it on the next app opening) when users tap "Import" on the landing page. It’s confusing to see the onboarding screen after tapping "Import", see this video:

https://www.dropbox.com/s/05st7ecxon6t053/screen-20221202-121821.mp4?dl=0

3) View action is missing in the snackbar:

ImplementationvsDesign
Screenshot_20221202-122634.png (2×1 px, 324 KB)
reading-list-share-13.png (1×720 px, 211 KB)

4) Prevent "Reading list sync" dialog from showing up in the middle of importing when the user is not logged in (it disrupts the flow):

CC @cooltey @Dbrant @JTannerWMF

Hi @scblr

All these items are feasible. Please download the APK here to see the changes:
https://github.com/wikimedia/apps-android-wikipedia/pull/3710

Thanks @cooltey 🎯

Things I noticed while writing the usability test protocol:

1) Tooltips in a reading list overlap

Screenshot_20221202-121220.png (2×1 px, 1 MB)

Prioritize the "Changes you make..." tooltip over "Share this reading list..." when a user has freshly imported a list. Show "Share this reading list..." after "Changes you make..." (sequentially after tapping GOT IT in the first tooltip)

I noticed that the "Share this reading list..." tooltip is shown when accessing a list for the second time – correct? It’s fine for now – but for the usability tests later this week it’ll be good to show it sequentially, right after tapping GOT IT in the “Changes you make..." tooltip.

2) Skip onboarding (show it on the next app opening) when users tap "Import" on the landing page. It’s confusing to see the onboarding screen after tapping "Import", see this video:

https://www.dropbox.com/s/05st7ecxon6t053/screen-20221202-121821.mp4?dl=0

👏👍👏

3) View action is missing in the snackbar:

ImplementationvsDesign
Screenshot_20221202-122634.png (2×1 px, 324 KB)
reading-list-share-13.png (1×720 px, 211 KB)

Cool, VIEW is here now. I’m not quite sure how I managed to make this happen when importing a list 👇

Screenshot_20221205-152041.png (2×1 px, 171 KB)
Screenshot_20221205-152047.png (2×1 px, 256 KB)

The “Did you know..." tooltip seems to overlap with the snackbar.

4) Prevent "Reading list sync" dialog from showing up in the middle of importing when the user is not logged in (it disrupts the flow):

👍👏👍