2024 02 prototype version 2 updates

design/prototype-version-2/README.md

@@ -1,6 +1,6 @@
 # Prototype version 2
 
-Dates tested: 2022-05-12 to 2022-05-13
+Dates tested: *2022-05-12 to 2022-05-13*
 
 ## Status
 
@@ -18,8 +18,6 @@ ___
 
 ___
 
-<br>
-
 ## Context
 
 > **Sprint 3**  
@@ -29,21 +27,18 @@ Changes made were based on feedback received during the first round of research.
 
 We introduced a return journey for testing, where we faked a previously created form with some errors and based the task on the form creator getting feedback from a colleague to make fixes.
 
-<br>
-<br>
+___
 
 ## Admin interface screenshots
 
 Below are the screens a form creator will see when making or editing their forms.
 
-<br>
 
 ### GOV.UK Forms landing page
 
 ![GOV.UK Forms landing page. Screenshot](screenshots/001-Form-Home.png)
 *Page with “GOV.UK Forms” heading and green “Create a form” start button.*
 
-<br>
 
 ### Name your form page
 
@@ -56,9 +51,8 @@ Below the text input is a green “Save and continue” button.
 
 #### What we changed from the previous version
 
-[Changes to the name your form page](page-detail/name-your-form.md)
+[Changes to the ‘name your form’ page](name-your-form)
 
-<br>
 
 ### Form overview page
 
@@ -69,9 +63,8 @@ There is a green “Add a question” button.
 
 #### What we changed from the previous version
 
-[Changes to the form overview page](page-detail/form-overview.md)
+[Changes to the ‘form overview’ page](form-overview)
 
-<br>
 
 ### Edit question 1
 
@@ -93,7 +86,7 @@ Next is a secondary heading, “What kind of answer do you need to this question
 - National Insurance number
 - Phone number
 
-The page ends with a green “Save changes” button, next to a grey “Create next question” button before a red “Delete page” button. Below the three buttons is a “Go to form overview” link.
+The page ends with a green “Save changes” button, next to a grey “Create next question” button before a red “Delete question” button. Below the three buttons is a “Go to form overview” link.
 
 <!-- describe side preview pane -->
 On the right side of the screen there is a secondary heading, “Question preview” with a link to “Preview question in a new tab”.
@@ -105,11 +98,6 @@ Below the link is a smaller version of an empty GOV.UK service page within an if
 
 The detail component, “Add hint text to help people answer the question”, is now expanded revealing the hint text “You can use hint text if you need to explain the format the answer should be in, or where to find the information you’ve asked for.” before a text input.
 
-#### What we changed from the previous version
-
-[Changes to the edit question page](page-detail/edit-question.md)
-
-<br>
 
 ### Edit question 2 - saved question
 
@@ -125,7 +113,11 @@ The ‘Date’ radio is now selected.
 <!-- describe side preview pane -->
 On the right side of the screen the iframe has now updated to include the question text “What is your date of birth?” and displays the date component underneath with inputs for ‘Day’, ‘Month’ and ‘Year’. The green “Continue” button is still disabled.
 
-<br>
+
+#### What we changed from the previous version
+
+[Changes to the ‘edit question’ page](edit-question)
+
 
 ### Edit check your answers
 
@@ -144,7 +136,6 @@ On the right side of the screen there is a secondary heading, “Page preview”
 
 The iframe includes the title “Check your answers” and displays the secondary heading, “Declaration”, above the text input content provided on the left, “By submitting this form you are confirming that, to the best of your knowledge, the answers you are providing are correct.”
 
-<br>
 
 ### Edit confirmation page
 
@@ -163,7 +154,6 @@ On the right side of the screen there is a secondary heading, “Page preview”
 
 The iframe includes the title “Form submitted” above text “Your reference number is HDJ2123F” in a green box. There is also a secondary heading, “What happens next”, above the text input content provided on the left, “We’ve sent you an email to confirm we have received your form.”
 
-<br>
 
 ### Publish a form
 
@@ -177,31 +167,25 @@ There is a green “Publish form” button, the word ‘or’, and then a link t
 <!-- describe side preview pane -->
 On the right side of the screen the iframe includes the title “Apply for a juggling licence” above a green “Start now” button to simulate the journey from the start page.
 
-<br>
-<br>
 
 ### Some things we changed since last time
 
 - standard pages call to action button text changed from “Create a new page” to “Save changes”
