Overview
Goal
Add “On this Day” card to the feed as part of the overall goal of improving the feed’s ‘explorability’ by introducing new and fresher types of content.
Background
The ‘On this day’ card has been implemented on iOS since v5.6 of their app, and has been well-received by their users. Additionally, it has been requested via Android user feedback such as OTRS, as well as in the recent Android feed usage survey results (https://goo.gl/SAnzEq).
Note: Further information regarding the iOS implementation may be found on T135769
How would we like users to solve this problem or discover this solution?
Users should notice the new type of card by a distinctive new visual design and contents of the card, whilst the card shell will be harmonious with the other existing card types.
How do we know we’ve been successful?
- Increase in daily opens based on users being interested in daily new content
- Higher PVs via On this Day
- Increase in installs due to attraction of fresh content
- User feedback via reviews
Mocks of proposed designs
Interaction flow
Invision prototype: https://wikimedia.invisionapp.com/share/SKEE7H9CP
Redline mocks are shown tagged with "On this day" on Zeplin board https://zpl.io/GaRQKKV
STEPS (QA required )
- User opens the feed and sees On this day card.
- User swipes left over the inset article cards to view more associated articles for the featured event.
- User opens the On this day details view either by tapping on the On this day footer OR within the card itself (except for the inset article cards)
- Within the details view, user scrolls down to see more events (note the 'flexible space' collapses down, refer Material spec scrolling techniques)
- User scrolls a few of the inset article cards in events so they appear over the timeline illustration. User then scrolls to the bottom of the screen (whilst scrolling down, it is expected the horizontally scrolled article cards maintain their position). The user is able to tap on ‘back to top’ to quickly return to the top of the details screen.
NOTES ON DESIGN:
Feed card
Card  | With inset article cards scrolled  | Dark mode  |
- Entire card is tappable (either opening the details view, the individual articles or the overflow menu)
- Per other cards on the feed, card can be hidden by swiping right.
- Article links within the event text are highlighted by making the font-weight Roboto Medium - see T182158 for further work required on MCS to fix issues with identifying event text links
- The 'years elapsed' tag for the next event should be partially shown as a visual hint that there are more events.
- The 'featured' event is selected based on the logic applied in T169941
Details screen
Initial view  | Example on scroll  | End of events  | Dark mode  |
- Initially, only historical events from the endpoint should be shown.
- There is ideally an animation transition of the date header from the feed card to the details view (see prototype for example)
- The header in the top section of the details view is inside ‘flexible space’ that shrinks to the toolbar upon scroll.
- On scrolling, the top ‘years elapsed’ tag remains sticky until the following tag scrolls up to replace it by ‘bumping’ the top tag off-screen) - split into subtask T182155
- Each set of inset article cards can be horizontally scrolled and maintains independent scroll position regardless of the vertical scroll
- there is a dark mode for this view
Navigation when article opened from On this day
- If the device ‘back’ button is tapped, the particular article tab is closed and user returns to the On this day details screen at the same scrollpoint in the screen.
ENHANCEMENTS / V2 ‘ON THIS DAY' PROPOSALS
Filed as separate tasks
- T180385 - Enable sharing of ‘On this day’ event content as a share-a-fact card
- T180391 - Enable secondary actions on articles within On this day
- T180374 Allow the user to see all types OTD events (Births, Deaths, and Observances) in the details view along with historical events, through addition of a filter bar
- T180372 - Allow users to select other days to view from OTD details
- T180355 - Faster navigation through event details using the 'outline tool'
NOTE: Initial design explorations can be seen in the "Archive" section of the same Invision prototype
TO DO
- Integrate with the existing REST endpoint that provides on-this-day information.
- Designs for the On this day card on the feed, and the detailed view
- Analytics for new On this Day events (eventlogging added)