Build out the PPE putting on personal protective equipment step by step guide

[lukesleeman]

Inside the PPE section there is a button which should link off to a "Putting on Personal Protective Equipment" "Step By Step Guide"

We need to build build out the putting on guide.

@greggmiller Can you please provide some information in this issue on what should be in this section? Once that is done assign the issue to Marc Edwards.

@marcedwards Once greg has provided info, can you provide some design guidance in this issue in on how it should look. Once this is done, can you label this issue as "Ready for Dev" so that one of the devs can pick it up.

[greggmiller]

Please refer to source document

https://github.com/Western-Health-Covid19-Collaboration/source-documents/blob/master/Western%20Health%20donning%20and%20doffing%20PPE.pdf

Putting on PPE = Donning. Taking off PPE = Doffing

The step by step guide for Putting ON (donning) Has 6 steps

1. Hand Hygiene (with attached image - if difficult to enhance the one in PDF I can try and find alternative)
2. Gown
3. Mask
4. Eye Protection
5. Hand Hygiene (again!)
6. Gloves

There have been two main methods discussed for presenting this info (and the reverse processs/doffing):

1. Step-by-step desing created by @alessandrofavero a couple of days ago
2. Carousel

Both are good. I thought @alessandrofavero sample at the weekend looked great! I will leave it to you guys to decide @marcedwards @Mattro

[lukesleeman]

For reference this is the step by step thing Alessandro showed us

[greggmiller]

Thanks @lukesleeman

[marcedwards]

I think that looks awesome. Great work @alessandrofavero! One UX question: Is it possible to tap to jump to a different step? It might be nice to go back, if someone hits continue by accident.

[alessandrofavero]

Hey @marcedwards thanks , yes the user can tap on any step to view it again. On the slack channel, there should be a .gif with a more custom version that I was working on.

[marcedwards]

Great! Thanks for the info.

[lukesleeman]

@Mattro put some screens in zeplin!

@greggmiller Had some feedback on this:

@Mattro or @marcedwards are you able to action gregs feedback, particularly about the order for PPE on and the importtance of hand hygene? Perhaps hand hygene gets its own colour? Red? Or an ⚠️ icon?

[lukesleeman]

With what Greg was saying about the collapsible text - The designers have taken the deliberate approach not to collapse it, and just have it scrollable. If we need some way for the users to keep track of their progress through the process (collapsing things? a timer like Kim suggested? checkboxes?) then we can do that a bit later as part of another issue

[lukesleeman]

Question for @greggmiller - Over in the PPE taking off there is a hand hygene image that looks quite nice:

Can we use that same image in here for the putting on ?

[kimngyn]

I think we should use the same image, and tweak the writing

[greggmiller]

Yes fine for hand hygiene to be pulled from elsewhere

And yes, we can put the modifications (collapsible etc.) in later.

[greggmiller]

@kimngyn Are you happy to take this on?

[marcedwards]

@kimngyn Yep! The plan was to use the same image, but to avoid confusion, maybe I should duplicate it with a different name. I should also rename from washhands to hand_hygene. I’ll do that now.

[marcedwards]

This has been done with https://github.com/Western-Health-Covid19-Collaboration/wh_covid19_app/pull/75

I think we’re ready for dev now.

[kimngyn]

Ok ill do this one

[lukesleeman]

Just spoke to @kimngyn she is working on this now :-)

Go Kim! 🙌 🙌 🙌

[ericjiang97]

Resolved in #89