A 'search for an establishment' journey. It has a page with a search box, an establishments results page with list items, and an establishment details page.

When to use this pattern

There are 2 variations you can use, depending on the context:

  1. Read information about an establishment. Use this variation to help users find detailed information about an establishment, like an academy trust or a school.
  2. Select an establishment. Use this one to help users store details about an establishment. For example, in a project on a case management system.

Read information about an establishment

The variation has 3 pages:

  1. Page with a search box, for basic keyword searching.
  2. Establishment results list, showing the most important information about each establishment. Allow users to choose which option they want to see detailed information about.
  3. Establishment details, showing detailed information about the selected establishment.
A 'search for an establishment' journey. It has a page with a search box, an establishments results page with list items, and an establishment details page.
A 'search for an establishment' journey. It has a page with a search box, an establishments results page with list items, and an establishment details page.

Page with a search box

Contents

Open this example (Page with a search box (basic)) in a new tab 

      
<div class="govuk-grid-row">
  <div class="govuk-grid-column-full">
    <h1 class="govuk-heading-xl">
      Search for a trust by name or reference number
    </h1>
  </div>
  <div class="govuk-grid-column-two-thirds">
    <div class="govuk-form-group">
      <div id="trustID-hint" class="govuk-hint">
        For example, a TRN (trust reference number) or UKPRN (UK provider reference number)
      </div>
      <input class="govuk-input govuk-!-margin-bottom-6" id="trustID" name="trustID" type="text" aria-describedby="trustID-hint">
    </div>
    <button type="submit" class="govuk-button" data-module="govuk-button">
      Continue
    </button>
  </div>
</div>
We have not been able to create Nunjucks for this pattern. If you have any problems implementing this pattern, ask in the #rsd-ucd-community-public Slack channel.

Establishment results list

Contents

Open this example (Establishment results list) in a new tab 

      
<div class="govuk-grid-row">
  <div class="govuk-grid-column-full">
    <h1 class="govuk-heading-xl">
      3 results for "trust"
    </h1>
  </div>
  <div class="govuk-grid-column-two-thirds">
    <div>
      <h2 class="govuk-heading-m"><a href="#" class="govuk-link">Test Academy Trust</a></h2>
      <p>Enough information about the establishment, to help users select one from the list</p>
    </div>
    <div>
      <h2 class="govuk-heading-m"><a href="#" class="govuk-link">Testwood Trust</a></h2>
      <p>Enough information about the establishment, to help users select one from the list</p>
    </div>
    <div>
      <h2 class="govuk-heading-m"><a href="#" class="govuk-link">Testing Patience Trust</a></h2>
      <p>Enough information about the establishment, to help users select one from the list</p>
    </div>
  </div>
</div>
We have not been able to create Nunjucks for this pattern. If you have any problems implementing this pattern, ask in the #rsd-ucd-community-public Slack channel.

Establishment details

Contents

Open this example (Establishment details (read only)) in a new tab 

      
<div class="govuk-grid-row">
  <div class="govuk-grid-column-full">
    <h1 class="govuk-heading-xl">
      Test Academy Trust
    </h1>
  </div>
  <div class="govuk-grid-column-full">
    <p>You can show the academy trust details on this page in any format. For example:</p>
    <div class="govuk-form-group">
      <dl class="govuk-summary-list govuk-summary-list--no-border">        
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">
            TRN (trust reference number) 
          </dt>
          <dd class="govuk-summary-list__value">
            TRN00011
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">
            Trust type
          </dt>
          <dd class="govuk-summary-list__value">
            Multi-academy trust
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">
            Address
          </dt>
          <dd class="govuk-summary-list__value">
            Testwood School Testwood Lane, Totton, Southampton, SO40 3ZW
          </dd>
        </div>
      </dl>
    </div>
  </div>
</div>
We have not been able to create Nunjucks for this pattern. If you have any problems implementing this pattern, ask in the #rsd-ucd-community-public Slack channel.

Progressive enhancement

