Background

This task describes how the highlight home & category page should look like and behave:

• View all 7 categories: HISTORY, LIFESTYLE, PLACES, PERSONALITIES, SPORT, TOPICAL, NATURE
• Each category has 4 highlights

Description/User story

As an 18-24 year old that lands on a highlight,
I want to read related content within the same topic,
so that I can get a deeper understanding of other subjects.

As an 18-24 year old that lands on a highlight,
I want to read related content across other topics,
so that I can get a deeper understanding of other subjects.

Design

Overview:
The purpose is to create a mobile web page for users to navigate through different categories and dive into various highlights.

Categories Display:

• • Seven categories:
    • History
    • Lifestyle
    • Places
    • Personalities
    • Sport
    • Topical
    • Nature
• Each category presents 4 distinct highlights.

Highlight Cards:

• Dimensions: The card design is optimized for a dimension of approximately 166x280 px. These dimensions are suggestive and adaptable to various mobile screen widths, maintaining the overall aesthetic, consistent padding, and margins.
• Division: Each card is divided into two sections:
• The top portion dedicated to an image.
• The lower section reserved for the text content.
• Text:
  • Title: Positioned at the top of the text section, styled in a bold font, suggesting around 14 px as a base size.
  • Subtitle/Preview: Suggested base size of 14 px and regular font. This text provides a brief overview of the highlight, truncated after 3 lines.
• Styling Enhancements:
  • Consider adding a subtle shadow for depth.
  • A border between the image and text sections aids visual separation.

Content Source:

• The content for the Wikihighlights microsite will be sourced from a prepared Google spreadsheet.
• The spreadsheet is organized into various "Tabs," each representing one of the seven categories: History, Lifestyle, Places, Personalities, Sport, Topical, and Nature.
• Within each category "Tab," there are up to 7 individual Wikihighlight titles. For instance, under the "History" tab, you might find entries like "Rosetta Stone", "Statue of Liberty", "Buckingham Palace", and "Ancient Egypt".
• Beneath each Wikihighlight title, there are detailed highlights. These highlights provide the in-depth information associated with the title.
• For the microsite's home page, use the very first detailed highlight listed beneath each Wikihighlight title as the preview text and image for the thumbnail.

List of all the highlights to be used.

Note: The homepage for both the Wikihighlights microsite and the Longtext microsite will share the same layout design, featuring a 2x2 grid.

User interactions

• Vertical Scrolling: Users can effortlessly scroll down to discover all categories and associated highlights.
• Card Tap: A simple tap on any highlight card leads the user to its detailed view.
• Device Back Key:
  • From the detailed highlight view: Takes users to the highlights homepage.
  • From the homepage: Exits the microsite.

Design File

Note: The design and user interactions are crafted explicitly for mobile web users.

Acceptance Criteria

• Upon loading, the homepage should accurately display all categories and their respective highlight cards.
• Users should have the ability to tap on any highlight, redirecting them to the detailed view.
• The homepage must support smooth vertical scrolling functionality.
• The device's back key must consistently return users to the previous view or, if on the homepage, exit the microsite.

Test Scenarios

TBA

Open questions

• Should a user be able to view & navigate to the longtext view?
  • No.