P01. Self help tool

13 Jan 2022

Feature finalised

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

BR-1

The self help tool will be built as a single page application (SPA) using the React or Angular JS framework

BR-2

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

BR-3

The front-end will integrate the self help tool with Azure cognitive search engine for Natural Language Processing (NLP)

BR-4

The content and the link configurations in Adobe Experience Manager (AEM) will be set by the Digital Content Managers (DCM) through content fragments

BR-5

The solution should allow users to edit the SPA static content like any other content in the webpage.

BR-6

Clients have the option type their problem or select from a list of options

BR-7

At the end of the process, clients can download a legal summary of their support and next steps to keep as a reference and know what to do once they have used the tool to identify their legal problem.

BR-8

Clients have the option to select a microphone to enable speech to text functionality (see design screen 2)

Screen 1 - Default landing page

Key user goals:

• Understand how the tool works

• Start the self help tool

• If unsafe, be directed to support immediately

• Know how to quickly exit the tool

Design behaviour:

• To begin the tool, the user needs to select the button ‘Start’. This will lead the user to Screen 2 (Note: this does not open a new tab)

• Selecting ‘1800 RESPECT Online Chat’ will link the user to https://chat.1800respect.org.au/#/welcome (Note: this does not open a new tab)

• Selecting anywhere along the quick exit bar will link the user to http://google.com.au. A user on desktop can also select ‘ESC’ on their keyboard to be linked to http://google.com.au (Note: this does not open a new tab)

• The quick exit bar on both Desktop and Mobile is fixed and visible on the page no matter how far down the page the user is.

Use of icons:

• Icons may be removed to achieve a clean look (see creative - high fidelity). More user testing on this may be required.

Screen 2 - Tell us about your problem: Step 1

We’ve developed two alternate designs for this screen.

• From user testing, we heard from clients that they are more inclined to select from an option rather than type their problem (see user testing playback pack).

• The alternate version removes the functionality to type their problem in a text box.

Key user goals:

• Describe their problem in their own words (functionality not present in alternative design)

• Select an option that best matches their problem

• Know how to quickly exit the tool

Design behaviour:

Design 1:

• Users can select the textbox and type their problem. When they type their problem, the text will be shown inside the box and ‘My problem is about…' grey text inside the box will disappear.

• When the textbox is populated, the ‘Go’ button will turn into an active state. A user can proceed to Screen 3 by either pressing ‘Enter’ (Windows) / ‘Return’ (Mac) on a keyboard or selecting the ‘Go’ button.

• Users can select the ‘mic’ icon to enable speech to text functionality.

• Users can alternatively choose to select from an grouping of options underneath. Selecting a box and pressing ‘Go’ will take the user to Screen 3.

  • The label options are indicative only and will need to be finalised by the business based on the different flows

• Selecting anywhere along the quick exit bar will link the user to http://google.com.au. A user on desktop can also select ‘ESC’ on their keyboard to be linked to http://google.com.au (Note: this does not open a new tab)

• The quick exit bar on both Desktop and Mobile is fixed and visible on the page no matter how far down the page the user is.

• Selecting ‘Back’ leads the user to the previous step

Alternative:

• Users can only select from an grouping of options. Selecting a box and pressing ‘Go’ will immediately take the user to Screen 3.

  • The label options are indicative only and will need to be finalised by the business

• Selecting anywhere along the bar at the bottom of the page will link the user to http://google.com.au. A user on desktop can also select ‘ESC’ on their keyboard to be linked to http://google.com.au (Note: this does not open a new tab)

• The quick exit bar on both Desktop and Mobile is fixed and visible on the page no matter how far down the page the user is.

• Selecting ‘Back’ leads the user to the previous step

Copy:

Design one

• Title to read ‘Tell us about your problem’

• Subtitle to read ‘Use a few keywords to describe your problem e.g. spending time with my kids’

• Box underneath to read ‘Can’t describe your problem?’

• Box subtitle to read ‘Choose from one of these common problems.’

• Quick exit banner text to read 'Click here to quickly exit the site

• Button labels to be finalised by the business

Alternative:

• Title to read ‘Tell us about your problem’

• Subtitle to read ‘Choose one option that best describes your problem’

• Quick exit banner text to read ‘Click here to quickly exit the site or press ‘ESC’ on your keyboard’ on desktop and 'Tap here to quickly exit the site’ on mobile

• Button labels to be finalised by the business

Use of icons:

