Foundation.mozilla.org: Design fellowships landing page wireframes

[taisdesouzalessa]

After talk with Amy and Jesse about the user journey and goals of the site, it is time to do the wireframes.

cc: @jessevondoom here is the ticket to discuss this stage.

[taisdesouzalessa]

Here are the wireframes, after a round of feedback:

The starting point is the "Fellowships" CTA from a screenshot of the current site:
https://invis.io/6ZEIKY3TW#/264499111_Mozilla-Foundation-Get-Involved_-2-

If applications are closed, here is what the users will see:
https://invis.io/EYEIL16GV#/264498726_It-3-Overview_-_Applications_Closed

@jessevondoom please take a look at it and let me know if you need anything else. The next step would be to get some placeholder copy. Also, I can start working on the mobile version of the wireframe.

@alanmoo I would like to walk you through those to make sure the technical aspects of this proposal are ok. Take a look at the prototype when you can and ping me so we can chat.

cc: @xmatthewx

[taisdesouzalessa]

Worked on the main mobile interactions through wireframes. The goal of the mobile prototype is to test the usability and also surface potential implementation challenges. I will also present them to Alan when we discuss the technical aspects of the proposal.

https://invis.io/DXEJDK937#/264737497_It-3-MOBILE_-_Overview

IMPORTANT: you'll notice the wireframes are not 100% complete. This is intentional since some parts are pretty straightforward to build on mobile.

[taisdesouzalessa]

As per meeting with Jesse and Amy, I made a video to walk the team through the wireframes so they can watch it at their own time and be ready for discussion on the meeting we have scheduled for Dec:
https://taisdesouzalessa.github.io/fellowship-pages/

[taisdesouzalessa]

For this project, we received feedback from many sources: via meetings, Google Docs and InVision. It is exciting the amount of good insights we are having from stakeholders and I thought it would be useful to group the received feedback by theme so we all look at one place, making sure all pieces of feedback are considered. Also I find this visualization make things more actionable. Let me know if this is useful or if you have any other approach that may be better.

https://docs.google.com/a/mozilla.com/spreadsheets/d/1Od_7NGNIaU5T6PKZf2IP9g8tEA9H3g9i2iK3pGAXZWo/edit?usp=sharing

@alanmoo @xmatthewx @jessevondoom in this spreadsheet you will see comments that relates to strategy, technical implementation and intersection with Pulse. This is the reason why I am tagging you here :).

[xmatthewx]

@taisdesouzalessa @jessevondoom - are the wireframes good and ready for a first build, or do we need to iterate a bit before we hand over to engineering?

[taisdesouzalessa]

I think we have to iterate a bit based on last feedback received.

The biggest issues I see, from the design standpoint, are related to "Audience" and "Unified Application Process" from this spreadsheet.: I will iterate on it on the next couple of days and show it to you and Jesse for feedback.

There are other 3 themes in that feedback sheet ("Strategy", "Technical Decisions" and "IA and Navigation") as well. - @jessevondoom could you take a look at the feedback received from "Strategy" and "Technical Decisions"? You, @xmatthewx and I could meet anytime to discuss how design can support the decisions there. I am not sure on how Fluxx will be implemented so I may need some guidance in order to visualize the possibilities of visual integration with the site.

[xmatthewx]

Thanks @taisdesouzalessa. Focus on things that will block/unblock engineering (which it sounds like you are doing). Content can evolve whenever.

[taisdesouzalessa]

Here is the iteration covering the themes 1-3 of the feedback spreadsheet and minor ones that were left in InVision:
https://invis.io/UQF78CYKM#/271941410_It-4-Overview

I also added the new user flow to our Google Slides doc (slides 9-11):
https://docs.google.com/presentation/d/1vhCo8W6TAss4tc1Whs0E9pzJKdXFUHjkEbXNOGMcohw/edit?usp=sharing

@xmatthewx @jessevondoom @alanmoo please take a look and add feedback there - we can also schedule a meeting if you prefer a walkthrough highlighting the main changes made. Just let me know.

[xmatthewx]

I walked through this with @taisdesouzalessa. Looks great. I think we can start building and designing UI.

A question and one change request:

• remove Types from nav. Users can access via overview and other links throughout content.
• do we want host orgs on main page, or under specific fellowship type? Might be confusing for fellows pursuing a type that is host-less.

@taisdesouzalessa - I think you can make that one change and then share this with Amy with the question.

[taisdesouzalessa]

Here is the latest iteration:

Video walkthrough (so Amy can quickly view what changed): https://drive.google.com/open?id=19g4_CdGyj5vBNqiTk3gealezblAukQUQ
Application Open: https://invis.io/UQF78CYKM#/271941410_It-4-Overview
Application Closed: https://invis.io/DQF7R82UA#/272095070_It-4-Overview_Applications_Closed

Not sure which is the best way to share with Amy...I tagged her in the Google Doc document.

[xmatthewx]

Site requirements are in this doc.

[taisdesouzalessa]

Closing since we are now in UI stage. Feel free to reopen if necessary.

[taisdesouzalessa]

Latest wireframes:
Applications Open: https://invis.io/ZJ9YTAGEA#/272860086_It-5-Overview
Applications Closed: https://invis.io/ZJ9YTAGEA#/272860085_It-5-Overview_Applications_Closed

Important: the structure of some wireframes are being slightly changed during the UI process due to feedback and brand alignment. So the translation from wires to comp is not a 100% match.