Prototype guidance

[davidhunter08]

Updating the prototyping guidance to help designers get setup with the NHS App prototype.

First draft

Trying to reduce the duplication of content with the prototype kit as much as possible by linking out to guidance.

[Tosin-Balogun]

I'll have a look at this PR tomorrow @davidhunter08

[Tosin-Balogun]

Pull request review

I just realised I have not downloaded the microsite instance to inspect the branch on my machine, so I just used the screenshot on the PR here.

This is an improvement on the previous version for sure, somewhere in the middle between an expert and novice user.

Some things to consider (ignore if not seen as helpful)

• Assuming the novice user who is less familiar with code has come here, would they know what to look for in terms of downloading the app prototype kit on GitHub?

• Where it says "NHS App design system and NHS App prototype", can it just say "NHS app prototype and design system"

• Where it says "You must follow the NHS prototype kit setup guide first", can it use a less forceful tone and say something that implies that's what they need to install first like "To get going, you will need to install the kit by following the NHS prototype kit setup guide first", rewrite this for the intended style

• Another thing worth considering is the link to the NHS kit takes the user away from this get started guide. Which means by the time the novice user has gone there to complete the task, they prob have forgotten where they started from. I don't know if a 'opens in a new window' would be useful here.

• The last copy where it says "You can copy the code from the HTML or Nunjucks tabs below any examples" is very confusing, I had to read it 3 times and it's still confusing. If the idea is to introduce the concept of the user copying code from the tabs, perhaps focus on just this one instance and when next they see it on the guides, they would recognise it. That copy is trying to do too much here when the user is meant to be focused on getting started

[davidhunter08]

Thanks for looking @Tosin-Balogun

Assuming the novice user who is less familiar with code has come here, would they know what to look for in terms of downloading the app prototype kit on GitHub?

Assumption is that they would have done the first part and followed the NHS prototype kit guidance, so then the 'downloading' bit would be more familiar. But there might be a better way to explain this?

Where it says "NHS App design system and NHS App prototype", can it just say "NHS app prototype and design system"

Makes sense to me, I'll change it then see what @Graham-Pembrey thinks.

Where it says "You must follow the NHS prototype kit setup guide first", can it use a less forceful tone and say something that implies that's what they need to install first like "To get going, you will need to install the kit by following the NHS prototype kit setup guide first", rewrite this for the intended style

Good point. @Graham-Pembrey any thoughts on this?

Another thing worth considering is the link to the NHS kit takes the user away from this get started guide. Which means by the time the novice user has gone there to complete the task, they prob have forgotten where they started from. I don't know if a 'opens in a new window' would be useful here.

Definitely something to consider.

The last copy where it says "You can copy the code from the HTML or Nunjucks tabs below any examples" is very confusing, I had to read it 3 times and it's still confusing. If the idea is to introduce the concept of the user copying code from the tabs, perhaps focus on just this one instance and when next they see it on the guides, they would recognise it. That copy is trying to do too much here when the user is meant to be focused on getting started

Ok, I'll rethink about this copy 🤔.

[anna-rigo]

Pull request review

I just realised I have not downloaded the microsite instance to inspect the branch on my machine, so I just used the screenshot on the PR here.

This is an improvement on the previous version for sure, somewhere in the middle between an expert and novice user.

Some things to consider (ignore if not seen as helpful)

* Assuming the novice user who is less familiar with code has come here, would they know what to look for in terms of downloading the app prototype kit on GitHub?

* Where it says "NHS App design system and NHS App prototype", can it just say "NHS app prototype and design system"

* Where it says "You must follow the NHS prototype kit setup guide first", can it use a less forceful tone and say something that implies that's what they need to install first like "To get going, you will need to install the kit by following the NHS prototype kit setup guide first", rewrite this for the intended style

* Another thing worth considering is the link to the NHS kit takes the user away from this get started guide. Which means by the time the novice user has gone there to complete the task, they prob have forgotten where they started from. I don't know if a 'opens in a new window' would be useful here.

* The last copy where it says "You can copy the code from the HTML or Nunjucks tabs below any examples" is very confusing, I had to read it 3 times and it's still confusing. If the idea is to introduce the concept of the user copying code from the tabs, perhaps focus on just this one instance and when next they see it on the guides, they would recognise it. That copy is trying to do too much here when the user is meant to be focused on getting started

In regards to Tosin's last point, could it help to maybe highlight the HTML and Nunjucks options in the example (e.g., red box)? Of course if there is a way to be consistent with NHS design.

I don't want to be nitpicking at all, this is just a suggestion. Would it help to be consistent with images used in line with our App design system so having the example image underneath the line "You can use..." and then the text below the image?

[Graham-Pembrey]

Intro

Good points about the intro sentences. Just a suggestion here for tweaking it slightly and perhaps mentioning the value of prototyping?

This guide explains how to use the NHS App prototype. You can use it alongside the NHS App design system to make interactive prototypes that look like real NHS App pages.

Anyone can use the prototype to:

• try out ideas
• get feedback from users or people you work with

Before you start

Tosin made a good observation about tone. I think his suggested text works well. Agreed that it might be best to open the external links a new window. I know the Service Manual generally advises caution about doing that, but it gives some exceptions. It feels like it makes sense here? https://service-manual.nhs.uk/content/links

Download and Guides

On the points about novice users, as one myself, I'm wondering if it might be better to put the 'Guides' section first and then 'Download'? We could perhaps advise people to get familiar with the NHS prototype kit first, and then download the NHS App prototype on GitHub? I feel that's probably what I need to do before using the app kit.

Example

I agree that Anna's idea is worth considering. Another option could be changing the line above the example to explain a bit more. For example:

On the NHS and NHS App design systems, you'll find examples of components like the one below. To use any of these components in your prototype, you can select HTML or Nunjucks, then copy and paste the code.

[davidhunter08]

Second draft

Updates based on feedback:

• updated intro with @Graham-Pembrey's suggestion
• softened the 'before you start' copy based on @Tosin-Balogun's feedback
• moved 'Guides' before 'Download'
• updated the 'Components' copy with @Graham-Pembrey's suggestion (also thanks @anna-rigo)

Notes:

• the second sentence I added in the 'Get started' section feels a bit clunky - cc @Graham-Pembrey

[Tosin-Balogun]

A lot of great improvements from the previous version.

The guide section stands out, I have added comment to that section. I think that is all, prob good to go

[davidhunter08]

Third draft

[davidhunter08]

A lot of great improvements from the previous version.

The guide section stands out, I have added comment to that section. I think that is all, prob good to go

I made changes based on your feedback @Tosin-Balogun 👀

[Tosin-Balogun]

Thanks Dave – Looks super good 🚀 🚀 🚀