Foundation.mozilla.org: Design UI for revised projects page

[sabrinang]

Our network projects page is really similar to pulse and with the first rounds of feedback we should reconsider its purpose, alignment and value to the user that is different than what pulse can already offer.

Concern: It's so similar that it can cause confusion. At a glance, these pages are very similar but different visually that people may not know why. The main differences between these pages is that we have a paragraph to introduce projects but our page lacks richer interactive features such as “search”, “add” and variation on filter tags. It is confusing why they are framed as the same thing (example: “see more”) but curated differently (variation in featured content, variation in tags etc.).

• Recommendation: Let the network project page give context and inform why these projects matter. Let pulse handle all the interactive discovery with it's features. Overall, we can be more cohesive with the narrative and framing of content on both.

Concern: It's really long and information dense that people may not take the time to read past 3 projects to grasp meaning of this page to understand that it represents a rich variety of topics, its collaborators and the diversity of project engagement. People may feel overwhelmed before they can understand what it means to feel like they can belong.

• Recommendation: It may add more value to approach the page explaining why projects matter instead of showing the what they are without more context or broader topics/issues. (Pulse already displays projects, we shouldn't repeat this). If we choose to feature projects, we should be more direct to explain why they were chosen in the first place, why we think they matter to internet health and why it is important to contribute. (Why are our featured projects list different than pulse in the first place? Why do we have more?)

---

Overall, I think it is more valuable to approach this page by treating it like an interstitial/context page that onboards people to be prepared for the diverse, complex and collaborative nature of network projects while providing information to help them understand why it is important to the internet health movement.

• an opportunity to show featured projects no more than 3 (and links to more on pulse)
• an opportunity to introduce people to broader buckets (example: IoT, Web Literacy tags) first before seeing the granular projects so we can provide a more meaningful and less overwhelming narrative so they feel prepared to explore Pulse and understand where they can belong (can link to tagged views on pulse)
  
  
  
  • an opportunity to give context to groups of projects by surfacing and exemplifying topics (example: Science, Women and Web Lit themes) that exist on the network
  
  
• an opportunity to showcase the range of engagement (example: by low to high commitment or by particular skill) and incentives to collaborate (it may be nice to feature a example of a successful collaboration that our network help facilitate)

/cc @taisdesouzalessa

[sabrinang]

NOTES

• Top description: "Our network gathers their projects and activities in Pulse. Here are highlights and topics to explore further."
• Feature area: 3 features cards from Pulse but make the top featured items look more connected to priorities area to give context faster
• Options on how projects are displayed: Show link to search entry in pulse and/or show full card to go directly to the card (view in pulse)
• Buckets to feature: Privacy & Security, MozFest, Open Innovation, Games / Additional issues to feature if needed: Web Literacy or Digital Inclusion
• Button: discover more on pulse

[sabrinang]

some ideas on surfacing the topic buckets with project thumbnails:

[sabrinang]

@xmatthewx Can project cards from pulse be shortened to thumbnail, title and author/date? or do you have a preference to keep individual project descriptions?

[xmatthewx]

@sabrinang – we can include/remove any content piece. I do like how Pulse gives you a teaser and then fades out, but we don't have to do that if you think it's too busy.

[xmatthewx]

Options above are looking good. I'll discuss with @KevZawacki tomorrow.

[xmatthewx]

@sabrinang – I think I like Copy 3, the one on the left. The one on the right is also nice, but the descriptions under headings get less emphasis.

Descriptions – We will need a short sentence from @KevZawacki for each Issue/Topic. Feel free to suggest something other than games. I thought IoT, but we just don't have enough tagged with that yet.

Link – For the UI, instead of "see more" let's try "Explore this topic -->" ... I think that will make the leap to Pulse less jarring.

Thumbnail – We can clip images to the same ratio as on Pulse: 1200x630px.

Item content – As I said above, we can include/remove any content piece. I do like how Pulse gives you a teaser and then fades out.

Button – Let's keep "Discover more and Collaborate" on the button. I might have suggested we revise that the other day.

[KevZawacki]

@xmatthewx @sabrinang

Thoughts on this Issue/Topic description copy?

Privacy & Security. Tools, tips, apps and more for staying safe online.

MozFest. Keynotes, teaching kits and other creations from the Network's annual Internet Health festival.

Open Innovation. Code and ideas for a more innovative web. All open source.

Games. Building a healthy Internet isn't just about white papers. These games teach privacy best-practices, HTML, CSS and other digital skills.

[xmatthewx]

big thumbs up to this copy @KevZawacki

[sabrinang]

invision draft updated here: https://projects.invisionapp.com/d/main#/console/10016110/224221945/preview

[sabrinang]

Alternative layout on invision here: https://projects.invisionapp.com/d/main#/console/10016110/224231064/preview

For this layout, I felt the placement for the "explore this topic" a bit unresolved after the title or sentence (esp. when there are multiple lines) so I left it out for now but we can consider linking the title/tag itself. This version also includes a preview of some project text.

[sabrinang]

@xmatthewx @taisdesouzalessa Any feedback on the heading styles? (Left has faint grey dividers, Right has slanted divider with heading)

[xmatthewx]

Looking good.

Headers – I think I prefer the lighter option on the left, because the black/slant divider on the right gives too much weight to these topics, topics that are temporary not permanent fixtures.

Pulse – Let's consider a 5th section titled "More Projects" with the text "Discover much more in Mozilla Pulse. Collaborate with the network on these projects or something new." Instead of two projects, this section would have the button from below. Maybe it's a card with Pulse line icon?

Explore link – Instead of "Explore this topic" can we name the topic in the link? "Explore Privacy and Security" is better for SEO and users.

Implementation – For implementation, we'll tell engineers that each section will pull in things marks as featured=true with the related tag or issue.

[sabrinang]

I didn't make the more projects description its own section since the information is not a topic of projects and I treated it similarly to other (as themes description on support page) description hierarchy.

[xmatthewx]

Good call. This is a better direction.

Can we include light gray line above? Can we align all the way left? Can button move up to same level as the copy? Share the line?

[sabrinang]

I included a grey line above and left aligned. The flow doesn't feel as strong as the previous but alignment issues are avoided.

[xmatthewx]

This looks great. I think it's ready to implement. @hannahkane @KevZawacki – can you check the comp right above this comment?

• Do you agree that this is a much improved projects page?
• Do you like the Discover more piece toward bottom?
• Any nitpicks before we hand over for implementation?

[xmatthewx]

@alanmoo – I think the last comp in this thread is ready for a technical review.

Each section will pull in things marks as featured with the related tag or issue. For example /featured=true&tag=games

[KevZawacki]

@xmatthewx Great improvement on an already-great page. No nits from me!

[hannahkane]

Looks good to me, too.

[xmatthewx]

Great. Design added to invision. Closing this. Filed a ticket for engineers to review, ask questions, and estimate work.