Figma cleanup

[vykster]

Sarah and India to review figma, think about design patterns and reorganize and rename components for a clean slate before our next design push.

[srhhnry]

• Clean up screens and ensure they are all current
• Rename individual screens to ensure they are current
• Rename pages for clarity
• Create archive
• Create section for new design system screens
• Translate XXL container designers to XL screens
• Create additional small, medium, large screens as needed
• Look up Figma plugins for one that maps distances to help with translation to dev
• Account for Captcha on various screens (14px from bottom, button is 60x60 and 60x256 on hover)

[srhhnry]

@machikoyasuda Just started playing around with the Measure plugin on Figma and it's starting to make sense. I could see starting to do annotations based on those measurements as well. We should chat about what measurements are the most useful.

Edit: You can check px measurement between elements! The UI is a bit confusing but I was able to take measurements between elements in a way that seemed helpful

[srhhnry]

@machikoyasuda I added recaptcha to the mobile screens and while the behavior isn't great, I don't think it's a huge problem for now. With the addition of the stacked footer, at 14px from the bottom the recaptcha doesn't block the action button, which I think is the most important thing here. Added screens to show. Important question---does this also appear on desktop, and if so, where on the screen?

[machikoyasuda]

@srhhnry Captcha shows up on the pages with forms: The Enrollment page.

(This is a screenshot from production, so it does not reflect the redesigned page)

[srhhnry]

Okay, did some digging, and have we explored hiding the badge? Found this on google's site:

Hiding the badge is definitely preferable, since its only purpose seems to be to alert users that there is spam protection. I don't think we need that with our users and I can see the badge being very disruptive (especially on mobile).

[srhhnry]

Alternatively, does the badge float 14px above the device viewing area? Or is it attached to the bottom of whatever content is loaded on the page? On mobile we can have users scroll for the footer, which would push the badge down away from the action buttons, if its anchored to content. If the badge floats and is always on screen, I think we might want to go with the hidden option if possible. (If not possible then I'll dig a bit more into either pushing it up or switching it to the left side.)

[machikoyasuda]

Okay, did some digging, and have we explored hiding the badge? Found this on google's site:

Hiding the badge is definitely preferable, since its only purpose seems to be to alert users that there is spam protection. I don't think we need that with our users and I can see the badge being very disruptive (especially on mobile).

This is great! I had no idea. This seems preferable. We would have to add text to the form pages.

[srhhnry]

Yup! The extra text is the tradeoff. I'll mock it up, but I think it'll be okay.

[thekaveman]

+ we need this text translated, but I'm fine with this direction!

I might suggest "This form is protected..." instead of "This site is protected..." to be more accurate? Not sure it matters.

[srhhnry]

Yeah, I think that makes sense. It's a deviation from the Google request, but I don't think that matters too much.