P02. Search

17 Jan 2022

Component finalised

@Japneet Kaur (Deactivated) @Steven Mao (Unlicensed)

BR-1

The search function will be built as a single page application (SPA)

BR-2

The labels and content can be configured in the CMS.

Any changes to the single page application (SPA) gets updated through Application Programming Interface (APIs).

BR-3

The Application Programming Interface (API) request to the search engine will be handled in the front-end if feasible and secure

BR-4

The single page application (SPA) will be embedded in the Adobe Experience Manager (AEM) page for the best user experience

BR-5

The placeholder text in the search bar will be: "Search Legal Aid NSW".

• Placeholder text will disappear when the user types.

• Placeholder text appears when there are no inputs in the search bar

BR-6

The search is fully responsive

BR-7

The search function allows users to search from website databases using free text search

BR-8

Users are able to see digital assets (e.g. images, videos, PDF's) as part of the search results

BR-9

On the search results page, users can filter search results in two main ways:

Relevance

• Relevance (default) - most relevant search results appear based on user inputs

• Newest to oldest - the most recent search results will appear first

• Oldest to newest - the oldest search results will appear first

Advanced filters

• Topic - shown as a dropdown

• Document type - shown as a dropdown

BR-10

Clients have the option to select a microphone to enable speech to text functionality.

Screen 1 - User has not selected search (inactive state)

Key user goals:

• Open the search text box

Design behaviour:

• Selecting the search icon on the website header will open the search box (see screen 2).

Use of icons:

• The search icon is clickable

Screen 2 - User conducts a search

Key user goals:

• Conduct a search

• Access suggested links

Design behaviour:

• A banner overlay pops up over the web page once the search icon is selected. Note: the rest of the page should have a black transparent overlay to it (50%). No drop shadow required.

• A user can close the search banner using the 'X' symbol on both mobile and desktop

• For desktop, a user should be able to automatically start typing on their keyboard and the words should appear without needing to click into the search box

• For mobile, a user will need to select the search results box before the mobile keyboard will appear

• A user can submit search only once there is an input in the search box (they can submit by pressing enter or selecting the search icon on the right hand side).

• The ‘Suggested links’ are clickable links to different web pages. Suggested links are customisable by the business (the ones shown are indicative only). Once selected, it will take the user directly to them (does not open a new tab)

• Completing a search will lead to the search results page and does not open a new tab (screen 3).

Screen 3 - User lands on the search results page

Key user goals:

• Select a relevant search result

Design behaviour:

• In the search box banner the text ‘Search results for X' will appear with the search term imputed. Underneath, the number of search results found will be displayed.

  • If there is no search results, see Screen 3.1.

• To go to the search result, the user must select the search result title. The title will be underlined once the user hovers over the title to indicate it is a clickable link. Once selected, it will lead the user to the direct site page (does not open a new tab).

• Users are able to toggle between four tabs which display search results in the same manner (title + short description). In the future, there could be more tabs added as per business need.

  • ‘All’ (Default) - searches across the whole site

  • ‘Factsheets’ - searches for factsheets and resources database

  • ‘Policies’ - searches specifically for pages that lie under ‘Our policies’

  • ‘LawPrompt’ - searches specific to LawPrompt. There is a lock symbol next to it, indicating the user cannot access it (not clickable). If the lock symbol is removed, it means the user has logged in and can access this tab.

• There is 7 search results displayed for each page. The rationale is that we don’t want to overwhelm the user, and this will increase the speed of search results appearing.

  • A user can go to the next page by selecting a number at the button of the 7 search results. I.e. if selecting 2, the next 7 results will be displayed.

• Users are able to ‘Sort by’ and use ‘Advanced filters’

  • Selecting ‘Sort by’ will provide three options (overlay - no change to existing screen)

    • Relevance (default) - shows the most relevant search results

    • Newest to oldest - shows the newest results first (most recently updated pages)

    • Oldest to newest - shows the oldest results first (most recently updated pages are shown last)

    • The selected option will be highlighted in a darker box colour.

    • Search results will automatically update if an option that is not highlighted is selected

  • Using advanced filters will show two drop downs above the first search result

    • Filter results by topic (these topics to be decided by the business)

    • Filter results by document type (on LawAccess currently, there is ‘Factsheet’, ‘Guide’, ‘Form'. This could be further refined by the business)

    • Users will need to select ‘Apply filters’ for the search results page to update

    • Users can select reset filters to remove all filters (search results page will update if filters have been applied)

    • A user can hide the advanced filters by selecting ‘Advanced filters’. The up chevron defaults to down.

• At the bottom of the page is a banner which provides a link to the self-help tool. Please ignore this. The self-help tool is not part of the initial build of the website.

Screen 3.1 - No search results found

Key user goals:

• Conduct a new search

Design behaviour:

• When there is no search results found, this screen will appear as default.

• User can use the search results box to type a new search.

• The user’s search term will appear in “We didn’t find anything for ‘…'“. E.g. see example in screenshot the user has typed in 'Search input’

• Under suggested keywords, users can select popular keywords (to be confirmed by the business). This will lead them onto the search results page for that keyword.

• At the bottom of the page is a banner which provides a link to the self-help tool. Please ignore this. The self-help tool is not part of the initial build of the website.