Adjust and standardize "Share Your Wins" form page

[kristine-eudey]

Dependency

• Until we get the research drive and wiki cleaned up we don't know if the research happened or not.
• We need to determine if users prefer a single page form or they prefer the progressive version.

Overview

We need to adjust and standardize the Share Your Wins form pages (not connected to the site yet) so that they have more even spacing and match the design system

Action Items

Design

• Review the flow of the Share Your Wins form pages (enter placeholder text and continually click ‘next’ to view all pages- but don’t submit)
• Design improved and standardized replicas of the desktop and mobile versions of the Share Your Wins page- in the Wins Figma file
  • Start by duplicating the ‘Google form’ frame in the pink rectangle in the Figma file, and go from there
  • Make sure all text sizes follow the Design System typescale (for ex, in desktop 35px font should be 36px, and then 28px in mobile)
  • Make sure the to add more spacing above and below text where they are too crowded
  • Use standard button components from the Design System instead of the current white square buttons

Development

• Develop the design adjustments in the Share Your Wins
  Including:
  • Spacing/margin adjustments
  • Replacing buttons with reusable button components from the design system
  • Make sure there is no more white strip on the bottom of the page below the footer (it’s only on this page)

Resources/Instructions

Share Your Wins form page (not connected to the site yet)
Wins Figma design
Design System in Figma

[anonymousanemone]

1. Starting to work on copy of form, need to familiarize with the form and it's parts
2. I don't see the square button in the Figma? (when I go on the website, I see it, but I'm not sure where I should put that in in Figma)
3. 5 hours
4. By next Sunday

[anonymousanemone]

1. Standardized fonts and colors according to design system
2. None
3. 5 hrs
4. Wednesday

[anonymousanemone]

Complete and Ready for Review

[Aveline-art]

@anonymousanemone If this is ready for review, this does not belong in the UAT column. This needs to be in in questions/review.

[ExperimentsInHonesty]

@anonymousanemone Where on the figma page is your work?

[anonymousanemone]

In the Wins page section @ExperimentsInHonesty

[ExperimentsInHonesty]

@anonymousanemone Yes, but where? the page is huge

[anonymousanemone]

@ExperimentsInHonesty I boxed it with an orange rectangle

[ExperimentsInHonesty]

@anonymousanemone Thank you for your work. This issue will be released to development.

[plang-psm]

Availability: 6hrs
ETA: 10/3/22

[ExperimentsInHonesty]

@vaisali89 we need to know if any of the previous research proved that people prefer a single page form or they prefer the progressive version of the wins form. I could not find any info in here about that in research presentation https://docs.google.com/presentation/d/1RU80s0ep8azGb7V3IUQ3N-8dDmzQH7oV1nn8q_peTUY/edit#slide=id.p

but I didn't dive into the rest of the docs on here https://github.com/hackforla/website/wiki/Research-9-:-Wins-Page-Research

[roslynwythe]

• As a result of Security Audit of WINS form on static site #4588 it was determined that the WINS custom form is not secure and so related issues including this one will be closed as not planned.