[UX/FE] 10-10EZR V2 Flow: Review the new List & Loop patters for use in V2 flow

[alexseelig]

As a team member, I would like to understand what of the new list & loop patterns we can use so we can spend less time on custom development and more time on improving the flow of the EZR.

• [x] Review List&Loop Figma mockups, Developer's Read Me, Mock Form
• [x] Meeting with the forms team (Jeana and Robert)
• [x] Gather findings, develop visual aid to present to team
• [x] Present findings to the team, including pros and cons and how it impacts the team.
• [x] Success: We have an understanding of what of the list & loop we can use for V2 flow, and where we can use it, and what will need to be custom-developed/based on our existing patterns.

[IMHieuVo]

The Multi Response List & Loop (Array Builder Pattern) functions very similar to how we currently use it in the Dependent and Insurance info section of our forms. This pattern can be deployed to our NOK/EC work with minimal changes. The save-in-progress logic and error message are included as well.

This pattern is for similar items utilizing the same array, not different arrays (Address vs email/phone). If we want to include the mailing address, home address, and email/phone; it would have to be a custom page utilizing some of the array builder components.

• There are two use cases; one is completely optional (like adding Dependent) and the other is required (like needing to list at least one treatment). The required flow would kick the user back to filling another dataset if this is no card present in the summary/review page.

• If it is required information, the modal would note that the user can delete it but they will be taken back to the List&Loop’s first page to fill in another dataset.

• There is save-in-progress functionality. When the user is editing, the page intentionally excludes the “save progress” function in hopes of nudging the user to complete the flow. If the user exits the form and comes back, they’ll see an error alert within the card indicating they have to finish filling out the information.

• The EDIT pages will have “Edit [h3 page]” label.

• Boilerplate content/descriptions are suggestions and can be completely changed. The card can be viewed within the form’s Review page’s accordion pattern. If the edit button is selected, the user will be taken to the array pages and then taken back to the form’s Review page (instead of the List&Loops’ review/summary page).

• ---

• The card can be extended to show whatever additional data we like but there may be an issue with screen reader text if we apply JSX.

• The question (Do you want to add to another [dependent]?) can be changed because the back and continue buttons can be directed to where we want.

• The pattern is ideally used for similar items in an array (multiple dependents, multiple insurance) because it is dynamically generated.

  • Most of our cases follow under this umbrella (NOK, EC, Dependent, Insurance).
  • Since the Contract Information involves two sets of different but static arrays, it is fundamentally different and the list&loop pattern would not work in this case. It would be more custom and Robert suggests creating two custom pages and we could potentially utilize some of the new components. Jeana suggests approaching this with the Address Block component since it has an element of pre-fill.