diff --git a/app/views/design-system/patterns/ask-users-for-feedback.html b/app/views/design-system/patterns/ask-users-for-feedback.html
new file mode 100644
index 00000000..53097683
--- /dev/null
+++ b/app/views/design-system/patterns/ask-users-for-feedback.html
@@ -0,0 +1,528 @@
+{% extends "layouts/layout.html" %}
+
+{% set serviceNav = "Design system" %}
+{% set path = "design-system/patterns/ask-users-for-feedback" %}
+{% set title = "Ask users for feedback" %}
+{% set description = "A pattern that allows users to give feedback about a page, feature or overall service." %}
+{% set mainClasses = 'govuk-!-padding-top-0 ' %}
+
+{% block content %}
+
+
+
+
+
+
+
+
+
+
+ Patterns
+
{{title}}
+
{{description}}
+
+
+
When to use this pattern
+
Use this pattern to collect user feedback at the end of journeys and tasks.
+
You can use it in along with the phase banner feedback link.
+
+
When not to use this pattern
+
Do not use this pattern part way through a user's journey or task.
+
+
Background
+
Typically products and services collect user feedback through a link in the phase banner. However, users rarely interact with the phase banner. This makes it hard for teams to collect feedback on their service.
+
We have gathered evidence and examples from across DfE to find ways of asking for feedback that get better response rates. This pattern is the result.
+
Evidence shows this is an effective way to gather feedback from a user when they have finished the thing they set out to do.
+
+
How it works
+
There are 3 variants of this pattern. The first 2 variants should be used to get feedback at the end of a journey or task. The third should be used to get feedback on a specific page.
+
+
Get feedback on a journey or task
+
Ask users for feedback at the end of a journey or task. DfE services have found this increases response rates.
+
+
Integrate the feedback form in the content
+
Integrate your feedback form into pages of the service when asking for feedback at the end of multi-page journey. Make the form optional.
+
Teaching Vacancies and Early Years Training both integrated their feedback forms in their content, and saw huge increases in user feedback.
+
+
Variant 1: Teaching Vacancies
+
On Teaching Vacancies, the team got 263 responses to the form over a 10 month period before integrating the form on their confirmation pages. After integrating the form, they got 9741 responses over the same 10 month period the following year. That's more than a 3000% increase in response rate.
We've sent your application to the relevant organisation.
+
They will contact you either to confirm your registration, or to ask for more information.
+
+
+
+
+
+
+
+
+
+
HTML
+
+
+<div class="govuk-width-container">
+ <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
+ <div class="govuk-grid-row">
+ <div class="govuk-grid-column-two-thirds">
+ <div class="govuk-panel govuk-panel--confirmation">
+ <h1 class="govuk-panel__title">Application complete</h1>
+ <div class="govuk-panel__body">Your reference number<br><strong>REFERENCE123</strong></div>
+ </div>
+ <p class="govuk-body">We have sent you a confirmation email.</p>
+ <h2 class="govuk-heading-m">What happens next</h2>
+ <p class="govuk-body">We’ve sent your application to the relevant organisation.</p>
+ <p class="govuk-body">They will contact you either to confirm your registration, or to ask for more information.</p>
+ </div>
+ </div>
+ </main>
+</div>
+
+<h2 class="govuk-heading-m">Have time to share some feedback?</h2>
+<p class="govuk-body">Your feedback can help us improve the service.</p>
+
+<form class="feedback-form" id="feedback-form-example" action="#" accept-charset="UTF-8" method="post">
+ <input type="hidden" name="authenticity_token" value="" autocomplete="off" />
+
+ <h2 class="govuk-heading-m">Have time to share some feedback?</h2>
+ <p class="govuk-body">Your feedback can help us improve the service.</p>
+
+ <div class="govuk-form-group">
+ <fieldset class="govuk-fieldset">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
+ <h3 class="govuk-fieldset__heading">How satisfied are you with your experience of using Teaching Vacancies?</h3>
+ </legend>
+
+ <input value="" autocomplete="off" type="hidden" name="feedback_form[rating]" id="feedback_form_rating_example" />
+ <div class="govuk-radios" data-module="govuk-radios">
+ <div class="govuk-radios__item">
+ <input id="rating-highly-satisfied" class="govuk-radios__input" type="radio" value="highly_satisfied" name="feedback_form[rating]" />
+ <label for="rating-highly-satisfied" class="govuk-label govuk-radios__label">Highly satisfied</label>
+ </div>
+ <div class="govuk-radios__item">
+ <input id="rating-somewhat-satisfied" class="govuk-radios__input" type="radio" value="somewhat_satisfied" name="feedback_form[rating]" />
+ <label for="rating-somewhat-satisfied" class="govuk-label govuk-radios__label">Somewhat satisfied</label>
+ </div>
+ <div class="govuk-radios__item">
+ <input id="rating-neither" class="govuk-radios__input" type="radio" value="neither" name="feedback_form[rating]" />
+ <label for="rating-neither" class="govuk-label govuk-radios__label">Neither satisfied nor dissatisfied</label>
+ </div>
+ <div class="govuk-radios__item">
+ <input id="rating-somewhat-dissatisfied" class="govuk-radios__input" type="radio" value="somewhat_dissatisfied" name="feedback_form[rating]" />
+ <label for="rating-somewhat-dissatisfied" class="govuk-label govuk-radios__label">Somewhat dissatisfied</label>
+ </div>
+ <div class="govuk-radios__item">
+ <input id="rating-highly-dissatisfied" class="govuk-radios__input" type="radio" value="highly_dissatisfied" name="feedback_form[rating]" />
+ <label for="rating-highly-dissatisfied" class="govuk-label govuk-radios__label">Highly dissatisfied</label>
+ </div>
+ </div>
+ </fieldset>
+ </div>
+
+ <div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="1200">
+ <label for="comment-field-example" class="govuk-label govuk-label--s">Do you have any
+ suggestions on how we should improve the service? (optional<span class='govuk-visually-hidden'> field</span>)</label>
+ <textarea id="comment-field-example" class="govuk-textarea govuk-js-character-count" rows="4" aria-describedby="comment-field-info" name="feedback_form[comment]"></textarea>
+ <span id="comment-field-info" class="govuk-hint govuk-character-count__message">You can enter up to 1200 characters</span>
+ </div>
+
+ <div class="govuk-form-group">
+ <fieldset class="govuk-fieldset">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
+ <h3 class="govuk-fieldset__heading">Would you like to participate in our research?</h3>
+ </legend>
+ <div class="govuk-radios" data-module="govuk-radios">
+
+ <div class="govuk-radios__item">
+ <input id="participation-yes-example" class="govuk-radios__input" data-aria-controls="participation-yes-conditional-example" type="radio" value="interested" name="feedback_form[user_participation_response]" />
+ <label for="participation-yes-example" class="govuk-label govuk-radios__label">Yes</label>
+ </div>
+
+ <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="participation-yes-conditional-example">
+ <div class="govuk-form-group">
+ <label for="email-field-example" class="govuk-label">
+ What is your email address?
+ </label>
+ <div class="govuk-hint" id="email-hint-example">We'll only use this to tell you about opportunities to take part in user research.</div>
+ <input id="email-field-example" class="govuk-input" aria-describedby="email-hint-example" value="" type="email" name="feedback_form[email]" />
+ </div>
+
+ <div class="govuk-form-group">
+ <label for="occupation-field-example" class="govuk-label">
+ Occupation
+ </label>
+ <div class="govuk-hint" id="occupation-hint-example">We'll only use this to tell you about opportunities to take part in user research that is relevant to you.</div>
+ <textarea id="occupation-field-example" class="govuk-textarea" rows="1" aria-describedby="occupation-hint-example" name="feedback_form[occupation]"></textarea>
+ </div>
+ </div>
+
+ <div class="govuk-radios__item">
+ <input id="participation-no-example" class="govuk-radios__input" type="radio" value="uninterested" name="feedback_form[user_participation_response]" />
+ <label for="participation-no-example" class="govuk-label govuk-radios__label">No</label>
+ </div>
+ </div>
+ </fieldset>
+ </div>
+
+ <div class="govuk-button-group">
+ <button type="submit" formnovalidate="formnovalidate" class="govuk-button" data-module="govuk-button" data-prevent-double-click="true">Submit feedback</button>
+ <a class="govuk-link govuk-link--no-visited-state" href="#">Skip feedback</a>
+ </div>
+</form>
+
+
+
+
+
Variant 2: Early Years Training
+
+
In Early Years Training, the team got 241 feedback responses over a 3 month period before integrating the feedback form as a series of questions at the end of a training course.
+
+
After integration, the team got 860 responses in a three month period.
+
+
That's an increase of 256.85%.
+
+
IMAGE EXAMPLE HERE
+
+
Get feedback on a specific page
+
+
There is a third variant you can use if you want to gather feedback on a specific page.
+
+
Variant 3: Ask at the bottom of the page
+
+
Collect feedback about a specifc page by showing the user a "Tell us what you think of this page" heading and a "Give feedback" at the bottom of that page.
+
+
When the button is selected, show a free text field to enter feedback.
+
+
Example: DfE design manuals
+
+
You can see an example of feedback forms at the bottom of all pages in the DfE design manual.
+
+<section class="dfe-feedback">
+ <div class="govuk-width-container">
+ <div class="govuk-grid-row">
+ <div class="govuk-grid-column-full">
+ <div class="dfe-feedback-banner">
+ <div class="dfe-feedback-banner--content">
+ <div class="dfe-feedback-banner--flex">
+ <h2 class="govuk-heading-s">Tell us what you think of this page</h2>
+ <button type="button" class="govuk-button" data-module="govuk-button" id="problemButton" data-govuk-button-init="">
+ Give feedback
+ </button>
+ </div>
+
+ <div class="dfe-feedback-banner--content-message" id="thanksMessage" role="status" hidden="">
+ Thank you for your feedback
+ </div>
+
+ <div class="dfe-feedback-panel" id="feedback-panel" style="display: none;" aria-hidden="true">
+ <form id="feedback-form">
+ <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="400" data-govuk-character-count-init="">
+ <div class="govuk-form-group govuk-!-margin-top-5">
+ <h3 class="govuk-label-wrapper">
+ <label class="govuk-label govuk-label--m" for="feedback_form_input">
+ What do you want to tell us?
+ </label>
+ </h3>
+ <textarea class="govuk-textarea govuk-js-character-count" id="feedback_form_input" name="feedback_form_input" rows="5" aria-describedby="feedback_form_input"></textarea>
+ <div id="feedback_form_input-info" class="govuk-hint govuk-character-count__message govuk-visually-hidden">
+ You can enter up to 400 characters
+ </div>
+ <div class="govuk-hint govuk-character-count__message govuk-character-count__status" aria-hidden="true">
+ You have 400 characters remaining
+ </div>
+ <div class="govuk-character-count__sr-status govuk-visually-hidden" aria-live="polite">
+ You have 400 characters remaining
+ </div>
+ </div>
+ </div>
+
+ <div class="govuk-button-group">
+ <button class="govuk-button" data-module="govuk-button" type="submit" data-govuk-button-init="">
+ Submit
+ </button>
+ <button class="govuk-button govuk-button--secondary" type="button" data-module="govuk-button" id="cancelButton" data-govuk-button-init="">
+ Cancel
+ </button>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
+
+
+
+
+
+
+
+
Things to consider
+
+
Keep the following things in mind when designing feedback forms.
+
+
Make contact details optional
+
+
Users may prefer to give feedback anonymously.
+
+
Make sure that users do not have to include their name or contact information to submit their feedback, whichever variant you use.
+
+
Explain that leaving contact details will enable to product team to ask more about the issues they raised or let them know when it is fixed.
+
+
Link to your product's privacy notice.
+
+
If you use a Microsoft Form to gather feedback from civil servants, make sure the form does not automatically submit their name and email address.
+
+
Make clear the feedback form not for urgent issues
+
+
Include a differnt method for users to report an immediate technical problem.
+
+
A link or button that says "Report a problem with this page" is a simple way to do this.
+
+
Tools for storing and analysing feedback
+
+
There are lots of different tools you can use to get feedback.
+
+
Some teams have designed and built their own. Others have used Microsoft Forms to create a bespoke journey and capture data they can analyse themselves.
+
+
A few teams pay for services like Qualtrics which involve an additional cost for a license or account.
+
+
You should choose the method that works best for your team, but consider the accessibility of whatever you use.
You must explain any accessibility issues in your accessibillity statement.
+
+
Research on this pattern
+
+
This pattern has been used successfully by several services, but there is more to learn.
+
+
Share your findings
+
+
If you can, variant test these integrated examples alongside a the GOV.UK pattern for a confirmation page where a feedback form is linked to rather than part of the page.
+
+
Analyse the results, see what works best for your users and share your findings with the DfE Components working group so we can iterate this guidance.
+
+
Services using this pattern
+
+
Some Department for Education services are using this pattern and its varitions, including: