Foundation.mozilla.org: Finalize design for Pulse integration

[xmatthewx]

Pulse items will appear on the home and project page of the new network site.

• Home will likely just display a few featured items with link below to project page.
• Project page will ideally include 2 dozen featured items below a few featured tags to orient a visitor and allow them to filter (e.g. Privacy, IoT, Fellows).
• Project page should also include a prominent button with something like "See all the great stuff at pulse.mozilla.org"
• For both, "opening" an item should probably link to the item on Pulse, so we don't need to re-implement all of that. Maybe not idea UX, but likely MVP. We can discuss.

Let's discuss @sabrinang @taisdesouzalessa and then check in with Kristina when she returns.

[xmatthewx]

@kristinashu – I'd love to steal of minute of your time this week to discuss how Pulse shows up on the new site.

[kristinashu]

Sure, let me know how I can help!

[kristinashu]

Few thoughts from out chat:

• you could limit the home page to just 3 posts to better distinguish it from the dedicated page
• "Read more" could link directly to the project, rather than to Pulse and then the project (would need to update Read More text to something else).

Otherwise, looks great!

[gvn]

@xmatthewx Design is done, correct?

[xmatthewx]

Design _within_ project cards will likely change a bit. I need to share a list for iteration. I believe that design _outside_ the cards is 95% there and ready for implementation. @taisdesouzalessa is that true?

[taisdesouzalessa]

@xmatthewx @gvn This page relies a lot in the cards that it will contain - the outside is mainly the top nav, the hero section (which is approved - we may change colours), the CTA and the footer. So the structure seems ok to implement but we will have to rethink it if the project cards change a lot.

Here is the current state of the page for reference:

https://invis.io/ZJ9YTAGEA#/217251312_Projects-Join-Us-Iteration

[gvn]

@mmmavis Can you confirm that the Pulse API will enable us to build the component as designed above? For example, are categories included in the data structure?

[mmmavis]

