design Contact Form

[anitadesigns]

Overview

In collaboration with a UX writer, design a "Contact Us" page that includes a Contact form. Discuss and brainstorm with a UX Writer on the information the contact form should include

Action Items

• design Contact form
• Share with Design team for feedback
• Assign a Design lead and add ready for design lead label
• Prepare design hand off of all wireframes with a new icon for Dev
  • Add new design on code Contact Form #1213
  • Remove dependency label
  • add ready for dev lead label
  • move to new Issues column on project board

Resources/ Notes

• If new illustrations are used, please add to Collect a list of the external assets used #1029
• Main Issue: MAIN: Create a Contact Form  #1209

[github-actions]

Hey @eruan8888! Thanks for taking this issue.

To help keep everyone in the loop, please comment your Estimated Time to Completion (ETC) below!

Thanks again!

[eruan8888]

there was already a contact form in the 'contact form' page on figma. updated the headers and footers. we're reaching out to content for confirmation of what we want on there and if they have the bandwidth to work on this

[eruan8888]

finished editing the design. will loop in Sam to get her input

[eruan8888]

Sam said she'd loop in Yaz. I made a mobile prototype for the contact page, organized all the components and elements of the designs into auto-layouts, and replaced some design elements with pre-existing assets so as to ensure cohesiveness with the rest of the website.

[TechWriterMelissa]

Content is meeting this week, and we'll check in with Yaz. If she's not available, we'll assign someone to help with this.

[TechWriterMelissa]

@eruan8888 here is some placeholder copy to use on the Contact page. The content suggestion would be to have a main heading with body text. If this is too much copy, please let us know and we can revise. Content and design will also do some research on placeholder text for form fields and accessibility best practices.

https://docs.google.com/document/d/1cde3EthUc1sgVdtFSPKK-SZPTSPl2IqcxQTkuiOb9PE/edit?usp=sharing

Please check in with @anitadesigns and @jyehllow for further details.

[eruan8888]

Implemented the changes, also tagged you @TechWriterMelissa for some questions

[anitadesigns]

@eruan8888 Talking to @TechWriterMelissa regarding the layout of the Contact Form and the placeholder text, the Contact form page will need to be fixed to reflect the same layout of the other static pages on the website (e.g. About Us and FAQ). This means including a hero banner.

Melissa worked on some copy which you can find in Figma that you can use. Test out the flow of the content using the copy Melissa created and let her know if the copy needs to be adjusted.

I created a new heading in the figma workspace to document iterations and added a note so folks understand our thought process as we iterate. Please use this same documentation system for future issues. Thanks!!

[eruan8888]

I redesigned the contact form page so that it has the same hero banner as the FAQ and About pages. I made iterations showing what the screen looks when someone submits a contact form and when they neglect to fill in the answers appropriately for both the desktop and mobile versions. For the "thank you" screens (that pop up once the user submits the contact form), I believe we'll need to ask content about whether the text is appropriate or not.

[TechWriterMelissa]

The thank you screen could be a pop-up, but there might also be some other interesting design solutions to explore. Content team will discuss on our call tonight and supply some feedback.

[eruan8888]

Took out the pop up and replaced it with another design. Took out the "Please" from the error messages.