UX for submitting a quote

[wholesomedev]

We need to create the UX for submitting a quote.

User flows

Contributing a quote

How will users contribute quotes? Here's one proposed flow:

1. On the NP page, we'll use the Material UI Speed Dial to show the user the action to add a quote
2. We'll check user logged-in state:
   1. If user is logged-in: go to step 3
   2. If user is not logged-in: trigger "Prompt to log-in flow" (see below)
3. Display a modal with a form for submitting the quote* showing the following fields:
   • Quote content
   • Link to source
   • Should we show anything else? Like the time at which the quote was made? I'm thinking let's not do that for now so that we reduce friction
4. User fills out form and submits it
   1. If submission succeeds, we show a Snackbar for feedback and display the quote on the page
   2. If submission fails, we show an error

Prompt to log-in flow

How do we prompt the user to log-in when they attempt to take an authorized action? Should we simply show a dialog that says "Please log-in first!"?

Possibly needed wireframes

• Form for quote submission
• A page with one or more quotes
• A page with 0 quotes (I think for this one we should use the existing page, i.e. if there are no quotes, we show nothing.)

@forabi please feel free to add anything that I've missed.

---

* @forabi I know we talked about allowing editing inline. But now that I think about it, I feel that a modal with a form will be easier to implement and maintain. Let me know what you think.

[milmantech]

Hey @wholesomedev ,

Do you want it to be on the front end? I mean anyone can load a public page and then see this button to call out the modal that allows adding a new quote, but if they're not logged in then they'll have to enter the site or register to add a quote. Please correct me if I wrong.

[wholesomedev]

Yes, you’re correct. This feature is user-facing, not moderator-only.

[milmantech]

Hey Guys,

Here is the 1st iteration:
https://www.dropbox.com/s/8s81aizx63nqsae/add-quote-flow-v0.1.pdf?dl=0

I've included views for how the button acts. There can more actions in the future. Also included how the Add Quote screen will look like when you just open it and right after you put any content there and ready to submit it. You can find that there is a case with login when the user is not authorized and a screen with a success message after the quote is added.

Let me know if you have any questions and if you want to proceed with this.

[wholesomedev]

Thank you @maxsnitser. This looks great. I'll let you know when we're ready to pick this up!