(@alanmoo correct me if I'm wrong) @gvn I think the categories mentioned about are called "tags" in Pulse db. Here's the link to API doc: https://network-pulse-api-production.herokuapp.com/entries/

e.g., https://network-pulse-api-production.herokuapp.com/entries/?format=json&tag=mozfest will get you a list of entries that has mozfest as tag

[alanmoo]

That's correct @mmmavis- at least I think what's being referred to here is the tags. @xmatthewx can you clarify?

[gvn]

What is the difference between tags and issues ?

[alanmoo]

Issues map to the immutable 5 key internet health issues (decentralization, open innovation, etc.). Tags can be any string, defined when creating an entry.

[xmatthewx]

Idea on the Network site:

Context - We list a few keywords that users can tap (see below). Even before tapped, these help give some context to stuff visitor sees below. These can be hardcoded on site for now. Updated every couple of months to match editorial calendar. While we could manage these via a CMS in the future, it's unlikely these would ever be fetched via Pulse API, since it's really curation for the site.

Action - Tapping a keyword could refresh view on the page. MVP, they could just send people to that URL on Pulse.

Details - I'd love it if we could use both ?tag= and ?issue=. Users here don't need to know the difference. All in comp would fetch ?featured=True.

Make sense? Any concerns?

[mmmavis]

@xmatthewx

Details - I'd love it if we could use both ?tag= and ?issue=. Users here don't need to know the difference. All in comp would fetch ?featured=True.

So say clicking on MOZFEST will show a combined list of entries that have mozfest in tag PLUS entries that have mozfest as issue? Or did you mean showing entries that has mozfest as both tag and issue? Also, are we only showing featured entries here? (feel like we need a venn diagram here 😂 )

[alanmoo]

There's no MozFest issue, only these 5. You can filter by both issue and tag though, like https://network-pulse-api-production.herokuapp.com/entries/?tag=trolling&issue=Online%20Privacy%20%26%20Security

[xmatthewx]

I'm confident the API is ready to do what we need on this site. It will be simpler than the Pulse frontend.

For now, each would juts be a simple query. No need for diagrams 😄. Privacy(?issue=privacy...), All(?featured=True), Mozfest(?tag=mozfest).

We don't have enough stuff yet. In the future, I could see doing things IoT AND Privacy; Privacy AND Featured. So, it's great to know we could to that.

[mmmavis]

Should we consider changing the "All" label on UI to "Featured" or something else? Since "All" here is really all featured projects, not all projects in Pulse db, nor a combined list of that appear in the "privacy", "mozfest", and "internet of things" lists.

[xmatthewx]

Should we consider changing the "All" label on UI to "Featured"

Yes. Good catch.

[xmatthewx]

@taisdesouzalessa and I will discuss design inside the cards based on Kristina's feedback. We'll also examine any small screen concerns.

[gvn]

So, are we filtering on issues @xmatthewx ?

That'd mean the filters would be:

"All"
"Web Literacy"
"Online Privacy & Security"
"Digital Inclusion"
"Decentralization"
"Open Innovation"

[xmatthewx]

We don't currently plan to show all the issues at once. We're focused on Privacy and Security this year. We can swap in others if/when Editorial calendar shifts.

For launch let's use the labels in the comp, changing All to Featured.

• Featured : ?featured=True
• Privacy : ?issue=online-privacy-and-security
• MozFest : ?tag=mozfest
• Internet of Things : ?search=iot

Once this is up, Kevin and I can test the mix of results and submit a pull request if we need to adjust.

[xmatthewx]

For @taisdesouzalessa to iterate comp:

• Homepage should show 3 items. They should be from Kevin's list. Focus on Network rather than Mozilla things.
• Project page should show 24 items from Kevin's list
• Tags are working. See and Collaborate link is working. We do need to resolve mobile layout for these.
• Invision should have refined copy for join form at bottom of page from Matthew
• Let's rephrase the link to "Discover more and collaborate -->". Maybe repeat at bottom before CTA.
• We will show full cards on Project page so users can tap link to view or to collaborate without intermediate steps.
• We won't change homepage yet.
• Change "ALL" tag to "Featured"

[taisdesouzalessa]

• One more item here: individual cards may have a discreet link to Pulse (link symbol) -> I'll investigate how it looks like once I finish the comp.

[taisdesouzalessa]

Here is the mockup:
https://invis.io/ZJ9YTAGEA#/217251312_Projects-Join-Us-Iteration

I added some notes in InVision with some questions.

[taisdesouzalessa]

@xmatthewx I added a comment you your InVision feedback (feedback number 8) and proposed a new iteration based on that: https://invis.io/ZJ9YTAGEA#/221066473_Projects-Join-Us-Iteration-V2

Let me know your thoughts on it.

@sabrinang the new proposal is aligned with the discussion we had this morning, feel free to add details there if you think something is missing.

[gvn]

From conversation in standup today I gathered that Pulse/Projects is being redesigned so I'm marking this blocked.

[taisdesouzalessa]

Add link "discover more and collaborate"

[gvn]

@taisdesouzalessa I'm putting this back on you to design the links/buttons.

[taisdesouzalessa]

Hey team, while adding the button for this page I had a few questions I think are worth it to highlight in this thread:

1. The default state "Featured" will display the same cards as we have in Pulse or from Kevin's list?

1. The staging version has the text link "read more" (per card) and it takes the user straight to the pages. Above in this thread we had an iteration showing full cards and a "visit" button. For what I understood in our latest call we are going with the iteration on staging, correct? Please correct me if I am wrong.

2. Are we adding 24 cards on the page? Or are we going for a reduced amount of cards and encourage users to see more in Pulse?

3. Are we using the filters on the top [Featured, Privacy, Mozfest, Internet of Things]

@xmatthewx @hannahkane @gvn @sabrinang - please let me know what you think and if I missed something :)

[taisdesouzalessa]

Here are my suggestions to those questions:

1. _Suggestion: If pulling content from Kevin's list we should change the label "Featured" because it is the same label we have in Pulse, which may be confusing for users. Maybe "Network curated" or something more clear._

2. _Suggestion:if we are going with the staging version I would suggest change the label "Read more" and replace it with "visit" (since users will jump right into the websites from that link). Or if keep the "read more" we should take the user to the specific Pulse card with more info._

3. _Suggestion: Maybe we should have only 9 cards to make this page less long? I am not sure on this one...depends on the goal we want to achieve with this page_

Curious to hear your thoughts on it.

[mmmavis]

@taisdesouzalessa

Suggestion: Maybe we should have only 9 cards to make this page less long? I am not sure on this one...depends on the goal we want to achieve with this page.

