Add and edit copy and leader cards in Communities of Practice page

[daniellex0]

Overview

We need to add and edit some copy and leader cards on the Community of Practice page to make sure the information is all up-to-date before it goes live

Action Items

• Review the Figma design of the Communities of Practice page (final design in pink rectangle) and follow the instructions below to make sure the website version has the same information as the Figma
• Change the name of the Programming Community of Practice to Engineering
• Make sure the Engineering card moves up for the right alphabetical order (below Data Science)
• Make sure the copy on the website version of the Engineering card is the same as the Figma version (change the paragraph text, meeting times, Seeking to Mentor led, remove 'How to get started', etc)
• Add Greg Pawin as Lead of the Engineering Community of Practice
• Add Olivia Chiong and Niven Prasad cards as co-leads of the Product Management Community of Practice
• Make sure the copy on the website version of the UI/UX card is the same as the Figma version (change the paragraph text, meeting times, etc)
• Edit spelling of UI/UX leader card- should be Danielle Nedivi (not Nevidi)

Resources/Instructions

Communities of Practice Figma file (final design in pink rectangle)
Communities of Practice page

[averdin2]

You can see my changes for the Engineering card and it's placement in the screenshot below.

I also wanted to note that the Leadership card in the Engineering card is centered rather than left aligned in the Figma design document. Not sure if we want it to be exactly like the Figma document or if it is fine as is?

[averdin2]

You can see my changes adding leadership for the Project/Product Management card in the screenshot below.

I wanted to note here that the description in the Figma design document for the Project Management card seems to be inconsistent with wording for the other descriptions. What I mean is that the other descriptions start with, "This group ___", but the Figma design document says something different. I'll put a screenshot of the Figma doc's description so you can see.

My question is, should the old description be left as is? I have left it as for now which you can see in my screenshot.

Another question I had is, are we getting rid of meeting time indicating every/every other week (see screenshots)?

My updates:

Figma Design Doc's Description:

[daniellex0]

I also wanted to note that the Leadership card in the Engineering card is centered rather than left aligned in the Figma design document. Not sure if we want it to be exactly like the Figma document or if it is fine as is?

Good catch, can the leadership card please be left-aligned? Thanks!

I wanted to note here that the description in the Figma design document for the Project Management card seems to be inconsistent with wording for the other descriptions. What I mean is that the other descriptions start with, "This group ___", but the Figma design document says something different. I'll put a screenshot of the Figma doc's description so you can see.

My question is, should the old description be left as is? I have left it as for now which you can see in my screenshot.

Thank you for noticing all of these details- again great catch.. I think it's okay that the description is a little different because it is a little too repetitive that they all start exactly the same (we might change the copy in the others in the near future because they are all a little too repetitive). But this one does start a little awkwardly- can you please change the first sentence to this?

"PM’s from different projects come together in this group to share effective practices, give and get mentorship, set product management standards and create guides and templates for new projects."

Another question I had is, are we getting rid of meeting time indicating every/every other week (see screenshots)?

So glad you caught all of these inconsistencies, thank you! Yes, I believe we are removing the "every week/every other week' parentheses parts from all of them because they are all every week as far as I'm aware and according to the Events page schedule. I updated this on the Figma mobile version now as well.

Let me know if anything else comes up!

[averdin2]

@daniellex0 Ok, so I have a few questions about the design and implementation of the website.

• First, here is the change I made to the design that has a single leader card aligned to the left:

Screenshot

• My main issue is that I don't know what the webpage should look like in the tablet viewport range (768px - 960px), and also in this weird large mobile device/small tablet range (481px - 767px)? The webpage seems to be a little inconsistent with how it behaves in these ranges, and there are no designs in the document for the tablet size. I'll add screenshots below and explain some of the inconsistencies I mean.

Screenshots

• From 768px - 914px. The leader cards align vertically, but the overall card design has not yet been aligned vertically. I actually think this looks pretty good for a regular sized tablet view (768px - 960px), but maybe this size range should just behave like mobile.

• From 550px - 767px. This is where I think the behavior of the page is not as good as it could be. The leader cards are not yet aligned vertically, and in my opinion they look bad because they lack white space between each other (see red circle on screenshot). I'm thinking that this range from 481px - 767px should probably just look like the mobile view (with leader cards aligned vertically), but I'm not sure what the design team wants.

[csseu]

Hey Alex, I'm glad that you picked this one up. I was looking at the .md files yesterday (while making a template on the wiki) - would you please delete the recruiting-message from the cards that don't have "status: Seeking"? I realized that I left some in by mistake. Although they aren't shown on the website, they're probably confusing.

Also, if you think it makes sense, you might change the Liquid code so that it shows that message only if status: Seeking AND recruiting-message (exists). (Currently it only checks the status.)

Thanks!

[averdin2]

I made updates to recruiting messages and their display behavior as per @ruqpyL2's comment.

[daniellex0]

I'm thinking that this range from 481px - 767px should probably just look like the mobile view (with leader cards aligned vertically), but I'm not sure what the design team wants.

@averdin2 Sorry about the delay Alex- yes agreed, for both sizes you mention above I think it's fine for the cards to be center-aligned and stacked!

[averdin2]

@akibrhast I am working on the communities of practice page and was merging some changes and ran into some conflicts. I had no problem resolving the conflicts, but changes made in this pull request: #1371, is causing some issues that I wanted to run by you. The previous build of the website before this change has the communities of practice cards ordered alphabetically starting with data-science. The current build of the website seems to have flipped the alphabetical order of the cards. I am completely making changes to programming.yml, making it now engineering.yml. When looking at the changes, the order of the cards seems to not make any sense to me now. Any idea how to fix this, and do we really need to worry about the order of the cards? I'll add a screen shot below of what my build of the cards looks like:

Card Order