Brand exploration · 15 October 2026

Directories round

Every list page answers one question: which of these is for me, and what do I do next? One catalog pattern and one item detail pattern answer it across the scholarship directory, the benefits list, site search and university pages. Twelve decisions shape them. Each shows A, B and C as live mockups built from brand.css; the chosen option is marked. Recipes: R8 Catalog and R9 Item detail.

Directories round decisions
DecisionChosen
D1. Filter layoutA. Filter panel above the results
D2. Filtering mechanicsA. Server-side GET
D3. PagingA. Numbered pager, 24 per page
D4. CardA. One card family with variants
D5. Detail layoutA. Main column and key-facts aside
D6. Scholarship directory first viewA. Honor Society® scholarships first
D7. Scholarship filtersA. Three curated dimensions and a keyword
D8. Scholarship amountA. Parsed from the name
D9. Benefits orderA. Ready to use first
D10. Benefit detailA. Detail pattern with the redeem area in the facts
D11. Search resultsA. One mixed list with type chips
D12. Search with no resultsA. Help, not a dead end
Decision D1 of 12

D1. Filter layout

Decided: A. Filter panel above the results

Where do the filters sit on a catalog page?

Today: the scholarship directory has no working filters; the benefits list filters by category chips over one list.

A. Filter panel above the results

Chosen
Filters

1,003 scholarships

Sort byName, A to Z
Shape
.hs-filter: one row of selects from 48rem; a “Filters” disclosure with the active count on phones
Use
every catalog with two or more dimensions
Decision D2 of 12

D2. Filtering mechanics

Decided: A. Server-side GET

Where does a filter run, and what does the URL hold?

Today: the scholarship directory loads its list in the browser; the benefits list filters 33 items in the page.

A. Server-side GET

Chosen

/scholarship-directory?for=graduate&type=grant&page=2

46 scholarships

Shape
query parameters, real links, a full page per state; works without JavaScript
Use
the scholarship directory and site search

B. Client-side filtering of everything

/scholarship-directory

All 1,003 records load, then a script hides the rest.

Shape
every record in the page; buttons toggle what shows
Use
short lists only (about 40 items)

C. Script calls a JSON endpoint

/scholarship-directory#graduate,grant

The list swaps in place. Without the script, the page shows no list.

Shape
a script fetches filtered results and swaps the grid
Use
an app view, not a public catalog
Decision D3 of 12

D3. Paging

Decided: A. Numbered pager, 24 per page

How does a long result list continue past the first screen?

Today: the scholarship directory shows every record on one page.

A. Numbered pager, 24 per page

Chosen
Shape
.hs-pager with real links (?page=2)
Use
every catalog over 24 items

B. Load more

Showing 24 of 1,003 scholarships

Show the next 24
Shape
.hs-load-more: a navy button appends the next 24
Use
a feed read top to bottom

C. Infinite scroll

Cards keep loading as the visitor scrolls. The footer moves away each time.

Shape
a script loads the next page at the end of the list
Use
not used on this site
Decision D4 of 12

D4. Card

Decided: A. One card family with variants

What does one item look like in each catalog?

Today: each list prints its own card markup: the benefits card, the directory card in the browser app, the article teaser, the university list item.

B. A new card per page

  • SCHOLARSHIP

    Example Leadership Award

    $2,500 · Apply by Dec 15

  • 20% off

    Example Learning Co.

  • How to write a scholarship essay

    Read the article

  • Example State University
Shape
four blocks with four paddings, title styles and fact orders
Use
not used
Decision D5 of 12

D5. Detail layout

Decided: A. Main column and key-facts aside

Where do an item’s facts and its action sit on its own page?

Today: the scholarship detail prints the description, then a link; the benefit detail prints long text, then the redeem panel.

A. Main column and key-facts aside

Chosen

Scholarship

$1,000 Example Community Grant

The Example Community Grant supports graduate students who plan a career in public health. Applicants describe a health need in their community and a plan to meet it.

The provider reads every application and names one recipient each spring.

Shape
.hs-detail + .hs-facts: aside sticky from 62rem; below 62rem the facts come right after the head
Use
scholarship, benefit and university pages

B. Facts strip under the head

Scholarship

$1,000 Example Community Grant

Amount
$1,000
Offered by
examplefoundation.org
Who it’s for
Graduate students

The Example Community Grant supports graduate students who plan a career in public health. Applicants describe a health need in their community and a plan to meet it.

The provider reads every application and names one recipient each spring.

