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.

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

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

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Conversation

vickytnz
Copy link
Contributor

@vickytnz vickytnz commented Nov 5, 2024

Added page based on GOV.UK guidance https://prototype-kit.service.gov.uk/docs/prototyping (and restructured to be about the kit first with notes about other methods later)

Learn when to use the NHS.UK prototype kit page

Learn when to use the NHS.UK prototype kit

This links to the govuk design system community resources page as there isn't yet a version for the NHS.

Links

Also added link to pages

Home

Learn when to use the NHS.UK prototype kit and visit the NHS digital service manual for guidance and examples.

About

Learn when to use the NHS.UK prototype kit

Things I'm thinking about

  1. The fact we can't link to NHS.UK resources yet - hopefully we can swap this out if and when they are available
  2. The balance between 'why' and 'when' in headers -may need tweaking for example to 'learn when to use the NHS.UK prototype kit' Now with 'Learn when to use the NHS.UK prototype kit'
  3. Is it 'HTML prototype' (as on the home page and so adopted here), 'code prototype' (as on the govuk website) or something else? Does this need to go into the style guide for the kit as well?
  4. There is a bit of repetition between this page and the about page (for example not using this for production code) - this may be fine, but the extreme would even be to make this page part of the about page and have support as its own thing

@frankieroberto frankieroberto temporarily deployed to nhs-prototyp-prototypin-q8zltr November 5, 2024 21:46 Inactive
@vickytnz vickytnz linked an issue Nov 5, 2024 that may be closed by this pull request
@vickytnz vickytnz temporarily deployed to nhs-prototyp-prototypin-q8zltr November 5, 2024 22:28 Inactive
@vickytnz vickytnz changed the title Added 'why use the kit' page Added 'learn when to use the kit' page Nov 5, 2024
Copy link
Contributor

@frankieroberto frankieroberto left a comment

Choose a reason for hiding this comment

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

Sorry for the slightly critical review. It’s a good start, but I think we can beef it up into something more compelling? Happy to collaborate on this!

Some good inspiration could be the Forms or Payments homepages. Or it could perhaps be written a bit more like a blog post, with a couple of quoted examples from team who’ve used the kit?

I was also thinking it could be linked to prominently from the homepage, within the blue 'hero' banner at the top?

{% 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? 🤔

Comment on lines +21 to +26
<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>
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?

Comment on lines +28 to +37
<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>
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?

<li><a href="./how-tos/git">use common tools like Git and GitHub</a> for collaboration and project history</li>
</ul>

<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)

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.

Comment on lines +41 to +45
<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>
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.

@vickytnz vickytnz marked this pull request as draft November 7, 2024 08:26
@vickytnz
Copy link
Contributor Author

vickytnz commented Nov 7, 2024

This is an alternative - restructure the navigation so that the benefits can go on the home page. this is similar to what is done on other GOV.UK tool sites (I have tried to do this with 3 points in thirds, but others have up to 8 shown in half-width, so there are plenty of opportunities)

home page with menu and benefits under the list

The three example here are

Realistic

Create a service that looks and behaves like the real thing, using components and styles from the NHS.UK website.

Accessible

Create or test designs with people who use assistive technology (for example, screen reader users).

Free and open source

Use common tools like Git and Github for collaboration and project history.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add page to explain the benefits of prototyping in code
2 participants