Mobile Screens | Form Screens

[fongcindy]

Description

We will need to capture the redesign work for the mobile screens. This ticket captures the form application screens section, this is what we currently see on mobile:

Related: #1837

User Story

No response

Acceptance Criteria

No response

[ErnestoFernandezAlvarez]

Note! Thank you! @fongcindy

[ErnestoFernandezAlvarez]

Next steps will be to:

• design these around the new margins
• apply type scale
• lay them them out on wireframes to check they are accurate and the space is utilized well

I also realized that the error messages screens look a bit too cluttered on mobile as well, those will need a design as well :)

[ErnestoFernandezAlvarez]

Hello @fongcindy Adding screenshot for tracking purposes. Currently waiting to confirm radio button sizing for mobile in order to adjust this from screen.

[ErnestoFernandezAlvarez]

@fongcindy Uploading my progress for the mobile screen design. Here is the figma file as well :)

[ErnestoFernandezAlvarez]

[fongcindy]

@erniedeeb @Ndoyle118 Note: Ernesto removed the 'open all' button from mobile because the client didn't want it and also based on the analytics report that showed users not clicking on it. The main reason is to un clutter the screen and save on scrolling space for mobile Also, the back links have been removed from the form (client routing #1831)

[ErnestoFernandezAlvarez]

@fongcindy thanks for adding the notes Cindy! Once I have feedback from Maria, I will add a recap here as well. @erniedeeb please feel free to leave any comments on the Figma file as well. Thank you!

[fongcindy]

Maria has reviewed and approved the mobile screen designs, @scottqueen-bixal, we are ready to hand this off to you

@EnriqueOrt-GSA for viz

[ErnestoFernandezAlvarez]

hello @EnriqueOrt-GSA @scottqueen-bixal I'm closing this ticket as completed. Please let me know if you have any questions about the design https://www.figma.com/design/3qui91uX0iE4YMNrnx4gzK/ReDesign-Benefit-Finder?node-id=16-2035&t=g0ViwelzRI7gUwxV-1