Apply on examplefoundation.org

Shape
a row of facts under the head, the action after the text
Use
a page with two or three facts and no action

C. Facts in the hero

Scholarship

$1,000 Example Community Grant

$1,000 · examplefoundation.org · Graduate students

Apply on examplefoundation.org

The Example Community Grant supports graduate students who plan a career in public health. Applicants describe a health need in their community and a plan to meet it.

The provider reads every application and names one recipient each spring.

Shape
a navy hero with the facts and the action, as the award hero
Use
the site’s own award pages (R2)
Decision D6 of 12

D6. Scholarship directory first view

Decided: A. Honor Society® scholarships first

What does the scholarship directory show before any filter?

Today: the site’s own awards sit among 1,003 records in alphabetical order.

A. Honor Society® scholarships band first

Chosen

Honor Society® scholarships

All scholarships

1,003 scholarships

Shape
a band of the site’s own awards on the unfiltered first page, then the full catalog
Use
the scholarship directory
Decision D7 of 12

D7. Scholarship filters

Decided: A. Three curated dimensions and a keyword

Which filters does the scholarship directory offer?

Today: the directory’s tags mix award types, audiences and hundreds of imported school names.

A. Who it’s for, type, offered by, keyword

Chosen
Filters 2
Clear all
Shape
three selects with visitor words from a curated map in code, plus the keyword
Use
the scholarship directory

B. Every tag as a filter

One checkbox per tag, several hundred in all.

Shape
one checkbox per stored tag
Use
not used

C. Keyword only

Shape
one search field, no filters
Use
a list with one dimension
Decision D8 of 12

D8. Scholarship amount

Decided: A. Parsed from the name

Where does the amount on a scholarship card come from?

Today: there is no amount field; some names start with an amount (“$1,000 …”).

Decision D9 of 12

D9. Benefits order

Decided: A. Ready to use first

In what order does the benefits list show its benefits?

Today: Signature first, then Gold, Silver, Bronze and the free benefits last, with the same upsell after each tier.

A. Ready to use first, one upsell band

Chosen

Ready to use

  • 20% off

    Example Learning Co.

    Online test prep for the GRE, GMAT and LSAT.

    Ready to useView benefit

  • 15% off

    Example Books Co.

    Textbooks and study guides.

    Ready to useView benefit

With a membership tier

  • $50 off

    Example Travel Co.

    A discount on a first booking.

    Bronze and upSee tiers

  • 30% off

    Sample Software Co.

    Office and design software.

    Gold and upSee tiers
Unlock these with a membership tierSee tiers
Shape
the benefits the viewer can use now first (free benefits for a visitor), then the higher tiers, then one upsell band
Use
the benefits list

B. Tier order, an upsell per tier

Signature

  • 30% off

    Sample Software Co.

    Office and design software.

    Gold and upSee tiers
Unlock these with a membership tierSee tiers

Bronze

  • $50 off

    Example Travel Co.

    A discount on a first booking.

    Bronze and upSee tiers
Unlock these with a membership tierSee tiers

Free

  • 15% off

    Example Books Co.

    Textbooks and study guides.

    Ready to useView benefit
Shape
Signature to Free, with the same upsell after each tier
Use
not used

C. A to Z by partner

  • 15% off

    Example Books Co.

    Textbooks and study guides.

    Ready to useView benefit

  • 20% off

    Example Learning Co.

    Online test prep for the GRE, GMAT and LSAT.

    Ready to useView benefit

  • $50 off

    Example Travel Co.

    A discount on a first booking.

    Bronze and upSee tiers

  • 30% off

    Sample Software Co.

    Office and design software.

    Gold and upSee tiers
Shape
one list by partner name, tiers mixed
Use
a long list searched by partner name
Decision D10 of 12

D10. Benefit detail

Decided: A. Detail pattern with the redeem area in the facts

How does a benefit page put the value, the terms and the redeem area in order?

Today: a long description and a longer disclaimer, then the redeem panel at the end.

A. Detail pattern

Chosen

Benefit · Test prep

Example Learning Co.

Example Learning Co. runs online test prep courses for the GRE, GMAT and LSAT. Members save 20% on any course.

Terms

One code per member. The discount applies to the course price before tax and cannot be combined with other offers. The partner sets and may change its own terms.

Shape
facts aside (value, category, membership needed, how to redeem) holds the redeem area; the terms move into a disclosure block
Use
every benefit page

B. Long text, then the panel

Benefit · Test prep

Example Learning Co.