-- standard pages rework of the in page preview (iframe on the right side of the screen) including adding a secondary heading, “Page preview” and adding a “Preview page in a new tab” link above the iframe
+- standard pages rework of the in page preview (iframe on the right side of the screen) including adding a secondary heading, “Page preview” and adding a “Preview question in a new tab” or “Preview page in a new tab” link above the iframe
 
 For more information, see [v0.0.2 release notes](https://github.com/alphagov/forms-prototypes/releases/tag/v0.0.2).
 
-<br>
-<br>
+___
 
 ## Form runner screenshots
 
 Below are the screens the form filler (the end user) would see as they complete the form.
 
-<br>
-
 ### Preview start page
 
 ![Preview Apply for a juggling licence start page. Screenshot](screenshots/101-Preview-start-page.png)
 *Page with “Apply for a juggling licence” heading and a green “Start now” button containing a white arrow.*
 
-<br>
 
 ### Preview question 1
 
@@ -214,7 +198,6 @@ The basic structure includes a “Back” link which should take the form filler
 
 When the form filler clicks the “Continue” button the product should validate that an input has been given (field is not empty or radio is selected for example) before continuing through to the next question in sequence.
 
-<br>
 
 ### Preview final question
 
@@ -223,7 +206,6 @@ When the form filler clicks the “Continue” button the product should validat
 
 This page is an example of the last question in a form sequence. The difference being a green “Check your answers” button in place of the usual “Continue”.
 
-<br>
 
 ### Preview check your answers (summary page)
 
@@ -234,7 +216,6 @@ The summary list component lists rows of the “Short version” of the question
 
 Below is a secondary heading, “Declaration”, before the text “By submitting this form you are confirming that, to the best of your knowledge, the answers you are providing are correct.” This is an example declaration for the form filler to agree to, by clicking the green “Agree and submit” button. The text of the declaration is editable by the form creator within the admin side of the builder, meaning it can be customised as to the needs of the different forms or department.
 
-<br>
 
 ### Preview form submitted (confirmation page)
 
@@ -243,28 +224,31 @@ Below is a secondary heading, “Declaration”, before the text “By submittin
 
 This page includes a secondary heading “What happens next” followed by the content “We’ve sent you an email to confirm we have received your form.” This text is editable by the form creator within the admin side of the builder, meaning it can be customised as to the needs of the different forms or department and should match their internal service level agreements (SLAs).
 
-<br>
-
 ___
 
-<br>
-
 ## What we learned
 
-> Give a synopsis of the key findings from the round of research we tested this version.  
-> Include examples of found needs, pain points or quotes to help explain the findings. These do not have to be too detailed, as this should be covered in the research findings packs/decks - which can be linked to from here.
+There were several key issues identified that we should explore in the next iteration, including: 
 
-[MURAL board playback](https://app.mural.co/t/gaap0347/m/gaap0347/1652262618825/de85a467bad90d061809431a9fa8007393135c43?wid=0-1652696148470)
+- users wanted an explicit option to change / edit the name of a form rather than use the ‘back button’  
+- there is still some confusion over what value a short name provides  
+- there was still uncertainty around saving / how to save the form  
+- Preview pane is confusing initially and users don't know what it’s for. However, it becomes much more useful when editing / or going back to a question  
 
-<!-- REMOVE ME!!! after write up -->
-<!-- https://drive.google.com/drive/folders/1ePhbd9quZvA8Z4l8WB9sMjmsWDI5rZd- -->
+### User resaearch documentation
+- [2022-05-23 Basic Form Building](https://github.com/alphagov/forms/blob/main/research/2022-05-23_Basic_Form_Building.md)  
+- [MURAL board playback](https://app.mural.co/t/gaap0347/m/gaap0347/1652262618825/de85a467bad90d061809431a9fa8007393135c43?wid=0-1652696148470)
+- [Supporting documents (Google drive)](https://drive.google.com/drive/folders/1ePhbd9quZvA8Z4l8WB9sMjmsWDI5rZd-)
 
-<br>
+___
 
 ## Opportunities
 
-> Are there any opportunities we would like to explore, or ideas that we think we could consider?  
-> List these here. They do not have to be full formulated at this point, but will inform our work (and should be added to Trello to discuss and ideate as a team).
+Key decisions
+
+1. we are ready to implement the basic first steps of the form builder
+2. we want to test the prototype with users who have never seen the tool before
+3. we need to understand the needs around processing emails and if we should make it a default part of the tool
 
 <br>