You can use the autocomplete component on GitHub as a progressive enhancement to the search box.

This will reduce the number of pages in the journey to 2:

  1. Page with a search box. Present a list of results under the text input, as users type. When users select a result from the dynamic search list and then Continue, take them to the next page.
  2. Establishment details, showing detailed information about the selected establishment.
A 'search for an establishment' journey. It has a page with a search box and autocomplete as a progressive enhancement. It also has an establishment details page.
A 'search for an establishment' journey. It has a page with a search box and autocomplete as a progressive enhancement. It also has an establishment details page.

Page with a search box (autocomplete)

Contents

Open this example (Page with a search box (progressive enhancement)) in a new tab
We have not been able to create Nunjucks for this pattern. If you have any problems implementing this pattern, ask in the #rsd-ucd-community-public Slack channel.

Select an establishment

This variation has 3 pages:

  1. Page with a search box, for basic keyword searching.
  2. Establishment results list, showing the most important information about each establishment. Allow users to select an option from the list.
  3. Establishment details, showing detailed information about the selected establishment. Allow users to confirm if this is the establishment they were looking for. If it is, let them select it so they can store information about it somewhere. If it's not, take them back to the establishment results list.
A 'search for an establishment' journey. It has a page with a search box, an establishments results page with radio items, and an establishment details page with an 'Is this the correct establishment?' radio button.
A 'search for an establishment' journey. It has a page with a search box, an establishments results page with radio items, and an establishment details page with an 'Is this the correct establishment?' radio button.

Page with a search box

Contents

Open this example (Page with a search box (basic)) in a new tab 

      
<div class="govuk-grid-row">
  <div class="govuk-grid-column-full">
    <h1 class="govuk-heading-xl">
      Search for a trust by name or reference number
    </h1>
  </div>
  <div class="govuk-grid-column-two-thirds">
    <div class="govuk-form-group">
      <div id="trustID-hint" class="govuk-hint">
        For example, a TRN (trust reference number) or UKPRN (UK provider reference number)
      </div>
      <input class="govuk-input govuk-!-margin-bottom-6" id="trustID" name="trustID" type="text" aria-describedby="trustID-hint">
    </div>
    <button type="submit" class="govuk-button" data-module="govuk-button">
      Continue
    </button>
  </div>
</div>
We have not been able to create Nunjucks for this pattern. If you have any problems implementing this pattern, ask in the #rsd-ucd-community-public Slack channel.

Establishment results list

Contents

Open this example (Establishment results list (select establishment)) in a new tab 

      
<div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds">
    <div class="govuk-form-group">
      <fieldset class="govuk-fieldset" aria-describedby="searchResult-hint">
        <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
          <h1 class="govuk-fieldset__heading">
            3 results for "trust"
          </h1>
        </legend>
        <div class="govuk-radios" data-module="govuk-radios">
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="searchResult" name="searchResult" type="radio" value="Test Academy Trust" aria-describedby="searchResult-item-hint">
            <label class="govuk-label govuk-radios__label" for="searchResult">
              Test Academy Trust
            </label>
            <div id="searchResult-item-hint" class="govuk-hint govuk-radios__hint">
              Enough information about the establishment, to help users select one from the list
            </div>
          </div>
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="searchResult-2" name="searchResult" type="radio" value="Testwood Trust" aria-describedby="searchResult-2-item-hint">
            <label class="govuk-label govuk-radios__label" for="searchResult-2">
              Testwood Trust
            </label>
            <div id="searchResult-2-item-hint" class="govuk-hint govuk-radios__hint">
              Enough information about the establishment, to help users select one from the list
            </div>
          </div>
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="searchResult-3" name="searchResult" type="radio" value="Testing Patience Trust" aria-describedby="searchResult-3-item-hint">
            <label class="govuk-label govuk-radios__label" for="searchResult-3">
              Testing Patience Trust
            </label>
            <div id="searchResult-3-item-hint" class="govuk-hint govuk-radios__hint">
              Enough information about the establishment, to help users select one from the list
            </div>
          </div>
        </div>
      </fieldset>
    </div>
    <button type="submit" class="govuk-button" data-module="govuk-button">
      Continue
    </button>
  </div>
