P03. Tools for your problem

14 Jan 2022

Feature finalised

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

BR-1

Each ‘guided pathway’ will be built as a separate Single Page Application (SPA) and embedded onto a Adobe Experience Manager (AEM) webpage

BR-2

A front-end framework will be used to build the ‘guided pathway’ single page application (SPA)

ReactJS or AngularJS is the framework recommended.

Digital Content Managers (DCMs) within the business can build guided pathways using the chosen framework.

BR-3

Adobe Experience Manager (AEM) will be leveraged to provide the content, digital assets and any other configuration details

Screen 0 - Landing page for ‘Ways to get help’

Key user goals:

• Select a topic I need help with

• Discover all the guided pathways available on the website

Design behaviour:

• This landing page consists of icon tile components stacked in rows of 3 for desktop, 1 for mobile

• Each box represents a guided pathway. Selecting on one will link the user directly to the guided pathway page. E.g. selecting the tile ‘Mortgage stress’ will lead the user to P03. Tools for your problem .

Tile behaviour

• The whole tile is clickable. Users can select anywhere inside the box to go to the guided pathway.

Note: icons will need to be found for each tile.

Copy considerations

• It is recommended these tiles are grouped by topic e.g. My home or property

• This grouping may be updated by the business.

Screen 1 - Landing page for a guided pathway

Key user goals:

• Read about what the guided pathway is before starting it

Design behaviour:

• This page consists static text and a button

• The picture, title and text are content authorable

• Once the user has read the information, they can select the ‘Start’ button which takes them to Screen 2

• The quick exit functionality C33. Quick exit may be added to guided pathways if required (see Creative - high fidelity designs for what that would look like).

Note: copy taken from existing mortgage stress test

Screen 2 - ‘Understanding the problem’ stage (1 of 2)

Key user goals:

• Select a relevant prompt that best describes their problem

Design behaviour:

• At the top of the page is a progress indicator (C13. Progress indicator ) which indicates how far along the pathway the user is.

• A screen can relate to one of three stages:

  • Understanding the problem

  • Getting the right details

  • Your next steps

• Underneath the progress bar is a title (e.g. ‘Tell us about the situation’) or a question.

• Following the title, the user reads static content. They are able to hide the content using the icon on the top right or unhide it by selecting the icon again.

• After the static content the user can select from a few different options. Selecting a box and ‘Next’ will lead the user directly to Screen 2.1.

• If a user selects the ‘Previous step’ button, this takes them back to Screen 1.

Screen 2.1 - ‘Understanding the problem’ stage (2 of 2)

Key user goals:

• Select a relevant prompt that best describes their problem

Design behaviour:

• This is an example of two screens (screen 2 and screen 2.1) relating to the ‘Understanding the problem’ progress stage

• Same design behaviour as Screen 2

• In the content section, there may be words/phrases that are bold AND underlined. Selecting any of these links opens a new tab.

• Selecting any of the boxes and ‘Next’ will lead the user directly to Screen 3

• If a user selects the ‘Previous step’ button, this takes them to Screen 2.

Screen 3 - ‘Getting the right details’ stage (1 of 2)

Key user goals:

• Provide details about my situation that will lead to more accurate advice at the end

Design behaviour:

• See C13. Progress indicator for behaviour of the progress indicator

• Same design behaviour as Screen 2

• Selecting any of the boxes and ‘Next’ will lead the user directly to Screen 3.1

• If a user selects the ‘Previous step’ button, this takes them to Screen 2.1.

Screen 3.1 - ‘Getting the right details’ stage (2 of 2)

Key user goals:

• Select a relevant prompt about the issue that best describes their situation

Design behaviour:

• See C13. Progress indicator for behaviour of the progress indicator

• Same design behaviour as Screen 2

• Selecting any of the boxes and ‘Next’ will lead the user directly to Screen 4

• If a user selects the ‘Previous step’ button, this takes them to Screen 3

Screen 4 - ‘Your next steps’ stage (1 of 2)

Key user goals:

• View advice about what to do next based on previous prompts selected

Design behaviour:

• See C13. Progress indicator for behaviour of the progress indicator

• Same design behaviour as Screen 2

• Selecting ‘Next’ will lead the user directly to Screen 4.1

• If a user selects the ‘Previous step’ button, this takes them to Screen 3.1

Screen 4.1 - ‘Your next steps’ stage (2 of 2)

Key user goals:

• View advice about what to do next based on previous prompts selected

Design behaviour:

• See C13. Progress indicator for behaviour of the progress indicator

• This is the final screen of the guided pathway.

• Same design behaviour as Screen 2

• If a user selects the ‘Previous step’ button, this takes them to Screen 4

• When the user reaches the end of the guided pathway, there is a button ‘Go to start’ that allows a user to return to Screen 1

Other considerations

The use of icons

In the current state, icons are used throughout the pathway (see screenshot on the right).

• We recommend not including these icons moving forward from a creative perspective.

• These icons are not used in the newer pathways (e.g. the Traffic offences - Got a NSW traffic offence problem? - Legal Aid NSW ).

On the existing guided pathways