### Background
The For You tab is one of two tabs in the Wikipedia mobile app's Explore Feed (alongside Community). It delivers a personalized, immersive full-screen reading experience. Every card in the feed shares a consistent chrome layer and navigation system that must be defined before individual modules are built.
Every For You card shares the same persistent chrome: Wikipedia logo (top left), Community tab access, language switcher dropdown (showing user-configured languages + link to language settings; changing language refreshes the module content in the selected language without leaving the module), and notification bell. The bottom navigation bar is always visible.
The feed is vertical: users scroll down (drag finger bottom-to-top) to advance through modules. Scrolling up (drag finger top-to-bottom) moves backward through the feed. Within each module, users swipe horizontally (left/right) to move between cards in that module's stack. Reaching the end of the feed and scrolling down returns users to the top of the stack.
###User Story
As a Wikipedia reader, I want every card in the For You feed to have consistent navigation controls, so that I always know how to get to my notifications, switch languages, and move between the Community and For You tabs regardless of which module I'm on.
###Requirements
Card layout
- Each card in the For You feed is full-screen immersive, with only the bottom navigation bar persisting below card content.
- The Wikipedia wordmark is displayed at the top left of every card.
- A tab switcher (Community / For you) is accessible at the top of every card.
- A language switcher dropdown is accessible at the top of every card. It lists all languages the user has configured. Selecting a language refreshes the feed to that language. A 'Manage languages' option at the bottom of the dropdown navigates to the language settings screen.
- A notification bell icon is accessible at the top of every card. It shows a badge when unread notifications are present. (Only shows for logged-in users)
- Each card has a three-dot more menu. Tapping it presents 4 options: Save/Remove from Saved, Share, Hide this card, Hide module, Customize interests.
- Save/Remove from Saved: Saves article to reading list
- Share: Opens share dialog
- Hide module: turns off the entire module in Explore Feed settings (For recommendations, this turns off all "Based on your interest" recommendations, not just the single topic)
- Hide this card: removes this articles suggestion from their screen. System remembers hidden state locally on device and does not show article again within "For you"
- Customize Interests: Leads to settings for "For you" modules (built on separate task)
- There are 3 variants of card format: randomly select a variant for each article in the stack so the user has variety while swiping horizontally
- For all article variants, display
- Reason label ('Because of your interest: [Interest]')
- Article title
- Card position indicator
- Three-dot more menu
- For the First and fourth article in stack: **Variant 1: Balanced**
- Full image in background
- Short text (first paragraph) excerpt from the article.
- Second article in stack: **Variant 2: Image-focused**
- Full image in background
- Article description (omit if no article description exists)
- Third article in stack: **Variant 3: Text-focused**
- No image
- Text extract
- Random color variation as background as shown in Figma
- In any scenario, if no image is available, a background color is shown instead. Design of card is slightly modified ([[ https://www.figma.com/design/VwBaV9KZ7LWfOY2dt1BJyQ/explore-feed-explorations?node-id=4795-94506&t=ELodzU7oCq3WFcRb-4 | Figma ]])
- Tapping a card navigates the user to the full article.
Behavior
- Vertical swipe (bottom-to-top) advances to the next module. Vertical swipe (top-to-bottom) goes back to the previous module.
- Horizontal swipe (right-to-left) advances to the next card within a module. Horizontal swipe (left-to-right) returns to the previous card within a module.
- When users reach the end of the feed, scrolling should stop
- Automatically refresh the feed automatically every calendar day (early in the local day for the user). After the daily refresh, do not automatically refresh the feed unless the user chooses to.
- Allow users to pull down to manually refresh
- On refresh, check for updates to the user's history and interests (i.e. if they have cleared their history, or removed one item from history, that history should not be used to calculate the feed after refresh)
Cross-module checks:
- Duplicate articles should not show up in the same carousel in the same module on the same Day (i.e. Continue reading & Saved articles)
- Duplicate articles should not show up in different modules on the same day (i.e. Because you read & Because of your interest:)
- Articles hidden using "Hide this card" should remain hidden on the feed indefinitely
#### Module order
- Based on your Interests
- Because You Read (Based on your reading history)
- Continue Reading
- Places of Interest [Phase 2]
- Discover [Phase 2]
- Random [Phase 2]
- Games Teaser [Phase 2]
###Design
[[ https://www.figma.com/design/VwBaV9KZ7LWfOY2dt1BJyQ/explore-feed-explorations?node-id=4829-90252&t=tIGBy8POGwcNjQdJ-4| Figma file → ]]
Note: The UI chrome stays persistent while content cards animate in and out on swipe. This minimizes context switching and keeps users oriented within the app. Example of interaction here (please do not consider styling, the Figma file is the source of truth for that). For accurate visualization, enable responsive mode in browser DevTools - https://tlessa.github.io/explore-feed/for-you/index.html
####Android tasks for reference
https://phabricator.wikimedia.org/T419626
https://phabricator.wikimedia.org/T427571
https://phabricator.wikimedia.org/T423957
### Toni Handoff Notes
//Based on progress at PR https://github.com/wikimedia/wikipedia-ios/pull/5995 //
Things remaining todo:
- Fix design so it is full screen
- Tab switcher should be redone to match design
- Language switcher design should be fixed to match design
- Card designs should be updated to match design (layout + fonts, position of the more button, etc)
- Ensure design looks good on all iPhone sizes, rotation, dynamic type, themes, iPad.
> Each card has a three-dot more menu. Tapping it presents 4 options: Save/Remove from Saved, Share, Hide this card, Hide module, Customize interests.
We need save / unsave and share functionality. Three-dot more menu Hide options + Customize Interests are done.
> There are 3 variants of card format:
Right now there is only a single design. We need to add variant designs.
> Tapping a card navigates the user to the full article.
Need to add this navigation.
> Automatically refresh the feed automatically every calendar day (early in the local day for the user). After the daily refresh, do not automatically refresh the feed unless the user chooses to.
We should test this. It should work when an app is launched from termination, but we may need to check and try to fetch the data again (fetchCommunity & fetchForYou) upon foreground. I suspect if a user backgrounds on one day, and foregrounds on the next day, will still see the previous day's data.
Q: Should we have BackgroundTasks run a the main fetchCommunity / fetchForYou to hydrate the cache?
> Duplicate articles should not show up in the same carousel in the same module on the same Day (i.e. Continue reading & Saved articles)
This still needs to be done.
> Duplicate articles should not show up in different modules on the same day (i.e. Because you read & Because of your interest:)
This still needs to be done.
> Articles hidden using "Hide this card" should remain hidden on the feed indefinitely
Note I matched Android here, which is item-bound by 100 items. We should double-check that this is okay.