Foundation.mozilla.org: Mockups - UI Design

[taisdesouzalessa]

UI Design of Fellowship Pages.

### REMINDER: Once the feedback rounds are done, post final comps in #956

[taisdesouzalessa]

Overview Page, Specific Fellowship Page and Support Page are ready for feedback.

@kristinashu could you please take a look at them and let me know if they are according to the UI alignment work you've been doing?
@sabrinang @xmatthewx please add your thoughts as well.

[kristinashu]

Looking good @taisdesouzalessa! I've left some comments in InVision.

[taisdesouzalessa]

Here are the pages above (with tweaks) plus new pages. Now the prototype is clickable:

If applications are open: https://invis.io/ZJ9YTAGEA#/273312987_FellowshipsUI_-_Overview
If applications are closed: https://invis.io/ZJ9YTAGEA#/273603676_FellowshipsUI_-_Overview_V2_Applications_Closed

@xmatthewx that are still some moving pieces and I was wondering if you could help me or point me in the direction of who could help me with this list:

• UI of "application page" and "thank you page" are blocked until we figure out how Fluxx can be integrated with this page
• Definition about who will be the Fellow that will be featured in the Overview Page (hero section)
• Overview of general content of the page so the icons can be designed to follow the content and pictures can be chosen to accompany copy. Also, if we have new pictures of Fellows working together, that would be great - we have a ticket filed in [MozillaFoundation/Design] to collect that (issue 247), otherwise we can go with image bank/existing pictures for MVP.

Next step: UI of mobile screens.

cc: @kristinashu @sabrinang there are new screens for feedback. Thank you so much for your previous feedback :)

[xmatthewx]

@taisdesouzalessa - hopefully you got some answers from today's kickoff.

...figure out how Fluxx can be integrated...

@alanmoo or another engineer is best able to unblock you, but assume it'll be an iframe with a scrollbar and styles you can't change. design around it.

...Fellow that will be featured...

Amy and Jesse can best help you figure out who should be featured. We should probably queue up 2-3 options to switch in later in the year.

...Overview of general content...

Again, you'll have to look to Jesse and Amy on content. For images, there will hopefully be a photographer at the work week later this month. So, choose the best you've got for now, ask Amy if there's more. Make a list of what you'd like to see from photographer, share with Jesse and Amy, but don't let that be a blocker.

These probably aren't the answers you hoped for... hit me up on slack if you need some other assistance.

[xmatthewx]

@taisdesouzalessa - did you get confirmation that we want Host info on the Overview page?

[taisdesouzalessa]

did you get confirmation that we want Host info on the Overview page?

@xmatthewx not yet. I'll ping Amy on Slack once I see her online.
UPDATE: talked to Amy, we will move the logos of host orgs to internal pages (only Open Web Program has Host Orgs).

Thanks for answering the other questions, Matthew! I'll tag people in the document, with my questions...it may be the best place to reach them out.

[taisdesouzalessa]

Mobile version - work in progress: https://invis.io/ZJ9YTAGEA#/274348479_MOBILE_-_FellowshipsUI_-_Overview

[taisdesouzalessa]

In a meeting with Amy, Melissa and Alan last week, it was decided we would add a section for the Senior Fellows in the site. I updated the UI screens to reflect that:

• Home page of the mini-site: please note there is a placeholder copy for Senior Fellows after the 4 areas.
• Directory page: Senior Fellows were added to the bottom of the page - I chose a different visual treatment for Senior Fellows because they are a special category, so I wanted to distinguish them from the others.
• Directory page - Senior Fellows page: once user clicks on the button of the previous page, they can see all Senior Fellows in one page (including Senior Fellows from previous years, if they exist).

@alanmoo @community-impact -> please take a look at those screens and let me know if you think they meet the goals we had and if there is any potential issue so we can modify them accordingly.

cc: @mmmavis - looping you in the discussion :)

[xmatthewx]

I added a couple of comments in invision. @taisdesouzalessa - it might be good to check in with @mmmavis about what parts of design are done and what parts are still in flux.

