Add CTI to Organization Database Modal

[chalimar]

Overview

Please design a form modal to add an organization to the CTI for L, M, and S screen breakpoints using the provided wireframe, design system and best practices to creating a form.

Form Modal - Adding an Organization to the CTI

• LG Screen
• MD Screen
• SM Screen

Resources/Instructions
Modal Wireframe & Annotations
CTI Style Guide
Form Best Practices

[meismith]

I haven't been able to do this issues. I will update that in the next deadline meeting

[meismith]

I am not sure this is my issue. I made an iteration for this, but i am not sure for the S, M, and L. Need to have discussion with @chalimar

[mariastudnicka]

@meismith Please, make a modal overlay over "Tag Generator Page"

1. Remove ZIP code field
2. Make City and State a text field
3. Make Country a drop down
4. Change to "Organization Email" from "Your Email"
5. Create a "success state" modal..."Thanks you're in the Index," lorem ipsum

@giosce Could you please advise post submit behavior.

[meismith]

I removed the zip code and re organized the modal

I tried to put the modal on top of the organization page, the modal is longer than the page itself.

[Olivia-Chiong]

@meismith Tag generator page flow is complete. We can start working on this again. Please let me know if you are available or if we should assign this to someone else.

[meismith]

@Olivia-Chiong , I am still working on the search page. I haven't had time to work on this issue

[meismith]

These are the look of the add organization if we make it a new page instead of modal

or we can go back to modal version?

[chalimar]

Hey @meismith , @samdelros will help assist with Form Confirmation screen and placeholder labels inside text input fields.

[samdelros]

Updated with revised Modal, Desktop, Med screens

[chalimar]

Thank you @samdelros! This looks good, just a few changes before we finalize this:

• Darken the placeholder labels.
• Ensure the Parent Organization dropdown form is the same one used in the Tag Generator.
• Create tooltip and provide error message for required forms.
• Verify breadcrumbs.

Questions and comments:

• For breadcrumbs, should we list it as Home / Add Your Organization rather than Home / Join the Index / Tag Generator / Add your Organization since we will not include it in the site map or navigation.
• What are Github tags and what should the tooltip say when the user hovers over them?
• Do we need to add Stepper / Form progress bar to other pages now such as the Tag Generator?

[chalimar]

It looks like we need to still update form layout now that we have clarification on what Github Tags meant. Product and UX has decided to remove the tooltip and add explanation & example under the form label.

Explanation:
This is the Github tag that your organization uses such as “code-for-america”, “open-oakland” or "hack4la".

[samdelros]

I'd love feedback from CTI UX UI team on options for github tags

• Do we need the option for inputting multiple organization tags
• Does the helper text and sample tags seem confusing? (trying to follow taggging UI patterns)

[samdelros]

Form error has been added to required inputs, (all on the 1st part of the form, second part is all optional)

[samdelros]

Thank you @samdelros! This looks good, just a few changes before we finalize this:

• Darken the placeholder labels.
• Ensure the Parent Organization dropdown form is the same one used in the Tag Generator.
• Create tooltip and provide error message for required forms.
• Verify breadcrumbs.

Questions and comments:

• For breadcrumbs, should we list it as Home / Add Your Organization rather than Home / Join the Index / Tag Generator / Add your Organization since we will not include it in the site map or navigation.
• What are Github tags and what should the tooltip say when the user hovers over them?
• Do we need to add Stepper / Form progress bar to other pages now such as the Tag Generator?

Awaiting feedback for the following -

• Bread crumbs.

• Need confirmation/clarification from Chali on what is the correct drop-down form to use.

[samdelros]

Last thing I'm waiting on is feedback on the dropdown form design (A and B) from Chali, just to make sure the parent organization form is the same as the one used in the tag generator.

[samdelros]

Re: Github Tags

Followed up with @chalimar and looks like we decided on 1 entry for github tags, so we will treat the same as form fields.

• Waiting on feedback for dropdown design. (See previous comment image) - @chalimar will track down arrow and I will update.
• MD and SM components are off - Are these under construction? it has changed on all pages.

[DrIffathsultana]

@chalimar Please review and provide your feedback

[mariastudnicka]

@chalimar is signing off on the original version that Max has already built. Post MVP, we'd like to optimize the UI/UX.

[giosce]

@mariastudnicka, @chalimar is this completed?

[mariastudnicka]

We'll assign Joyce and or/Ken to add instructional text to forms, add asterisks and "Mandatory" label on first page of form. Add Country pull down.

[chalimar]

The newest development with this issue can be viewed at issue #630