Change e.Coli workflow

[janagombitova]

With Mert we looked today at the user workflow for e.Coli tests and for the case where we want to add TC to e.Coli tests (issue #236).

Problem

Currently when testing e.Coli in initial screen gives you two options: Next (brings you to input the data) and Instructions. The Instructions also hold details on how to input the data what is a bit confusing today. Furthermore, in the field the user workflow is a bit different as you first collect the sample, incubate the sample for at least a day and then input the data.

Goal

We aim to support the actual testing workflow as best as possible. This means to show the instructions when they are relevant in the workflow and keep the workflow as simple as possible.

Idea

With this issue, we want to change the workflow for the e.Coli tests. The idea is to create two workflows within the test:

1. Prepare sample (holding the instructions and bringing you back to Flow app at the last step)
2. Submit result after incubation (holding instructions on how to input data, data input and bringing you back to Flow with the data)

Next steps

• [x] change initial screen to add two buttons/action items: '1. Prepare sample' and '2. Submit result after incubation'
• [x] include instructions 1 - 11 to the first step, Prepare sample, see below
• [x] last screen of the first step should have an action button to go back to Flow app
• [x] implement new workflow for the second step, Submit result after incubation, see below
• [x] change some instructions, see below

Workflow for the first step

Workflow for the second step

Instructions changes

Some changes to the instructions also need to be applied:

• Step 1: Prepare the work area and put on plastic gloves.
• Step 11: change top incubation temperature to 35-37 degrees Celcius, time 20h

[janagombitova]

@nhternup I have only one comment in regards to the screens you sent this morning: http://caddisfly.heliohost.org/instructions/?id=ed4db0fd3386

Could we do two buttons, one an outlined - medium emphasis for the Preparing the sample and the second a contained - high emphasis one for Submitting the result? Can we place them next to each other with the outlined button on the right and contained one on the left? The text should be capitalised and shortened. I propose: Prepare sample, Submit result.

https://material.io/design/components/buttons.html#usage

Otherwise it looks good/

[nhternup]

In some languages the words/phrases are longer. How about a vertical arrangement: Example below with different orders. First order probably makes better sense:

 

[MBlommestijn]

Looks good, but I would place the 'Prepare sample' above the 'Submit result' button since that's the logical order.