[taisdesouzalessa]

Hey team, thanks for the feedback so far. Here are the updated mockups with latest feedback pieces applied:

UI DESKTOP - clickable prototype

• UI Applications Open
• UI Applications Closed

UI MOBILE - clickable prototype

• UI Applications Open
• UI Application Closed

[taisdesouzalessa]

@xmatthewx @jessevondoom @alanmoo as per feedback received in the meeting of Jan30th, here are the comps with the changes applied.

UI Applications Open - v2
UI Applications Closed - v2

I have some user flow concerns with this new solution (with the fellowship areas in text links instead of more prominent links) and they are highlighted in this diagram:
https://invis.io/ZJ9YTAGEA#/276700119_User-Journey-Issue

Please take a look and let me know your thoughts. Once we have an agreement I'll send those modified comps to Mavis to build them.

[xmatthewx]

@taisdesouzalessa - Let's approach the concern a bit differently.

.../apply

First, I feel strongly that all apply buttons and nav should go to a .../apply page. That page is ideally CMS editable so that it can be updated and optimized before during and after each application period. Given multiple types, that will be almost monthly.

This page will orient users and hold their hand before they hit a button jump over to fluxx. Applying for a fellowship is like applying for college, not like signing up for a newsletter. People will arrive prepared and expect to spend more than a few minutes on it.

fluxx

You have a question at the top of your diagram. Let's answer that before everyone jumps into understanding the user flows.

Question: Is there a strong advantage for fellowship team to a single fluxx application that includes 4 type options, rather than 4 separate fluxx applications? (e.g. easier to maintain and manage.) Let's ask Amy.

• If not, let's advocate for 4 applications. Link to each separately from .../apply
• If yes, it'll be fine. Applying for a fellowship is like applying for college. People spend lots of time preparing before they jump in. People will understand the difference between media and science before they begin. If not, honestly, they aren't the right person for the fellowship.

---

Does this makes sense? Let's you and I discuss over slack if you still have concerns.

[jessevondoom]

I'd like to take @xmatthewx's comments a bit further with a yes-and. First, we absolutely want/need the /apply page before the applications. We can do context-setting there about the focus areas we're currently accepting applications for. I also prefer four buttons to four separate applications but don't feel super strongly about this one — I just know that each type will have different fields and I'm not sure if Fluxx can handle that without extreme pain-in-the-ass engineering.

More importantly, though: I'd actually argue that adding the /apply page gives us a filter that we WANT in the process. Yes it will slow down the user flow which is usually a bad thing. But in this case we have a very limited amount of fellowships that we want to give to dedicated, thorough, and committed applicants. The type of person who will thrive as a fellow should be comfortable with the extra step, and would likely appreciate the additional context.

The /apply page could explain in more depth the mechanisms of the fellowship as well as the focus areas. That also makes it ideal to serve as a "learn more" page of some sort when applications are closed, so it could just as easily house an email capture form.

Yeah?

[taisdesouzalessa]

Thanks for your feedback here, Matthew and Jesse. It added lots of clarity and context to me. Here is the new version, please take a look and let me know your thoughts.

I have a Slides doc highlighting the main changes of this cycle and the assumptions we have for the page "Apply to Be a Fellow". Please take a look at it here.

UI Applications Open - v2
UI Applications Closed - v2

cc: @mmmavis I am adding you so you know where we are in terms of changes and can follow the discussion as it evolves. Once we have the comps locked out, I'll let you know.

[taisdesouzalessa]

Status: assets created and refined after a feedback round (thanks @sabrinang and @xmatthewx) - all icons/illustrations are placed in the comp now. Links are above (I kept the same link but updated the file).
Next step: finish to replace placeholder pictures and export svgs to Mavis.

[taisdesouzalessa]

Assets being tracked here: #1057
The work on the UI (structure) of this project is on hold until we have updated content info. Meanwhile I am working on the assets issue to make sure all the placeholders are gone.

[taisdesouzalessa]

Closing this ticket - tracking status on UI here: #956. Feel free to reopen if you think this ticket is still necessary.