</div>
We have not been able to create Nunjucks for this pattern. If you have any problems implementing this pattern, ask in the #rsd-ucd-community-public Slack channel.

Establishment details

Contents

Open this example (Establishment details (select establishment)) in a new tab 

      
<div class="govuk-grid-row">
  <div class="govuk-grid-column-full">
    <h1 class="govuk-heading-xl">
      Test Academy Trust
    </h1>
  </div>
  <div class="govuk-grid-column-full">
    <p>You can show the academy trust details on this page in any format. For example:</p>
    <div class="govuk-form-group">
      <dl class="govuk-summary-list govuk-summary-list--no-border">        
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">
            TRN (trust reference number) 
          </dt>
          <dd class="govuk-summary-list__value">
            TRN00011
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">
            Trust type
          </dt>
          <dd class="govuk-summary-list__value">
            Multi-academy trust
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">
            Address
          </dt>
          <dd class="govuk-summary-list__value">
            Testwood School Testwood Lane, Totton, Southampton, SO40 3ZW
          </dd>
        </div>
      </dl>
    </div>
    <div class="govuk-form-group">
      <fieldset class="govuk-fieldset">
        <legend class="govuk-fieldset__legend govuk-fieldset__legend--l govuk-!-margin-bottom-6">
          Is this the correct trust?
        </legend>
        <div class="govuk-radios" data-module="govuk-radios">
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="confirm-trust-result" name="confirm-trust-result" type="radio" value="Yes">
            <label class="govuk-label govuk-radios__label" for="confirm-trust-result">
              Yes
            </label>
          </div>
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="confirm-trust-result-2" name="confirm-trust-result" type="radio" value="No">
            <label class="govuk-label govuk-radios__label" for="confirm-trust-result-2">
              No, search again
            </label>
          </div>
        </div>
      </fieldset>
    </div>
    <button type="submit" class="govuk-button" data-module="govuk-button">
      Continue
    </button>
  </div>
</div>
We have not been able to create Nunjucks for this pattern. If you have any problems implementing this pattern, ask in the #rsd-ucd-community-public Slack channel.

Progressive enhancement

You can use the autocomplete component on GitHub as a progressive enhancement to the search box.

This will reduce the number of pages in the journey to 2:

  1. Page with a search box. Present a list of results under the text input, as users type. When users select a result from the dynamic search list and then Continue, take them to the next page.
  2. Establishment details, showing detailed information about the selected establishment. Allow users to confirm if this is the establishment they were looking for. If it's not, take them back to the page with a search box.
A 'search for an establishment' journey. It has a page with a search box and autocomplete as a progressive enhancement. It also has an establishment details page with an 'Is this the correct establishment?' radio button.
A 'search for an establishment' journey. It has a page with a search box and autocomplete as a progressive enhancement. It also has an establishment details page with an 'Is this the correct establishment?' radio button.

Page with a search box (autocomplete)

Contents

Open this example (Page with a search box (progressive enhancement)) in a new tab
We have not been able to create Nunjucks for this pattern. If you have any problems implementing this pattern, ask in the #rsd-ucd-community-public Slack channel.

Reference numbers

There are many different unique references for establishments, including:

You should research with your users to see which references they are familiar with.

If they are familiar with one or more references, design for them on the search box page. This will save users' time and help avoid errors.

Error messages

Make sure errors follow the error message guidance. Show specific error messages for specific error states.

If the search box is empty

Say 'Enter a trust name or reference number'.

Research on this pattern

We have not done research on this design pattern, but parts of the pattern are being used in Find information about academies and trusts and Manage free school projects to meet this need from our user needs database (opens a DfE Microsoft List):

User need 96: When I need to find information about an establishment, I need flexibility in what I can search by, so that I can easily find the school/trust I am looking for.

Contribute to this page on GitHub