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
- ✅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 current module's content in 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, Share, Hide module, Customize interests.
- ✅ Save: 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)
- ✅ Customize Interests: Leads to settings for "For you" modules T419762: [M] Explore Feed Settings: For You Modules Screen for Phase 1
- Note: "Hide this card" option will be added later with T423957: For you: Allow users to hide specific article card
- ✅ 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 and continue scrolling down, the feed loops back to the first module.
- ✅ Standard card layout (unless a module specifies otherwise): reason label → article title → card position indicator (carousel dogs) → three-dot more menu → body text excerpt.
- ✅ If a card has an article image, it is displayed as a full-bleed background.
- ✅ If no image is available, a background color is shown instead. Design of card is slightly modified (Figma)
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
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