diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index fe1a9c50..00000000 Binary files a/.DS_Store and /dev/null differ diff --git a/design/README.md b/design/README.md new file mode 100644 index 00000000..a9673ba2 --- /dev/null +++ b/design/README.md @@ -0,0 +1,22 @@ +# Design documentation + +We use this part of the GOV.UK Forms repo to record design work and decisions we’ve made. + +You can explore our initial versions of GOV.UK Forms, the prototypes we tested, and new features as they’ve been iterated and adapted based on user research, data and new design patterns. + +## Prototype version history + +At the start of alpha we explored the wider product, focusing on quick iterations across whole journeys. This helped us get a clearer picture of our minimum viable product (MVP) so we could baseline where we wanted to start work from. + +* [Prototype version 1](prototype-version-1) +* [Prototype version 2](prototype-version-2) +* [Prototype version 3](prototype-version-3) +* [Prototype version 4](prototype-version-4) +* [Prototype version 5](prototype-version-5) +* [Prototype version 6](prototype-version-6) + +## Features + +Once we had a baseline that worked for form creators we shifted focus onto key features. The aim was to help align GOV.UK Forms with the key functionality that would help form creators make more of their forms with our product. We used the team’s analysis of feature coverage of forms across GOV.UK to help us priorititse this work. + +You can explore the [features](features) as we’ve designed them and see how they’ve been iterated based on user research and feedback through private beta and ‘early access’. ('Early access' is the period in which we’re encouraging people to try out GOV.UK Forms to see if it’s suitable for them). diff --git a/design/features/README.md b/design/features/README.md index dcb962c0..474e7fca 100644 --- a/design/features/README.md +++ b/design/features/README.md @@ -1,7 +1,30 @@ # Features -Features we have designed and developed into the product directly, rather than the prototype. +We use this area to record design work and decisions made, and any iterations made to improve usability for form creators and form fillers. -## [Live and draft](/design/features/live-draft/README.md) -The ability to make a draft of a live form to prepare changes to it. You can then make all the changes live at the same time, and at an appropriate time. +## Explore the features we’ve designed + +### [Confirm that a form’s been submitted (form fillers)](confirmation-email-for-form-fillers) +This feature introduces new functionality to the form filler’s journey, allowing them to request an email confirming that they’ve successfully submitted a form. + +### [Add guidance to help people answer the question (‘detailed guidance’)](detailed-guidance) +This feature introduces new functionality to the form building tool, allowing form creators to add more complex help text to a question page. This ‘guidance’ text will appear above the question, on the same page. + +### [‘Early access’ journey](early-access) +This journey is designed to allow people to create a trial account and request an upgrade to an editor account - so they can make live forms to be published on GOV.UK. + +### [Editing pages when looking at a preview of a form](editing-drafts) +This feature introduces functionality in the form building tool to help form creators return to edit their questions more quickly when previewing the form as if they’re someone who’s filling it in. It introduces a clearer, simpler route for form creators to navigate between previewing and editing their form. + +### [Metrics for form creators](form-metrics) +This feature introduces new functionality to the form building tool to allow form creators to see how their form is performing. We’ll be starting with a minimum offering of: number of forms started, number of forms submitted, and completion rate. + +### [Live and draft](live-draft) +This feature introduces the ability to make a draft of a live form so that you can prepare changes to it. You can then make all the changes live at the same time, when appropriate. + +### [Previewing a question](previewing-a-question) +This feature introduces a clear and quick way to help form creators understand what an answer type will look like and how it’ll be formatted alongside other content they’ve added - including hint text and additional guidance. + +### [Simple routing logic (skip questions)](routing) +This feature introduces new functionality to the form building tool to help form creators create simple skip logic for questions. This means you can skip someone to a later question in a form based on their response to a question where they have to select one answer from a list. diff --git a/design/features/confirmation-email-for-form-fillers/README.md b/design/features/confirmation-email-for-form-fillers/README.md index 7037fec3..02220a84 100644 --- a/design/features/confirmation-email-for-form-fillers/README.md +++ b/design/features/confirmation-email-for-form-fillers/README.md @@ -23,7 +23,7 @@ ___ ## What -This feature introduces new functionality to the form filler's journey, allowing them to request an email confirming that they've successfully submitted a form. +This feature introduces new functionality to the form filler’s journey, allowing them to request an email confirming that they’ve successfully submitted a form. ### User stories diff --git a/design/features/detailed-guidance/README.md b/design/features/detailed-guidance/README.md index d26abfa1..a031c501 100644 --- a/design/features/detailed-guidance/README.md +++ b/design/features/detailed-guidance/README.md @@ -23,7 +23,7 @@ ___ ## What -This feature introduces new functionality to the form building tool to allow form creators to add more complex help text to a question page. This 'guidance' text will appear above the question, on the same page. +This feature introduces new functionality to the form building tool, allowing form creators to add more complex help text to a question page. This ‘guidance’ text will appear above the question, on the same page. This is considered the best way to introduce complex information when most (if not all) form fillers will need to read that information in order to complete a single question. diff --git a/design/features/early-access/README.md b/design/features/early-access/README.md index 3838ec95..1a333982 100644 --- a/design/features/early-access/README.md +++ b/design/features/early-access/README.md @@ -1,4 +1,4 @@ -# Early access journey +# ‘Early access’ journey ## Status @@ -11,7 +11,7 @@ ___ ## Contents -- [Early access journey](#early-access-journey) +- [‘Early access’ journey](#early-access-journey) - [Status](#status) - [What](#what) - [Problems we tried to solve](#problems-we-tried-to-solve) @@ -24,7 +24,7 @@ ___
## What -This journey is designed to allow people to create a trial account and request an upgrade to an editor account - so they can make live forms to be published on GOV.UK. +This journey is designed to allow people to create a trial account and request an upgrade to an editor account - so they can make live forms to be published on GOV.UK.
diff --git a/design/features/editing-drafts/README.md b/design/features/editing-drafts/README.md index 7285abe9..53bf3066 100644 --- a/design/features/editing-drafts/README.md +++ b/design/features/editing-drafts/README.md @@ -28,7 +28,7 @@ ___ ## What -This feature introduces functionality in the form building tool to help form creators return to edit their questions more quickly when previewing the form as though they're someone who's filling it in. It introduces a clearer, simpler route for form creators to navigate between previewing and editing their form. +This feature introduces functionality in the form building tool to help form creators return to edit their questions more quickly when previewing the form as if they’re someone who’s filling it in. It introduces a clearer, simpler route for form creators to navigate between previewing and editing their form.
diff --git a/design/features/feature-template.md b/design/features/feature-template.md deleted file mode 100644 index 2c01d1d2..00000000 --- a/design/features/feature-template.md +++ /dev/null @@ -1,65 +0,0 @@ -# Feature name - -## Status - -Date created: *2022-05-03* - -Date updated: *2022-05-03* - -Hypothesis/Tested/Iterated/Developed - -___ - -## Contents - -- [Feature name](#feature-name) - - [Status](#status) - - [Contents](#contents) - - [What](#what) - - [Why](#why) - - [How will we measure it](#how-will-we-measure-it) - -___ - -
- -## What - -> What are we proposing/doing? -> - description of the feature - -
- -## Why - -> Why are we doing it? -> - any hypotheses that evidence the idea -> - include user research -> - feedback -> - analytics -> - other? -> - a clear outline of where the feature has come from -> - research -> - team idea -> - business requirement -> - other - -
- -## How will we measure it - -> How will we validate this iteration/design? -> - how we will know if the feature has worked -> - does it help users? -> - does it mean form processors get better data? -> - does it mean the form creator has an easier/better experience creating/updating their form? -> - are there clear numerical outcomes we want to log against it? -> - for example 80% (or 4 out of 5) users we tested with found it easier to find and edit a mistake when previewing the form, versus the previous version - -
- -___ - -
- -[Back to the top](#feature-name) diff --git a/design/features/form-metrics/README.md b/design/features/form-metrics/README.md index ab9a5636..85c0cfce 100644 --- a/design/features/form-metrics/README.md +++ b/design/features/form-metrics/README.md @@ -23,7 +23,7 @@ ___ ## What -This feature introduces new functionality to the form building tool to allow form creators to see how their form is performing. Initially we’ll be starting with a minimum offering of: number of started forms, number of submitted forms, and completion rate. +This feature introduces new functionality to the form building tool to allow form creators to see how their form is performing. We’ll be starting with a minimum offering of: number of forms started, number of forms submitted, and completion rate. This information should cover at least a week of data collected. We’ll look to improve this offering over time and will investigate introducing filters to help form creators adapt data for their needs. diff --git a/design/features/live-draft/README.md b/design/features/live-draft/README.md index 7dac6cf9..718f32b8 100644 --- a/design/features/live-draft/README.md +++ b/design/features/live-draft/README.md @@ -1,5 +1,6 @@ ## Live and draft -The ability to make a draft of a live form to prepare changes to it. You can then make all the changes live at the same time, and at an appropriate time. + +This feature introduces the ability to make a draft of a live form so that you can prepare changes to it. You can then make all the changes live at the same time, when appropriate. ### Problems we tried to solve diff --git a/design/features/previewing-a-question/README.md b/design/features/previewing-a-question/README.md index 8a495703..6e969ad8 100644 --- a/design/features/previewing-a-question/README.md +++ b/design/features/previewing-a-question/README.md @@ -23,7 +23,7 @@ ___ ## What -This feature introduces a clear and quick way to help form creators understand what an answer type will look like and how it’ll be formatted alongside other content they have added, including hint text and additional guidance. +This feature introduces a clear and quick way to help form creators understand what an answer type will look like and how it’ll be formatted alongside other content they’ve added - including hint text and additional guidance. It is designed to be an optional journey for form creators who are unsure about what an answer type may look like, while giving them a quick idea of the overall layout as presented to form fillers. diff --git a/design/features/routing/README.md b/design/features/routing/README.md index c54eedf2..7434fbaa 100644 --- a/design/features/routing/README.md +++ b/design/features/routing/README.md @@ -24,7 +24,7 @@ ___ ## What -This feature introduces new functionality to the form building tool to help form creators create simple skip logic for questions. This means that people completing a form only need to be asked relevant questions based on a previously given answer. +This feature introduces new functionality to the form building tool to help form creators create simple skip logic for questions. This means you can skip someone to a later question in a form based on their response to a question where they have to select one answer from a list. ### User stories diff --git a/design/prototype-version-1/prototype-tested.md b/design/prototype-version-1/README.md similarity index 100% rename from design/prototype-version-1/prototype-tested.md rename to design/prototype-version-1/README.md diff --git a/design/prototype-version-2/prototype-tested.md b/design/prototype-version-2/README.md similarity index 100% rename from design/prototype-version-2/prototype-tested.md rename to design/prototype-version-2/README.md diff --git a/design/prototype-version-3/prototype-tested.md b/design/prototype-version-3/README.md similarity index 99% rename from design/prototype-version-3/prototype-tested.md rename to design/prototype-version-3/README.md index 8953bcca..43f5fc26 100644 --- a/design/prototype-version-3/prototype-tested.md +++ b/design/prototype-version-3/README.md @@ -277,4 +277,4 @@ ___
-[Back to the top](#prototype-version-3) \ No newline at end of file +[Back to the top](#prototype-version-3) diff --git a/design/prototype-version-4/prototype-tested.md b/design/prototype-version-4/README.md similarity index 99% rename from design/prototype-version-4/prototype-tested.md rename to design/prototype-version-4/README.md index 355878f9..445c1764 100644 --- a/design/prototype-version-4/prototype-tested.md +++ b/design/prototype-version-4/README.md @@ -248,4 +248,4 @@ ___
-[Back to the top](#prototype-version-4) \ No newline at end of file +[Back to the top](#prototype-version-4) diff --git a/design/prototype-version-5/prototype-tested.md b/design/prototype-version-5/README.md similarity index 99% rename from design/prototype-version-5/prototype-tested.md rename to design/prototype-version-5/README.md index 2106d89f..9bc18add 100644 --- a/design/prototype-version-5/prototype-tested.md +++ b/design/prototype-version-5/README.md @@ -237,4 +237,4 @@ ___
-[Back to the top](#prototype-version-5) \ No newline at end of file +[Back to the top](#prototype-version-5) diff --git a/design/prototype-version-6/prototype-tested.md b/design/prototype-version-6/README.md similarity index 99% rename from design/prototype-version-6/prototype-tested.md rename to design/prototype-version-6/README.md index 3f249474..a0127fb3 100644 --- a/design/prototype-version-6/prototype-tested.md +++ b/design/prototype-version-6/README.md @@ -250,4 +250,4 @@ ___
-[Back to the top](#prototype-version-6) \ No newline at end of file +[Back to the top](#prototype-version-6) diff --git a/design/prototype-version-X/page-detail/page-template.md b/design/prototype-version-X/page-detail/page-template.md deleted file mode 100644 index 3f77b62b..00000000 --- a/design/prototype-version-X/page-detail/page-template.md +++ /dev/null @@ -1,34 +0,0 @@ -# [pageName] page - -## Context - -> Give a brief overview of -> - what we wanted to test for example, user needs or design changes -> - what tasks we gave to users - - -## What we tested last time - -> List the screenshots of the previous version of the pages -> These should have alt text where appropriate -> For example -> ![alt text](../screenshots/001-forms-landing.png) -> *Description of what can be seen in the screenshot, to make it easier for screen reader users and if the images do not load. - - -### What we saw - -> 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. - - -## What we changed and why - -> List the screenshots of the new version of the pages -> These should have alt text where appropriate -> For example -> ![alt text](../screenshots/001-forms-landing.png) -> *Description of what can be seen in the screenshot, to make it easier for screen reader users and if the images do not load. - -> What changes did we decide to make in order to improve the user experience, and why do we think this will help. -> List any changes and the hypothesis behind them, or the problem they intend to solve. diff --git a/design/prototype-version-X/prototype-tested.md b/design/prototype-version-X/prototype-tested.md deleted file mode 100644 index 5be9fb4e..00000000 --- a/design/prototype-version-X/prototype-tested.md +++ /dev/null @@ -1,116 +0,0 @@ -# Prototype version X - -Dates tested: *YYYY-MM-DD to YYYY-MM-DD* - -## Status - -> Current, Proposed, Testing, Tested, Superceeded by [version Y](../prototype-version-Y) - -___ - -## Contents - -- [Prototype version X](#prototype-version-x) - - [Status](#status) - - [Contents](#contents) - - [Context](#context) - - [Admin interface screenshots](#admin-interface-screenshots) - - [Some things we changed since last time](#some-things-we-changed-since-last-time) - - [Form runner screenshots](#form-runner-screenshots) - - [What we learned](#what-we-learned) - - [Opportunities](#opportunities) - -___ - -
- -## Context - -> **Sprint X** -> Give a brief overview of -> - what we wanted to test for example, the main journey or user needs -> - what tasks we gave to users - -
-
- -## Admin interface screenshots - -Below are the screens a form creator will see when making or editing their forms. - -
- -> List the screenshots of the different pages across the journeys. -> These should have alt text where appropriate, and a link to the detailed changes we want to call out on those screenshots. -> -> For example -> ### GOV.UK Forms landing page -> -> ![alt text](screenshots/001-forms-landing.png) -> *Give the image a basic description of what can be seen in the screenshot, to make it easier for screen reader users and if the images do not load.* -> -> Follow this my any more detail that is needed to clarify what is on the screen, this will help us identify the main changes. -> -> Consider adding links to prototype screens for latest version of pages -> -> If we have more detail that we want to focus on, or a big change for example, use: -> #### What we changed from the previous version -> -> [Changes to the edit question page](page-detail/edit-question.md) -> -> Remember to create the `.md` file in the `page-detail` folder - -
-
- -## Some things we changed since last time - -> Include a basic idea of what we have down across the version -> - -> -> Include a link to the GitHub release notes like: -> For more information, see [v0.0.X release notes](https://github.com/alphagov/forms-prototypes/releases/tag/v0.0.X). - -
-
- -## Form runner screenshots - -Below are the screens the form filler (the end user) would see as they complete the form. - -
- -> List the screenshots of the different pages across the journeys. -> These should have alt text where appropriate, and a link to the detailed changes we want to call out on those screenshots. -> -> For example -> ### Preview question 1 -> -> ![alt text](screenshots/101-Preview-question-1.png) -> *Give the image a basic description of what can be seen in the screenshot, to make it easier for screen reader users and if the images do not load.* -> -> Follow this my any more detail that is needed to clarify what is on the screen, this will help us identify the main changes. -> -> Consider adding links to prototype screens for latest version of pages - -
- -___ - -
- -## 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. - -
- -## 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). - -
- -[Back to the top](#prototype-version-X) \ No newline at end of file