Page MenuHomePhabricator

Define in article announcement user experience for Android app
Closed, ResolvedPublic

Description

Visual


Concept

  • Uses Material design’s dialog component
  • Appeal is shown once for all app users (but not on a first session) accessing an article page during campaign period (Dec 2 to 31, 2019) in en6C countries (US, UK, IE, AU, NZ, CA)
  • “Donate now” leads users to payments page
  • “No thanks” dismisses the card and the appeal won’t be shown in the app anymore (also in the Explore feed)
  • Dialog exceptions:
    • Uses primary button instead of the usual dialog call to actions (styled as links)
    • Uses 3dp red border in red50 (#B32424)

Questions / Todos for Online Fundraising are listed in T235652

Event Timeline

JMinor created this task.Oct 15 2019, 5:01 PM
Charlotte updated the task description. (Show Details)Oct 15 2019, 5:11 PM

Thanks for updating the ticket description, @schoenbaechler

Here's the current status of implementation, and it's basically using the same component (AnnouncementCardView) as the one on Explore Feed, and I would highly recommend sharing the same component (AnnouncementCardView) for this dialog. It would reduce the complexity and much easier to integrate with the announcement API.

I’m impressed @cooltey, makes a lot of sense to unify the two, thanks for suggesting this! I think the comments in T235652#5630326 can also be applied here then.

cooltey added a comment.EditedNov 4 2019, 9:57 PM

Done. Please let me know if it need other design changes.


Hey @cooltey, thanks! It seems like the red border’s gone in the latest screenshot?

I forgot to update the API parameter for you to check. Updated!

@cooltey, looks good! Last thing before it’s good to go, can we use font-weight: normal; for To all our readers in the UK, as defined?

Thanks!

@cooltey, looks good! Last thing before it’s good to go, can we use font-weight: normal; for To all our readers in the UK, as defined?

Done!

Hi @schoenbaechler

Have a question, what are the settings of placement and border for the announcement for each country? (Maybe that's a question for online fundraising team)
(info about placement: T235537)

e.g.

U.S.
placement: "article"
border: true

U.K.
placement: "feed"
border: false

Hey @cooltey, the settings should be the same for all countries (border: true). Whether it’s placed in article or Explore feed depends on the clients version, see @JMinor’s comment in T235537#5624671:

Just to clarify, the announcement should only be shown in one location (Robin: Article or Explore feed). In new versions that support the article placement it should only be shown in the article. For older versions it will fall back to the feed. If a user is on a new app version (that supports "placement") and the value is "article" the announcement should only be shown in article.

Thanks.

@schoenbaechler
Got it, thanks!

I'll set placement: "article" for all countries since the older version does not affect by the new settings (parameters).

Hey @cooltey, just posting the updated URL here too to keep it in the Android-specific thread:

Updated landing page link: https://donate.wikimedia.org/?uselang=en&appeal=JimmyQuote&utm_medium=WikipediaApp&utm_campaign=Android&utm_source=app_201912_6C_control

Hey @cooltey, @Charlotte, @schoenbaechler : thanks again for your great work! We're one week out from the intended launch of our Android banners.

  1. Anything else you need from our team?
  2. Is it possible to get a preview link so we can check the banner and landing page out in advance?

Hi @spatton

Anything else you need from our team?

I'm fine unless @Charlotte or @schoenbaechler have something else.

Is it possible to get a preview link so we can check the banner and landing page out in advance?

Here are the preview screenshots: https://drive.google.com/open?id=1vQu9ZWAvRQHZLlrg_MtA1KrTBhPnLaI5

If you have an Android device and would like to try, please follow the following steps to test:

  1. Please download the Wikipedia Beta from Google Play; if you've already installed it, please update to the latest version (2019/11/25).
  1. Click on "About" on left drawer menu and tap on the Wikipedia globe logo 10 times to enable the "Developer settings".
  2. Click on "Setting" and click on the "Developer settings" icon on the top-right side.
  3. In the announcement section, please turn on the "Ignore date" and fill out country code.
    • (the in-app banner will show only after visit page 1 time.)
Dbrant added a subscriber: Dbrant.Nov 26 2019, 12:31 AM

Click on "About" on left drawer menu and tap on the Wikipedia globe logo 10 times to enable the "Developer settings"

(all while singing Impossible Dream from Man of La Mancha)

I'm fine unless @Charlotte or @schoenbaechler have something else.

Article experience looks good from a design perspective and on a Pixel 3 🚀Moving this to QA signoff. Please double check copy and CTA (Donate now) destinations per country @ABorbaWMF.

(all while singing Impossible Dream from Man of La Mancha)

😂😂😂

Thanks for the clear testing instructions @cooltey. Looks great on my Pixel 1! I tried all the target countries and the messaging seems right. Looks nice in all four themes too:

LightSepiaDarkBlack

(cc @spatton)

Thanks for checking @Pcoombe and wow, 95 tabs, respect! 👊

Dbrant closed this task as Resolved.Dec 9 2019, 5:22 PM