User Story

As a reader using Hybrid Search, I want to see familiar lexical results first and clearly labeled semantic results below, so that I can trust the results while also exploring content surfaced by meaning-based retrieval.

Description

When a user in the Hybrid Search experiment executes a search (via Enter or tapping an article title), present a two-tier results layout that separates lexical and semantic results while keeping both visible in a single results view.

The layout should:

• Preserve familiarity and trust by showing top lexical results first
• Introduce semantic results as a distinct, labeled section below
• Visually differentiate retrieval methods without overwhelming the user

Requirements

Lexical Results (Top Section)

• The top of the results page displays up to 3 lexical search results
• Results are presented in a vertical list
• Each lexical result includes:
  • Article title
  • Thumbnail image (when one exists)
• Tapping a lexical result navigates to the article page (existing behavior)
• Lexical results are based on the same ranking logic as existing search

Semantic Results (Secondary Section)

• A clearly labeled section appears below the lexical results
• Semantic section contains exactly 3 results (when available)
• Each semantic result represents a section-level excerpt returned from semantic retrieval embeddings
• Semantic results are presented in a horizontal, scrollable list
• Semantic section contains indicator that it is an experiment and an info icon that leads people to mediawiki to learn more about the experiment
• Each semantic card MUST includes:
  • Article title
  • Excerpt text
  • Provenance indicator (article and section, when available)
  • Satisfaction affordances
• Tapping a semantic result navigates to the relevant article section (ideally highlighted)

General Behavior

• Lexical and semantic results are visually distinct
• Semantic results do not replace or interleave with lexical results
• Layout applies only to users in the Hybrid Search experiment
• Control group retains existing search results layout

Design:

Figma mockup

Gif with interaction:

Note: I am not sure if this is the right highlight colour - it was in the Figma design system. The suggestion here is to use the standard highlight colour we currently use on Android so we don't have to build anything custom.

Copy and Translation: TBD