• Each box will have an icon in front of the button label

• See visual creative design for guidance

Screen 3 - Let’s dive a little deeper: Step 2

Key user goals:

• Select a legal problem based on their situation

• If the user is unable to find what they are looking for, provide more options

Design behaviour:

• Users can select from one of the displayed options and proceed to the next step by selecting ‘Go’ (Screen 4)

• If a user selects ‘I can’t find what I’m looking for', users will be directed back to Step 1 (Screen 2)

• Selecting anywhere along the quick exit bar will link the user to http://google.com.au. A user on desktop can also select ‘ESC’ on their keyboard to be linked to http://google.com.au (Note: this does not open a new tab)

• The quick exit bar on both Desktop and Mobile is fixed and visible on the page no matter how far down the page the user is.

• Selecting ‘Back’ leads the user to the previous step

Copy:

• Title to read ‘Let’s dive a little deeper'

• Subtitle to read ‘Select your legal issue’

• Option title and subbody text to be finalised by the business for each selection flow

Use of icons:

• No icons are used on this screen

Screen 4 - A few quick questions: Step 3

Key user goals:

• Answer a few quick questions relevant to the legal issue.

Design behaviour:

• On this screen, users will need to select a response to each question. Users can only select one answer for each question (button will turn into an active state once selected).

• Once the user selects a response to all the questions present, the ‘Go’ button will be active and once selected, the users will then proceed to step 4 (Screen 5).

• Selecting anywhere along the quick exit bar will link the user to http://google.com.au. A user on desktop can also select ‘ESC’ on their keyboard to be linked to http://google.com.au (Note: this does not open a new tab)

• The quick exit bar on both Desktop and Mobile is fixed and visible on the page no matter how far down the page the user is.

• Selecting ‘Back’ leads the user to the previous step

Guidance on creating questions for this screen

• Questions should be written in plain English and be relevant to the legal issue selected by the user in the previous step.

• Avoid asking more than 4 questions on this screen to reduce cognitive load on the user.

• Ensure questions are multiple choice related e.g. Yes or No, rather than text inputs.

Copy:

• Title to read: ‘A few quick questions'

• Subtitle to read: ‘Please answer the following’

Screen 5 - About you: Step 4

Key user goals:

• Select all that apply based on the user

Design behaviour:

• On this screen users are able to select different prompts based on their situation.

• A user can select multiple boxes e.g. if they are a refugee at risk of family violence, they would select two options.

• A user who doesn’t fit into any of the categories may select the ‘Go’ button or select ‘None of these apply to me’ to proceed to their legal summary (Screen 5)

• A user cannot select ‘None of these apply to me’ if they’ve already selected another box

• Selecting anywhere along the quick exit bar will link the user to http://google.com.au. A user on desktop can also select ‘ESC’ on their keyboard to be linked to http://google.com.au (Note: this does not open a new tab)

• The quick exit bar on both Desktop and Mobile is fixed and visible on the page no matter how far down the page the user is.

• Selecting ‘Back’ leads the user to the previous step

Copy:

• Title to read ‘About you'

• Subtitle to read ‘Get the right advice based on your situation. Select all that apply’

Screen 5 - User views their legal summary

Key user goals:

• Be able to find a next step for their legal issue

• Go back to the start

Design behaviour:

• This is the final screen of the self help tool where users can view their legal summary

• In the ‘What we’ve heard’ section, it shows what the user has selected in previous screens e.g. if they select Family Law, then the text will update to be ‘It looks like you have a Family Law problem’.

  • Note the line ‘You identify as Xx’ will only appear if the user has selected an option that is not ‘None of these apply to me’.

• In the ‘Your next steps’ section, the application should display one targeted next step the user should take. There is a description of the next step and a CTA button linking to the appropriate support/information.

• In the ‘In the meantime’ section, there are three tiles that may contain relevant information content or other resources/support the user can take.

• There is a download PDF summary button underneath which will downloads the page as PDF on the browser.

• There is a banner called ‘Got another problem?’ which contains a shortcut to the beginning if users has a different issue they need advice on.

• Selecting anywhere along the quick exit bar will link the user to http://google.com.au. A user on desktop can also select ‘ESC’ on their keyboard to be linked to http://google.com.au (Note: this does not open a new tab)

• The quick exit bar on both Desktop and Mobile is fixed and visible on the page no matter how far down the page the user is.

• Selecting ‘Back’ leads the user to the previous step