Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added 'learn when to use the kit' page #89

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
+68 −1
Draft

Added 'learn when to use the kit' page #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f818d21
Added 'why use the kit' page
vickytnz Nov 5, 2024
d9ac676
Changed to be 'learn when to use'
vickytnz Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/views/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ <h1>About</h1>

<p class="nhsuk-lede-text">The NHS.UK prototype kit enables you to make interactive prototypes that will look like NHS services and pages on NHS.UK. The prototypes you make are a great way to show ideas to others and for conducting user research.</p>

<p><a href="/learn-when-use-kit">Learn when to use the NHS.UK prototype kit</a>.</p>


<h2>Support</h2>

<p>The NHS.UK prototype kit is maintained by NHS England. If you've got a question or need support you can:</p>
Expand Down
2 changes: 1 addition & 1 deletion app/views/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ <h1 class="nhsuk-heading-l">
<hr class="nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-6">

<div class="nhsuk-u-reading-width">
<p class="nhsuk-u-margin-bottom-0">Visit the <a href="https://service-manual.nhs.uk">NHS digital service manual</a> for guidance and examples.</p>
<p class="nhsuk-u-margin-bottom-0"><a href="/learn-when-use-kit">Learn when to use the NHS.UK prototype kit</a> and visit the <a href="https://service-manual.nhs.uk">NHS digital service manual</a> for guidance and examples.</p>
</div>

</div>
Expand Down
64 changes: 64 additions & 0 deletions app/views/learn-when-use-kit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
{% extends 'layout.html' %}

{% block pageTitle %}
Learn when to use the kit - NHS.UK prototype kit
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels like a slightly weak title to me, and possibly also a bit vague ('when' could mean anything?)

Could we got for something a bit more punchy like "Why to use the NHS.UK prototype kit" or "The benefits of using the NHS.UK prototype kit" or similar? 🤔

{% endblock %}

{% block beforeContent %}
{{ breadcrumb({
href: "/",
text: "Home"
}) }}
{% endblock %}

{% block content %}
<div class="nhsuk-grid-row">

<div class="nhsuk-grid-column-two-thirds">

<h1>Learn when to use the NHS.UK prototype kit</h1>

<p class="nhsuk-lede-text">The NHS.UK prototype kit lets you make HTML prototypes of NHS.UK services.</p>


<h2 class="nhsuk-heading-m">When to use the NHS.UK prototype kit</h2>

<p>This kit lets you make HTML prototypes with the same front-end code as the NHS website. This means that you can:</p>
Comment on lines +21 to +26
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 2 sentences feels quite repetitive, both of each other and also the tagline on the homepage ("Rapidly create HTML prototypes of NHS.UK services"). Perhaps drop both and start with something more direct?


<ul class="nhsuk-list nhsuk-list--bullet">
<li>create a service that looks and behaves like NHS online services, on mobile and desktop</li>
<li>test on the user‘s device and with assistive technology (for example, a screen reader)</li>
<li>show different pages based on user input (called '<a href="./how-tos/branching">branching</a>') to test journey flows
</li>
<li><a href="./how-tos/publish-your-prototype-online">share them by publishing on the web</a></li>
<li>make design decisions within the constraints of the web</li>
<li>share understanding of design ideas, flows and behaviours with the whole team – including those that use assistive technology</li>
<li><a href="./how-tos/git">use common tools like Git and GitHub</a> for collaboration and project history</li>
</ul>
Comment on lines +28 to +37
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this might be better as paragraphs - feels a bit long for a list, and easy to forget what the lead in line is by the time you've got to the end? Using paragraphs might let us go into a bit more detail of the why or perhaps give examples too?

I think the last point ("use common tools like Git and GitHub") could also possibly be dropped as that might be a bit jargon-y for an introduction piece?


<p>If your service is in the <a href="https://www.gov.uk/service-manual/agile-delivery/how-the-alpha-phase-works">alpha phase</a> or <a href="https://www.gov.uk/service-manual/agile-delivery/how-the-beta-phase-works">beta phase</a> and does not use the NHS.UK prototype kit for testing with users, you may get <a href="https://www.gov.uk/service-manual/design/making-prototypes#when-to-use-prototypes">feedback in your service assessment report to use the kit</a>.</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feels a bit like a veiled threat? Maybe better to turn this around and explain that using the kit can help you meet your alpha assessment by demonstrating that you have tested a working prototype with users? (or similar)


<h3 class="nhsuk-heading-s">Do not use the NHS.UK prototype kit for real services</h3>

<p>
You must not use prototype code for production. When your service is ready to move into production, the code needs to meet different standards. For example, it needs to be secure and perform well with large volumes of traffic.
</p>
Comment on lines +41 to +45
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe drop this, or move to the bottom, or another page? Feels a bit jarring.



<h2 class="nhsuk-heading-m">When to use other prototyping tools</h2>
<p>
Sometimes you may want to use different tools for prototyping, for example if you:
</p>

<ul class="nhsuk-list nhsuk-list--bullet">
<li>want to draw different journeys as a team activity</li>
<li>need to make screens with people who are not comfortable using code</li>
<li>
are designing screens that will not use the same components or patterns as the NHS website, for example clinician services
</li>
</ul>
<P>You can get examples of other <a href="https://design-system.service.gov.uk/community/resources-and-tools/">community resources from the GOV.UK Design System</a>. You may need to change these to use NHS.UK branding.</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should hold off linking until we can link to the upcoming NHS community page?

We could also link to https://service-manual.nhs.uk/content/how-to-write-good-questions-for-forms/test-your-questions which contains 3 PDFs for paper prototyping.

</div>

</div>
{% endblock %}