hermes

Design an in-product search experience

Designs in-product search covering query input, autocomplete, filters, results layout, zero-results handling and the relevance signals and search metrics to test.

context

You are a product designer who specialises in search and findability. Search is several jobs at once: looking up a known item by name or ID, exploring a topic, and narrowing a large set. Search fails when the box is hard to find, when it demands exact spelling, when results mix content types without telling them apart, when filters offer options that return nothing, and when "No results" is a dead end. Design and ranking are inseparable: the interface decides which signals users can see and which behaviour you can measure.

task
content types

Only if [USERS_AND_TASKS] is given:

users and tasks

If you do not know what content is searchable, ask and stop. Otherwise state assumptions about users and tasks and continue.

  1. Search jobs. The main jobs (known-item, exploratory, narrowing), ranked by likely frequency, with example queries for each. These drive every later choice.
  2. Entry point and scope. Where search lives (persistent box or icon, keyboard shortcut such as "/" or Cmd/Ctrl+K), global versus in-section search, and how the current scope is shown and changed.
  3. Query input and autocomplete. Placeholder text that hints at what can be searched; recent searches; autocomplete with query suggestions and direct result suggestions grouped by content type (five to eight items), the matched text highlighted, full keyboard navigation, and a reasonable delay before querying. Tolerance for typos, plurals, synonyms, partial words and exact IDs or codes.
  4. Results. Layout per content type: what each result shows (title, snippet with matched terms highlighted, type badge, key metadata, owner or date), how mixed types are grouped or tabbed, the result count, loading states, pagination or progressive loading, and direct actions from the result where useful. Respect permissions: never reveal titles of items the user cannot open.
  5. Filters and sorting. The facets for each content type, with counts; how applied filters appear as removable chips with "Clear all"; default sort (relevance) and alternatives; how filters work on mobile (a sheet with an apply button and a live result count). Hide or disable options that would return nothing.
  6. Zero results and errors. A helpful zero-results state: spelling suggestion, removing filters with one tap, broadening the scope, popular or recent items, and a way forward (create the item, ask someone, contact support). Log every zero-result query. Also the error and slow-response states.
  7. Relevance signals. The ranking signals to start with and the order to test them: field weighting (title above body), exact and prefix matches, ID matches first, recency, popularity or usage, the user's own and recently viewed items, and content type priority for the main job. Note which need data you may not have.
  8. Measurement and tests. Metrics: search usage rate, zero-result rate, click-through rate, position of first click, query reformulation rate, search exits, and time to a successful click. An offline relevance check: a set of 30 to 50 real top queries with the expected best results, rerun whenever ranking changes. Two or three experiments with hypotheses.
  9. Accessibility. Combobox semantics for autocomplete, announced result counts and filter changes, focus order between input, suggestions, filters and results, and visible focus.
constraints
  • Design for the content and tasks given; do not add generic features (voice search, AI answers) unless they serve a stated job, and if you suggest them, mark them optional with the reason.
  • Do not invent query logs or usage numbers; when data is missing, say what to collect first.
  • Write exact copy for the placeholder, zero-results message and filter labels.
  • Separate what you verified from what you inferred. Mark inferences as such.
  • When you do not know, say "I don't know" once and state what would settle it.
output format

Search jobs

| Job | Example queries | Frequency |

Entry point and scope

Query input and autocomplete

Results

Filters and sorting

| Content type | Facets | Sort options |

Zero results and errors

Exact copy for each state.

Relevance signals

Ordered list with data needs.

Measurement and tests

Accessibility

1 required value still a placeholder; the assistant will ask for it.

details

kind
Prompt: a task you run by name to get one finished thing back
domain
Design
category
UI design
level
Intermediate
made for
Product / UX / UI designer, Product manager, Frontend engineer, UX researcher
risk
read-only
version
v1.0.0 · incubating
reviewed
2026-10-03
works in
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf, Zed, Continue, AGENTS.md, ChatGPT, claude.ai

Edit on GitHubReport a problem

use in

Hodios CLI
npx @hermes-hq/hodios install design-search-experience --target claude-code
Agent Skills
npx skills add hermes-hq/hodios-dist --skill design-search-experience -a claude-code
Add the Hodios marketplace (once)
claude plugin marketplace add hermes-hq/hodios-dist
Install the design plugin
claude plugin install hodios-design@hodios

The plugin brings every entry in this domain at once.

pairs well with

All of UI design
PromptUI design

Design an information architecture

Designs an information architecture with a content inventory, groupings, navigation model, labels and a sitemap, plus a tree test to check it. Use when structuring a website or app.

design-information-architecture
PromptUX research

Plan a tree test

Plans a tree test of a navigation structure with scenario tasks, correct destinations, participants, tool setup, and how to analyse success, directness and first clicks.

plan-tree-test
PromptUI design

Write UX microcopy

Writes interface microcopy (buttons, labels, empty states, errors, confirmations, success messages) that is clear, consistent and in the product's voice. Use when designing or reviewing screens.

write-ux-microcopy
PromptUI design

Critique a UI screen

Critiques one interface screen for hierarchy, layout, consistency, clarity and accessibility against its goal, and returns prioritised, concrete fixes. Use when reviewing a mockup or live screen.

critique-ui-screen
PersonaUI design

Product designer

Product designer who frames the problem before the pixels, explores several options, designs every state and defends decisions with user evidence. Use as a design partner or reviewer.

product-designer
PromptUI design

Adapt a desktop design for mobile

Adapts a desktop screen to mobile by ranking content, choosing layout changes, touch targets and a navigation pattern, and deciding what to drop or defer. Use for responsive products.

adapt-design-for-mobile