FYI, on Pulse, each row has 3 project cards on larger devices, 2 cards on medium sized devices, and 1 on small devices. So choosing a number that's divisible by both 3 and 2 (so yea, 6 basically) can help display rows evenly across different screen sizes.

[hannahkane]

Decisions for MVP per stand-up:

• Featured items will be determined by Kevin, in Pulse
• Change the link copy to "Visit"
• Yes, 24 cards
• Let's include links to the topics at the top (note: these won't work as filters). Let's include a visual indicator to the user that they'll be leaving the Network site.
• Discover more and collaborate link as in comp

[taisdesouzalessa]

Now that we have external links indicating the filters, the component takes more space. So if I add the text link on top ("discover more and collaborate") it looks a bit disconnected:

I was wondering if we need this link on top now that the tags will take the users to Pulse ("Privacy & Security, Mozfest" and so on). I would add a button at the end again to go to pulse (before the footer).

Another alternative would be something like that, with the link embedded in the hero section:

Thoughts on that, @xmatthewx @hannahkane?

[taisdesouzalessa]

@alanmoo I am still discussing the placing of the text link for this page with Hannah and Matthew (which means mockup is not final yet). I was wondering how much it costs (in terms of time) to add a black line on top of each card and also a random texture in case the post doesn't have an image (example: NetPosi and Tabula projects). See mockup here: https://invis.io/ZJ9YTAGEA#/222629002_Projects-Staging.

[hannahkane]

@taisdesouzalessa - curious what @xmatthewx thinks but I like your idea of moving the "Discover more" link to the bottom. I don't love the idea of embedding it in the hero, because I don't think the user will understand fully at that point what we mean by "project."

[xmatthewx]

Okey dokes. I recommend:

• Revise header statement: Open-source apps. Web literacy curriculum. Guides for fostering gender equality (online?). Network members collaborate on these projects for a healthy internet. (no link)
• Display only 9 projects.
• Finish with a big fat button labeled: Discover more & collaborate

[taisdesouzalessa]

Following Matthew's recommendations, here is the latest mockup of this page:

https://invis.io/ZJ9YTAGEA#/217251312_Projects-Join-Us-Iteration

[hannahkane]

I think this looks great. I think we made the right decisions.

[taisdesouzalessa]

I have some questions about this page, related to the filters on top of the page and the links they take the user to:

1. "Privacy & security" - https://www.mozillapulse.org/issues/online-privacy-and-security
   QUESTION: should we change the label on the network site to "Online Privacy and Security" to keep it consistent? I would like to :).

2. "Mozfest" - https://www.mozillapulse.org/search?keyword=mozfest

3. "Internet of things" - https://www.mozillapulse.org/search?keyword=iot

Are 2 and 3 links correct? Just flagging here to make sure we got this covered.

@xmatthewx @hannahkane @gvn

[hannahkane]

Hmm...I think maybe I'd rather we change it on Pulse, since we use "Privacy and Security" in a lot of places (including the Internet Health Report), without the "Online". I realize that including "Online" adds context, but I think the rest of the site content should do that pretty well.

Links 2 and 3 seem correct to me.

[taisdesouzalessa]

@KevZawacki I was talking to Matthew about the links for the tags on this page and he mentioned that Internet of things and IOT may not return the results we would like to display when we search for it. We were wondering if you could suggest a search term for this page.

cc: @xmatthewx @hannahkane

[KevZawacki]

@taisdesouzalessa Perhaps we swap out IoT for another key issue? "Web Literacy" or "Open Innovation"?

[taisdesouzalessa]

New mockup, with the tag "Open Innovation" instead of IoT:
https://invis.io/ZJ9YTAGEA#/217251312_Projects-Join-Us-Iteration

"Privacy & security" - https://www.mozillapulse.org/issues/online-privacy-and-security

"Mozfest" - https://www.mozillapulse.org/search?keyword=mozfest

"Open Innovation" - https://www.mozillapulse.org/issues/open-innovation

[taisdesouzalessa]

Discussion pending - new version will be posted here after decision.

[xmatthewx]

To clarify ... discussion is about which projects to feature, which doesn't impact our engineers at all.

If there are remaining tasks for implementation, let's file as a new ticket. This issue has gotten so long.

[taisdesouzalessa]

Closing this issue and keeping the discussion on #181