Description

This task aims to implement an 'End of Highlight' screen that appears after a user has finished reading a highlight. The screen will present the user with a selection of highlights that they can navigate to next.

Design

Layout:

• The screen consists of a header, a 2x2 card grid section, and a footer.
• Header: Include the 'Discover more' title. The title should be vertically aligned with the back arrow. Title font size: 18px, weight: Medium, color: #202122
• Place the title "Discover more" at the top center of the screen.

Card Section:

• Use the card design consistent with the category page.
• Display 4 highlight cards in a 2x2 grid layout.

Card content & randomness logic:

• Display 4 highlight cards in a 2x2 grid, similar to the layout on the category page.
• If there are remaining[1] highlights from the current topic the user is reading, use the first slots for those.
• Fill the other slots with remaining[1] highlights from different topics.
• Include a text link at the bottom center saying "See all WikiHighlights."
• Make the text link clickable, which navigates the user to the category page.
• Text properties: Font size 14px, Weight: Medium, Color: #3366cc.

[1] The word "remaining" here refers to highlights that the user has not navigated to in the current session. This implies keeping track of which pages are seen.

Interactions:

• Tapping on a card takes the user to the respective highlight.
• Tapping on the 'See all WikiHighlights' link takes the user to the category page.
• Tapping on the back arrow at the top-left corner takes the user to the category page.

Progress bar & scroll behavior:

• For the highlight currently being read, the progress bar will reach its full state when the user arrives at the "Discover more" screen.
• Scrolling down on the "Discover more" screen allows the user to view all available options within the section but does not advance to another highlight. Scrolling up takes the user back to the previous page of the current highlight they are reading. For example, if a user is reading the 'Statue of Liberty' highlight and scrolls up, they will be taken to the beginning of this statue of liberty, not to any previous highlights they might have read.

Note: For the Long-form article microsite, a "Related Articles" section already exists.

Design file

Acceptance Criteria

• The 'Discover more' screen should load seamlessly after a user has finished reading a highlight.
• All user interactions like tapping on cards or the 'See all WikiHighlights' link should work as intended.
• The design should be responsive and should look good on different device sizes.