docs(service patterns intro): an orphan page created to introduce ser… (

#587) * docs(service patterns intro): an orphan page created to introduce service patterns * docs(ethics guidance): guidance on designing services ethically * Update docs/_includes/layouts/ethics.njk Co-authored-by: Greg Tyler <gregtyler@users.noreply.github.com> * Update docs/ethics/principles.md Co-authored-by: Greg Tyler <gregtyler@users.noreply.github.com> * Update docs/ethics/assessment.md Co-authored-by: Greg Tyler <gregtyler@users.noreply.github.com> * Update ethics.njk Changing text to a contraction --------- Co-authored-by: Greg Tyler <gregtyler@users.noreply.github.com>
ministryofjustice · Apr 15, 2024 · b2de062 · b2de062
1 parent 0b6abf8
commit b2de062
Show file tree

Hide file tree

Showing 8 changed files with 361 additions and 2 deletions.
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -31,8 +31,6 @@
 
         {% include "./partials/navigation.njk" %}
 
-        {% include "./partials/feedback-banner.njk" %}
-
         {% block content %}
           <main class="app-prose-scope" role="main">
             {{ content | safe }}

diff --git a/docs/_includes/layouts/ethics.njk b/docs/_includes/layouts/ethics.njk
@@ -0,0 +1,70 @@
+{% extends "./base.njk" %}
+
+{%- from "node_modules/@ministryofjustice/frontend/moj/components/side-navigation/macro.njk" import mojSideNavigation %}
+
+{% macro appSideNavigation(config) %}
+  {% set config = config|addActiveAttribute(page.filePathStem | url) %}
+
+  {{ mojSideNavigation(config) }}
+{% endmacro %}
+
+{% block content %}
+
+<div class="govuk-width-container">
+
+  <div class="govuk-phase-banner">
+    <p class="govuk-phase-banner__content">
+      <strong class="govuk-tag govuk-phase-banner__content__tag">
+        Beta
+      </strong>
+
+      <span class="govuk-phase-banner__text">
+      This is new – your <a class="govuk-link" href="mailto:design-system@digital.justice.gov.uk">feedback</a> will help us to improve it.
+      </span>
+
+    </p>
+  </div>
+
+  <div class="govuk-width-container govuk-grid-row app-flex-container">
+    <div class="govuk-grid-column-one-third">
+      {{ appSideNavigation({
+        classes: 'govuk-!-padding-top-6',
+        sections: [
+          {
+            heading: {
+              text: "Ethics"
+            },
+            items: [
+              {
+                text: 'Principles',
+                href: ('/ethics/principles' | url)
+              },
+              {
+                text: 'Standards',
+                href: ('/ethics/standards' | url)
+              },
+              {
+                text: 'Ethics assessment',
+                href: ('/ethics/assessment' | url)
+              }
+            ]
+          }
+        ]
+      }) }}
+
+      {% include "./partials/back-to-top.njk" %}
+    </div>
+
+    <div class="govuk-grid-column-two-thirds">
+      <main id="main-content" class="govuk-main-wrapper app-prose-scope" role="main">
+        <h1 class="govuk-heading-xl">
+          {% if subsection %}<span class="govuk-caption-xl">{{ subsection }}</span>{% endif %}
+          {{ title }}
+        </h1>
+        {{ content | safe }}
+      </main>
+
+    </div>
+  </div>
+</div>
+{% endblock %}
diff --git a/docs/_includes/layouts/service-patterns.njk b/docs/_includes/layouts/service-patterns.njk
@@ -0,0 +1,33 @@
+{% extends "./base.njk" %}
+
+{% block content %}
+  <div class="govuk-width-container">
+
+    <div class="govuk-phase-banner">
+      <p class="govuk-phase-banner__content">
+        <strong class="govuk-tag govuk-phase-banner__content__tag">
+          Beta
+        </strong>
+
+        <span class="govuk-phase-banner__text">
+          This is new – your <a class="govuk-link" href="mailto:design-system@digital.justice.gov.uk">feedback</a> will help us to improve it.
+        </span>
+
+      </p>
+    </div>
+
+    <main id="main-content" class="govuk-main-wrapper app-prose-scope" role="main">
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+
+          <h1 class="govuk-heading-xl">
+            {{ title }}
+          </h1>
+
+        {{ content | safe }}
+
+      </div>
+    </div>
+  </main>
+</div>
+{% endblock %}
diff --git a/docs/ethics/assessment.md b/docs/ethics/assessment.md
@@ -0,0 +1,24 @@
+---
+layout: layouts/ethics.njk
+subsection: Ethics
+title: Do an ethics assessment
+---
+
+We must ensure that our services are inclusive, environmentally friendly, respectful of people's property, and do not harm people.
+
+Doing an ethics assessment will help you to:
+
+- design, develop and maintain responsible services
+- identify any unintended consequences of your service
+
+Your team can do ethics assessments at any stage of the life cycle.
+
+### What you need to do an ethics assessment
+
+Make a copy of the ethics assessment template on [Google Docs](https://docs.google.com/document/d/1GRHSKxj3_zXubfDkGHQp9Y2_6wpf9_dcB9qCuHQS4xM/edit) or [Miro](https://miro.com/app/board/uXjVPlD7OmE=/?userEmail=laura.parker6@digital.justice.gov.uk&track=true&utm_source=notification&utm_medium=email&utm_campaign=add-to-board&utm_content=go-to-board) (both come with instructions).
+
+You can do the assessment remotely or in person.
+
+There's no time limit, but for reference, it took one team about 2 hours to do the ethics assessment in person using sticky notes.  
+
+The outputs you get are likely to vary significantly depending on what your service does, who uses it, which phase of delivery you are at and how information is stored and used.
diff --git a/docs/ethics/index.md b/docs/ethics/index.md
@@ -0,0 +1,10 @@
+---
+layout: layouts/ethics.njk
+title: Designing ethical services
+---
+
+Anyone designing and building MoJ services must be mindful of the impact of their design on people, society and the planet.
+
+1. Learn and share the [MoJ ethical design principles](/ethics/principles).
+2. [Follow our ethics standards](/ethics/standards) and make ethics a practical part of your design process.
+3. [Do an ethics assessment](/ethics/assessment) and understand the impact that your service has on people and the planet.
diff --git a/docs/ethics/principles.md b/docs/ethics/principles.md
@@ -0,0 +1,105 @@
+---
+layout: layouts/ethics.njk
+subsection: Ethics
+title: Ethical principles to follow
+---
+
+Our ethical design principles are a set of ideals to guide how MoJ services are designed and built over time. 
+
+Although it may not be possible to apply all of our principles, use them as inspiration to improve how you work.
+
+<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
+  <div class="govuk-accordion__section">
+    <div class="govuk-accordion__section-header">
+      <h2 class="govuk-accordion__section-heading">
+        <span class="govuk-accordion__section-button" id="accordion-default-heading-1">
+          1. Minimise harm
+        </span>
+      </h2>
+    </div>
+    <div id="accordion-default-content-1" class="govuk-accordion__section-content">
+      <p class="govuk-body">Maximise well-being and minimise harm (this includes physical and mental well-being and harm).</p>
+    </div>
+  </div>
+  <div class="govuk-accordion__section">
+    <div class="govuk-accordion__section-header">
+      <h2 class="govuk-accordion__section-heading">
+        <span class="govuk-accordion__section-button" id="accordion-default-heading-2">
+          2. Prioritise people
+        </span>
+      </h2>
+    </div>
+    <div id="accordion-default-content-2" class="govuk-accordion__section-content">
+      <p class="govuk-body">Treat people as people, not as numbers or targets for the organisation.</p>
+    </div>
+  </div>
+  <div class="govuk-accordion__section">
+    <div class="govuk-accordion__section-header">
+      <h2 class="govuk-accordion__section-heading">
+        <span class="govuk-accordion__section-button" id="accordion-default-heading-3">
+          3. Include everyone
+        </span>
+      </h2>
+    </div>
+    <div id="accordion-default-content-3" class="govuk-accordion__section-content">
+      <p class="govuk-body">Provide equal opportunities and resources for all individuals and groups.</p>
+    </div>
+  </div>
+  <div class="govuk-accordion__section">
+    <div class="govuk-accordion__section-header">
+      <h2 class="govuk-accordion__section-heading">
+        <span class="govuk-accordion__section-button" id="accordion-default-heading-4">
+          4. Balance power
+        </span>
+      </h2>
+    </div>
+    <div id="accordion-default-content-4" class="govuk-accordion__section-content">
+      <p class="govuk-body">Balance power between individual people and between people and your organisation.</p>
+    </div>
+    <div class="govuk-accordion__section">
+      <div class="govuk-accordion__section-header">
+        <h2 class="govuk-accordion__section-heading">
+          <span class="govuk-accordion__section-button" id="accordion-default-heading-4">
+            5. Be honest
+          </span>
+        </h2>
+      </div>
+      <div id="accordion-default-content-4" class="govuk-accordion__section-content">
+        <p class="govuk-body">Do not mislead or deceive people.</p>
+      </div>
+      <div class="govuk-accordion__section">
+        <div class="govuk-accordion__section-header">
+          <h2 class="govuk-accordion__section-heading">
+            <span class="govuk-accordion__section-button" id="accordion-default-heading-4">
+              6. Respect people’s property
+            </span>
+          </h2>
+        </div>
+        <div id="accordion-default-content-4" class="govuk-accordion__section-content">
+          <p class="govuk-body">Keep people’s property safe and handle it with care. Personal data is personal property.</p>
+        </div>
+        <div class="govuk-accordion__section">
+          <div class="govuk-accordion__section-header">
+            <h2 class="govuk-accordion__section-heading">
+              <span class="govuk-accordion__section-button" id="accordion-default-heading-4">
+                7. Protect the environment
+              </span>
+            </h2>
+          </div>
+          <div id="accordion-default-content-4" class="govuk-accordion__section-content">
+            <p class="govuk-body">Make sustainable products and services without depleting resources or harming the environment.</p>
+          </div>
+          <div class="govuk-accordion__section">
+            <div class="govuk-accordion__section-header">
+              <h2 class="govuk-accordion__section-heading">
+                <span class="govuk-accordion__section-button" id="accordion-default-heading-4">
+                  8. Take responsibility
+                </span>
+              </h2>
+            </div>
+            <div id="accordion-default-content-4" class="govuk-accordion__section-content">
+              <p class="govuk-body">Take responsibility
+              Know who is responsible for making your product or service ethical (it’s likely to be everyone). Make sure everyone agrees on what they need to do. Be clear about what your responsibility is and own your part.</p>
+            </div>
+  </div>
+</div>
diff --git a/docs/ethics/standards.md b/docs/ethics/standards.md
@@ -0,0 +1,66 @@
+---
+layout: layouts/ethics.njk
+subsection: Ethics
+title: Meet the ethics standards
+---
+
+Our ethics standards are in beta. It is not a requirement to follow our ethics standards for service assessments but they are worth considering.
+
+## 1. Consider how your service impacts people individually and socially
+
+For example, your service should minimise:
+
+- psychological harms like trauma and anxiety
+- the risk to people’s safety, security or privacy
+- the opportunity for people to be abused
+
+Your service should not:
+
+- make people vulnerable
+- isolate people
+- exclude people
+- polarise people
+
+### Why it’s important
+
+The Ministry of Justice is responsible for supporting its users’ welfare. People interacting with the justice system often do so because something has gone wrong. In some situations, they might also be vulnerable.
+
+### How to meet point 1
+
+To meet point 1, you should: 
+
+- learn the [MoJ ethics principles](/ethics/principles)
+- do an [MoJ ethics assessment](https://docs.google.com/document/d/1GRHSKxj3_zXubfDkGHQp9Y2_6wpf9_dcB9qCuHQS4xM/)
+- use the [Data ethics framework](https://www.gov.uk/government/publications/data-ethics-framework/data-ethics-framework-2020) if your service stores personal information
+- use the [Ethics, Transparency and Accountability Framework for Automated Decision-Making](https://www.gov.uk/government/publications/ethics-transparency-and-accountability-framework-for-automated-decision-making/ethics-transparency-and-accountability-framework-for-automated-decision-making) if your service uses AI
+
+## 2. Consider the impact of your service on the environment
+
+For example, your service should use sustainable, environmentally friendly technologies where possible and minimise:
+
+- emissions
+- energy consumption
+- dependency on paper processes
+- waste
+- the amount users need to travel
+
+### Why it’s important
+
+The UK is committed to its sustainability objectives outlined in [Implementing the Sustainable Development Goals](https://www.gov.uk/government/publications/implementing-the-sustainable-development-goals/implementing-the-sustainable-development-goals--2). Our services should align with those objectives.
+
+### How to meet point 2
+
+Show that your team has considered the impact of your service on the environment by:
+
+- setting sustainable goals
+- reviewing and reporting on your sustainable goals
+- using a carbon calculator (AWS and Microsoft both offer this service)
+- scheduling an independent sustainability audit
+- using eco friendly suppliers 
+
+You can also make a plan to:
+
+- reduce paper in your service
+- automate simple tasks
+- decommission legacy systems
+- reduce the amount users need to travel
diff --git a/docs/service-patterns.md b/docs/service-patterns.md
@@ -0,0 +1,53 @@
+---
+layout: layouts/service-patterns.njk
+title: Adding service patterns to the MoJ design system
+---
+
+Service patterns help you to determine the steps and tasks necessary to design your service. You can also use service patterns to scope your work or identify levels of complexity.
+
+Any action or activity a user completes is a potential service pattern, like booking appointments, making referrals, or tracking progress.
+
+## What MoJ service patterns might look like
+
+We think service patterns should be:
+
+- based on common tasks that users complete as part of a service
+- reusable to encourage consistent experiences
+- modular so that they can be combined to create complete services
+- designed for multiple channels like offline services
+
+Each service pattern entry will contain guidance on how to implement the service pattern in a consistent way across our services.
+
+Service pattern information might include things like:
+
+- examples of implementation
+- customer journey maps
+- scenario mapping
+- supporting research
+- accessibility considerations
+- relevant components and patterns
+
+Service patterns will not replace design. Instead, service patterns will be a starting point to accelerate design and encourage consistent experiences.
+
+Each pattern must be unique and useful so that multiple products can use it.
+
+## Suggested MoJ service patterns
+
+We are developing our first service pattern right now.
+
+MoJ designers have already identified around 25 potential service patterns, such as:
+
+- book, view, and manage appointments
+- apply for something and track progress
+- order and pay for something
+- assign and complete activities
+
+This is not a complete list, and we may have missed something, but it's a good starting point.
+
+## Contributing to MoJ service patterns
+
+You will likely design multiple instances of potential service patterns when you develop new products or services.
+
+Speak to <a href="mailto:martin.ford-downes@digital.justice.gov.uk">Martin Ford-Downes</a> if you have a potential service pattern idea or want to help us work on others.
+
+We welcome feedback from everyone, including from people outside of the Ministry of Justice.