Page MenuHomePhabricator

YiR: Create Personal Highlights & Share flow
Closed, ResolvedPublic1 Estimated Story Points

Description

Background

This year we would like to offer users highlights from their Year in Review that they would be able to share to social media.

Requirements

  • Create the highlights slides at the end of the Year in Review
  • There should be a prominent share button on the highlights slide
  • The highlights on the slide & the image do not need to theme according to the user's app theme
  • The presentation when downloaded should resemble a Wikipedia infobox
  • Sharing the image should function on Messages, Instagram, Threads, Reddit, Facebook, X, and BlueSky
  • Highlights should vary based on if a user is logged-in and if they have EN wiki has their primary language Wikipedia:
    • Logged-out EN Wiki highlights should include:
      • Most popular articles on EN Wiki
      • # of Hours spent reading
      • # of changes editors made
    • Logged-out non-EN Wiki highlights should include:
      • # of articles viewed collectively
      • Editors on-app
      • How often Wikipedia was edited
    • Logged-in highlights should include:
      • Articles read the most (top articles)
      • Time spent
      • Favorite day to read
      • Articles read
      • Categories that interested me
      • # of articles edited (if 0 do not show)
Designs

Slides

Shareable images

Reference

iOS Implementation T402693

Event Timeline

HNordeenWMF renamed this task from YiR: Create Personal Summary & Share flow to YiR: Create Personal Highlights & Share flow.Sep 24 2025, 7:13 PM
HNordeenWMF updated the task description. (Show Details)

Note to @SChekfa-WMF to check this in multiple themes (I happened to see issue in Dark)

@WRai-WMF

TY for this! here's what i'm seeing:

Screenshot 2025-11-03 at 12.44.11 PM.png (2×986 px, 525 KB)

  • would it be possible to please round the corners of the gradient so that it feels more M3-esque? i just added this because i noticed it felt a bit odd with the angular corners! sorry for the belated update.
  • can you please ensure the correct fonts are pulled for the infobox? all text should be in helvetica within the infobox.
  • there is excess padding at the bottom of the infobox — please make sure the padding is 8px all around, if the full infobox is viewable without scrolling within the viewport. i'm seeing that you were able to adjust the infobox size to expand on large devices, which is great!
  • on a very small screen, the implementation is not following the schema set forth in the design:
    Screenshot 2025-11-03 at 12.39.45 PM.png (1×772 px, 275 KB)

please ensure that the height of the infobox is 324px so you can see the first few lines of text within the box, at least.

  • again, on a very small screen, if the infobox is truncated and scrollable, please ensure the bottom padding is not fixed at 8px as it implies the text is cut off rather than scrollable. ie, the bottom padding should be 0px if scrollable, as the padding only comes into play at the bottom of the infobox, once the user reaches the end of the unit of information.
  • please ensure that there is 32px of padding between the bottom of the infobox and the share highlights button.
  • haley and i recently updated the links at the bottom of the social share image, please update the links according to the new ones available in the design.
  • haley and i recently updated the copy for logged-out EN to indicate "most read" rather than "most popular." please update the implementation accordingly.

i'm not sure if sharing slides aside from highlights is part of this flow, but i noticed that on smaller devices, the share slide is truncating so you don't see the W logo at the top and the hashtag at the bottom of the share image:

Screenshot 2025-11-03 at 12.57.52 PM.png (1×744 px, 469 KB)

can we fix this so that the full slide is downloaded/shared?

HNordeenWMF changed the point value for this task from 5 to 1.Nov 4 2025, 5:48 PM

would it be possible to please round the corners of the gradient so that it feels more M3-esque? i just added this because i noticed it felt a bit odd with the angular corners! sorry for the belated update.
:: Done

can you please ensure the correct fonts are pulled for the infobox? all text should be in helvetica within the infobox.
:: After discussion will be using Sans-Serif, same font as we are using now.

there is excess padding at the bottom of the infobox — please make sure the padding is 8px all around, if the full infobox is viewable without scrolling within the viewport. i'm seeing that you were able to adjust the infobox size to expand on large devices, which is great!
on a very small screen, the implementation is not following the schema set forth in the design:
please ensure that the height of the infobox is 324px so you can see the first few lines of text within the box, at least.
again, on a very small screen, if the infobox is truncated and scrollable, please ensure the bottom padding is not fixed at 8px as it implies the text is cut off rather than scrollable. ie, the bottom padding should be 0px if scrollable, as the padding only comes into play at the bottom of the infobox, once the user reaches the end of the unit of information.
please ensure that there is 32px of padding between the bottom of the infobox and the share highlights button.
:: Fixed after discussing the optimal solution

haley and i recently updated the links at the bottom of the social share image, please update the links according to the new ones available in the design.
haley and i recently updated the copy for logged-out EN to indicate "most read" rather than "most popular." please update the implementation accordingly.
:: addressed in a separate task, PR

i'm not sure if sharing slides aside from highlights is part of this flow, but i noticed that on smaller devices, the share slide is truncating so you don't see the W logo at the top and the hashtag at the bottom of the share image:
:: addressed in a separate task

APK

ABorbaWMF subscribed.

Working for me on 2.7.50557-r-2025-11-14, on OnePlus 8 on Android 13, and Pixel 6 on Android 16. Tested on all themes.

Scrolling from the non-contributor slide to highlights is feeling very buggy because of the different button placement, and different text color (Share highlights has black text in "Black" mode).
https://drive.google.com/file/d/1R8nFRQq9fuK3C3coEwJo5Z90FzUbov2P/view?usp=sharing

Requested changes:

  • [Required] The button text treatment does not match original spec, please update the "Share highlights" button to the same text treatment as "Donate now" in Black mode / all themes
  • [Nice to have] The placement that was developed does match design's original speck, but Sarah and I just agreed that it would be better to match the placement of both buttons. Update the "Share highlights" button to be in the same position as "donate now" on the slides.

@WRai-WMF the button in the donation slide is properly formatted, can we please copy over that styling to the share highlights screen per @HNordeenWMF's request? see above video for reference.

Thanks @WRai-WMF. I have one more edit for this, found in PM Signoff.
Please update "Articles edited" to "Times edited" on the slide/image https://www.figma.com/design/DHj33gafvUmkiUahLSJgIM/Android---%3E-Year-in-Review-v3?node-id=20-9769&t=pztsarCJXznlOND5-4
Articles edited is not technically correct, as they could have made all the edits on a single article. We have it as "Times edited" on iOS and must have forgotten to update here

HNordeenWMF raised the priority of this task from Medium to High.Tue, Nov 18, 5:52 PM