MozillaFoundation / foundation.mozilla.org

Mozilla Foundation website
https://foundation.mozilla.org
Mozilla Public License 2.0
388 stars 152 forks source link

Wireframe of "Apply for Fellowship" page #964

Closed taisdesouzalessa closed 6 years ago

taisdesouzalessa commented 6 years ago

This issue is a place to discuss how the integration between site and Fluxx will happen from the user interface perspective.

@auremoser and @alanmoo for what I understood, it seems the solution we have for now is to have a button on the site that links to Fluxx, correct?

I short, from the user journey perspective, would we have scenario 1 or 2?

image

Also, would you happen to have any screenshot of past forms built there? I am trying to visualize the user journey from the site to Fluxx so any info or visuals you may have helps me...I am not familiar with Fluxx.

alanmoo commented 6 years ago

My guess is there would be some degree of content as in comp 1 ("Ready to apply? Applications are these dates:") or something like that. I don't know if there's a separate radio needed for each application. But really all of this is speculative; I think @auremoser can give us an answer?

auremoser commented 6 years ago

I believe we can consolidate to one link to fluxx, and then in fluxx we can triage the application to two different workflows. Kalpana is checking on this now, we'll get back to you as soon as we can.

taisdesouzalessa commented 6 years ago

Thanks for your reply here, Aurelia and Alan! I'll put this page's wireframe on hold until we have some answers ok? Then once we have it, I can do the UI straight. It is simple enough :).

taisdesouzalessa commented 6 years ago

Here is the flow we have in place for now. As you can see, we have 2 cases:

fluxx-flow

Let me know if I am missing anything. We can always change the UI/flow as needed.

auremoser commented 6 years ago

Looks good to me! And I'm fine with this workflow.

One question: do all of the secondary nav items (Overview, Fellows Directory, Support the Fellows, Apply to be a Fellow) link to separate pages? Or is it possible to have them just anchor to different headings further down the page?

I'm just wondering if we need that second page "Applications are closed for 2017" or if we can just auto-scroll them to the grey box at the bottom that says the same thing and invites them to signup for updates. This would also work for when applications are open, and which point they'd scroll to anchor point and click to get access to the fluxx site?

taisdesouzalessa commented 6 years ago

Hey @auremoser they are currently on separate pages. The reason why is that we have lots of content and if we make it all on one page to scroll, it can be overwhelming, especially in mobile. So my recommendation is to keep them on different pages if our plan is to keep this amount of content. Let me know if this is an issue ok?

You can see the current prototype here (it is clickable): https://invis.io/ZJ9YTAGEA#/273312987_FellowshipsUI_-_Overview - the content and the structure can change as you need. Feel free to add feedback there as you see fit.

About the "Applications are closed", we could do as you suggested instead of having the "Applications closed" pages. Also, we could auto-scroll for applications open as you recommended - do you see any technical issue with this approach @alanmoo?

alanmoo commented 6 years ago

My only minor concern is that scrolling to content like that near the bottom of the page sometimes results in not getting that item to the top of the viewport, as there's not enough content below for it to reach the top.

auremoser commented 6 years ago

Totally understood, and makes sense. Let's keep the current workflow then.

taisdesouzalessa commented 6 years ago

I think we discussed what had to be discussed here. Closing this issue. Feel free to reopen it if necessary :).

auremoser commented 6 years ago

I'm re-opening this issue, because of the link update I suggested here #1134 . Amy, Kalpana, and I discussed the possibility of having a landing page on our site that links to the fluxx application, something like the "applications are closed" mockup above, but just an intermediary landing page where we could add some context like what we provide here in our Landing page content doc.

The reasons for this are motivated in part by the generic nature of the URL which directs them to fluxx. We need them to register via the normal fluxx registration page (which makes no reference to the fellowship application, then they will be invited to complete the fellowship application over email, at which point they'll have access to the landing page content linked above. Because we need them to register generically, there's no way to provide that context (that is, the landing page description) until they register, and we're concerned that users/applicants might get confused unless we provide the landing page content on our site first.

Is it possible to build an intermediary page that follows this workflow: "Apply to Be a fellow:" button--> Intermediary Page on Foundation site: with landing page content --> Application: Fluxx application

taisdesouzalessa commented 6 years ago

Hey @auremoser thanks for the context here. I agree with the need os providing context to users before they jump to Fluxx. In my understanding, we already have this Intermediary Page in place. It is just a matter of updating the copy with the new one you provided in the doc. Correct?

Just to make sure we are in the same page, here is how I see this (diagram below). Please let me know if my assumptions are correct? Thanks!

image
auremoser commented 6 years ago

That looks great, @taisdesouzalessa , I think we may have edits to that copy next week, Rizwan is supposed to confirm a few things with exec. I should know more then, but this setup looks excellent, thank you!

taisdesouzalessa commented 6 years ago

Cool! Closing this issue then, since we have the structure defined now in this diagram. The new mockup of the Intermediary page will be tracked here: #1134

Feel free to reopen this issue if you feel it is necessary, @auremoser.