Example Learning Co. runs online test prep courses for the GRE, GMAT and LSAT. Members save 20% on any course.

One code per member. The discount applies to the course price before tax and cannot be combined with other offers. The partner sets and may change its own terms.

One code per member. The discount applies to the course price before tax and cannot be combined with other offers. The partner sets and may change its own terms.

RedeemGet the code
Shape
the page as today, restyled
Use
not used

C. A navy offer hero

Benefit

20% off at Example Learning Co.

Get the code

Example Learning Co. runs online test prep courses for the GRE, GMAT and LSAT. Members save 20% on any course.

One code per member. The discount applies to the course price before tax and cannot be combined with other offers. The partner sets and may change its own terms.

Shape
a new navy hero for benefits, beside the award hero
Use
not used: one more opener to keep
Decision D11 of 12

D11. Search results

Decided: A. One mixed list with type chips

How does site search show results of different types?

Today: one list of titles with author names; university stubs fill most of it.

A. One mixed list with type chips

Chosen

38 results for “leadership”

  1. Scholarship Open

    $2,500 Example Leadership Award

    /example-leadership-award

    For students who show leadership through a service project.

  2. Benefit

    Example Learning Co.

    /benefits/example-learning-co

    20% off courses in leadership and public speaking.

Shape
one ranked list, a type label on each row, chips filter by type; university stubs left out unless asked for
Use
site search

B. Grouped by type

Scholarships 12 results

  1. Scholarship Open

    $2,500 Example Leadership Award

    /example-leadership-award

    For students who show leadership through a service project.

Benefits 4 results

  1. Benefit

    Example Learning Co.

    /benefits/example-learning-co

    20% off courses in leadership and public speaking.

Shape
one group per type with its own count
Use
not used: it breaks the ranking
Decision D12 of 12

D12. Search with no results

Decided: A. Help, not a dead end

What does a search or a filter show when nothing matches?

Today: “Your search yielded no results” and nothing else.

A. Help, not a dead end

Chosen

No results for “nursng”.

Check the spelling or try a shorter word. You can also clear all filters.

Popular pages

Shape
.hs-empty--search: spelling tip, clear-filter link, popular destinations
Use
site search and every catalog

B. One line

Your search yielded no results.

Shape
a sentence, no route
Use
not used

C. Show the nearest spelling

Showing results for nursing. Search instead for nursng.

  1. Scholarship Open

    $2,500 Example Leadership Award

    /example-leadership-award

    For students who show leadership through a service project.

Shape
a script or search service guesses the intended word
Use
only with a search service that suggests spellings
Decided

Decided while building

Each entry states the decision and its reason.

  • D13. Brand classes on code pages. A second generated copy of the components is scoped to .hs-brand. Page head, hero and award hero stay out of it. Code pages keep their own page head.
  • D14. Bands and page column. Bands keep the page column and paint a full-width ground. There is no full-width page template. One column width across every page.
  • D15. Tracking values. Tracking values on code templates stay unchanged. New routes get new stable values. Existing reports keep their meaning.
  • D16. One gold per viewport. The site header's Join button is chrome and does not count; the search button and the key-facts action are gold. A single gold element marks the one action that matters.
  • D17. Keyword parameter. The scholarship directory uses search. Site search uses keys. The platform reserves q.
  • D18. Own scholarships band. The band shows six cards and a link to all of them. The full directory stays near the top on phones.
  • D19. Site search sources. Site search adds scholarships and benefits from their own lists. Scholarships come last in “All”. The core index covers pages and articles only, and most scholarship names contain the word “scholarship”.
  • D20. Benefits order. “Ready to use” comes first, then one block per higher tier, then one upsell band. The tier jump navigation is removed. The order already answers “what can I use now”.
  • D21. Breadcrumb trails. Two-step trails (university, scholarship directory) stay in the structured data only. Deeper trails show. A two-step trail repeats the page head.
  • D22. Scholarship card amount. A card shows the amount only when the name states it. The brand shows no invented figures.
Pending

Next round

These pages keep their current layout for now. Each is a pending item for a later round.

  • Honor Society award pages move to brand recipes (editor content).
  • The scholarships hub /scholarships: rebuild on R1, then decide whether it redirects to the directory.
  • Magazine (/articles) cards and pager move to the shared components.
  • Recipient pages.
  • A search entry in the site header for visitors.
  • Scholarship data: deadline and eligibility fields.
  • Thin taxonomy pages for honor society types.
  • University chapter redirects at router level.