Add homepage pattern guidance

docs/examples/homepage/homepage-native.njk

@@ -0,0 +1,131 @@
+---
+layout: layouts/example-full-page-mobile.njk
+mobile: true
+hub: home
+title: Homepage native
+figmaLink: 
+vueLink: 
+---
+
+{% from "nhsapp/components/card/macro.njk" import nhsappCardGroup %}
+{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
+{% from "nhsapp/styles/section-heading/macro.njk" import nhsappSectionHeading %}
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-full">
+
+    <div class="nhsuk-u-margin-bottom-7 nhsuk-u-padding-top-4">
+      <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 40 16" height="40" width="80" aria-describedby="nhs-logo-title" role="img">
+        <title id="nhs-logo-title">NHS</title>
+        <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
+        <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8
+        9H1.1M17.3 1.5h3.6l-1
+        4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2
+        5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4
+        0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3
+        4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7
+        3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+      </svg>
+      <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-2">
+        <span class="app-greeting">Good morning</span>, 
+        <!-- Inline CSS added to sentence case the users name but need to check with nav team to see if we need to do this or not -->
+        <span style="display: block; text-transform: capitalize; word-wrap: break-word;">mary swanson</span>
+      </h1>
+      <p class="nhsuk-heading-s nhsuk-u-margin-bottom-0">
+        NHS number:
+        <span class="nhsuk-u-font-weight-normal">123 456 7890</span>
+      </p>
+    </div>
+
+    {{ nhsappSectionHeading({
+      headingText: "Services",
+      linkText: "View all",
+      linkUrl: "#",
+      linkAriaLabel: "View all services"
+    }) }}
+
+    {{ nhsappCardGroup({
+      stacked: true,
+      cards: [
+        {
+          title: "Request medicines",
+          href: "#"
+        },
+        {
+          title: "Check if you need urgent medical help using 111 online",
+          href: "#"
+        }
+      ]
+    }) }}
+
+    {{ nhsappSectionHeading({
+      headingText: "Your health",
+      linkText: "View all",
+      linkUrl: "#",
+      linkAriaLabel: "View all your health"
+    }) }}
+
+    {{ nhsappCardGroup({
+      stacked: true,
+      cards: [
+        {
+          title: "GP health record",
+          href: "#"
+        },
+        {
+          title: "View and manage prescriptions",
+          href: "#"
+        },
+        {
+          title: "Upcoming and past appointments",
+          href: "#"
+        }
+      ]
+    }) }}
+
+    {{ nhsappSectionHeading({
+      headingText: "Messages"
+    }) }}
+
+    {% if data['messages'] > 0 %}
+      {{ nhsappCardGroup({
+        stacked: true,
+        cards: [
+          {
+            title: 'View your messages',
+            href: '#',
+            prefixIcon: 'messagesUnread',
+            linkAriaLabel: 'Messages, you have ' + data['messages'] + ' unread messages',
+            badgeLarge: {
+              count: data['messages'],
+              label: 'unread messages',
+              ariaHidden: true
+            }
+          }
+        ]
+      }) }}
+    {% else %}
+      {{ nhsappCardGroup({
+        stacked: true,
+        cards: [
+          {
+            title: 'View your messages',
+            href: '#',
+            prefixIcon: 'messages'
+          }
+        ]
+      }) }}
+    {% endif %}
+
+    {{ nhsappSectionHeading({
+      headingText: "Account"
+    }) }}
+
+    {{ nhsappCard({
+      title: 'Manage services for another person',
+      href: '#',
+      prefixIcon: 'switchProfile'
+    }) }}
+
+  </div>
+</div>

docs/examples/homepage/homepage-web.njk

@@ -0,0 +1,119 @@
+---
+layout: layouts/example-full-page-web.njk
+hub: home
+title: Homepage web
+figmaLink: 
+vueLink: 
+---
+
+{% from "nhsapp/components/card/macro.njk" import nhsappCardGroup %}
+{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
+{% from "nhsapp/styles/section-heading/macro.njk" import nhsappSectionHeading %}
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-full">
+
+    <div class="nhsuk-u-margin-bottom-7">
+      <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-2">
+        <span class="app-greeting">Good morning</span>, 
+        <!-- Inline CSS added to sentence case the users name but need to check with nav team to see if we need to do this or not -->
+        <span style="display: block; text-transform: capitalize; word-wrap: break-word;">mary swanson</span>
+      </h1>
+      <p class="nhsuk-heading-s nhsuk-u-margin-bottom-0">
+        NHS number:
+        <span class="nhsuk-u-font-weight-normal">123 456 7890</span>
+      </p>
+    </div>
+
+    {{ nhsappSectionHeading({
+      headingText: "Services",
+      linkText: "View all",
+      linkUrl: "#",
+      linkAriaLabel: "View all services"
+    }) }}
+
+    {{ nhsappCardGroup({
+      stacked: true,
+      cards: [
+        {
+          title: "Request medicines",
+          href: "#"
+        },
+        {
+          title: "Check if you need urgent medical help using 111 online",
+          href: "#"
+        }
+      ]
+    }) }}
+
+    {{ nhsappSectionHeading({
+      headingText: "Your health",
+      linkText: "View all",
+      linkUrl: "#",
+      linkAriaLabel: "View all your health"
+    }) }}
+
+    {{ nhsappCardGroup({
+      stacked: true,
+      cards: [
+        {
+          title: "GP health record",
+          href: "#"
+        },
+        {
+          title: "View and manage prescriptions",
+          href: "#"
+        },
+        {
+          title: "Upcoming and past appointments",
+          href: "#"
+        }
+      ]
+    }) }}
+
+    {{ nhsappSectionHeading({
+      headingText: "Messages"
+    }) }}
+
+    {% if data['messages'] > 0 %}
+      {{ nhsappCardGroup({
+        stacked: true,
+        cards: [
+          {
+            title: 'View your messages',
+            href: '#',
+            prefixIcon: 'messagesUnread',
+            linkAriaLabel: 'Messages, you have ' + data['messages'] + ' unread messages',
+            badgeLarge: {
+              count: data['messages'],
+              label: 'unread messages',
+              ariaHidden: true
+            }
+          }
+        ]
+      }) }}
+    {% else %}
+      {{ nhsappCardGroup({
+        stacked: true,
+        cards: [
+          {
+            title: 'View your messages',
+            href: '#',
+            prefixIcon: 'messages'
+          }
+        ]
+      }) }}
+    {% endif %}
+
+    {{ nhsappSectionHeading({
+      headingText: "Account"
+    }) }}
+
+    {{ nhsappCard({
+      title: 'Manage services for another person',
+      href: '#',
+      prefixIcon: 'switchProfile'
+    }) }}
+
+  </div>
+</div>

docs/patterns/homepage.md

@@ -0,0 +1,42 @@
+---
+layout: layouts/pattern.njk
+title: Homepage
+description: The homepage has quick links to the most popular services of the NHS App. We work this out using Adobe Analytics and user feedback. The homepage also displays the name of the user and their NHS number. 
+backlogID: 66
+tags:
+  - pattern
+---
+
+{% example "homepage/homepage-native.njk" %}
+
+## The structure of the homepage
+
+{% example "homepage/homepage-web.njk" %}
+
+### Page heading
+
+This page heading includes a greeting that changes depending on the time of day. Research suggested this helps the app feel more personal to users.
+
+### Section headings
+
+Section headings are used to divide the card links across the page. This helps users understand how the journeys are organised within the app. The ‘view all’ links give users an in-page way to navigate to hub pages. In usability testing these links were the most common way that users proceeded from the homepage into the ‘Services’ and ‘Your health’ hubs.
+
+### Card links
+
+Selecting one of these card links takes a user either directly into the start of a journey, or deeper into the app to a sub-hub.
+
+### Campaign card
+
+This card can be used to promote seasonal or topical campaigns such as COVID or flu vaccines, blood donation or being part of health research.
+
+## Proposing changes to the homepage
+
+We are careful to limit the number of links that are shown in the homepage. We need to ensure that users can quickly scan through the page and access the most popular features of the NHS App.
+
+The Navigation and Onboarding Team maintains and updates the homepage. We regularly review and test the selection of links displayed. If you would like to suggest changes to the homepage, please contact the team.
+
+## Research
+
+In our research, users were able to complete a variety of tasks successfully from the starting point of the homepage. In one unmoderated usability test where people were tasked with booking an appointment for a relative, 90% completed the task successfully and all participants selected the correct onward link from the homepage.
+
+In research we also found that users perceived the display of personal information, particularly their NHS number, to be valuable.