Redesign Directory using search/filter plugin

[cjyabraham]

Redesign the Speaker's Bureau directory to use the search/filter plugin to fulfill the following requirements:

• make the profiles more compact so more can be displayed on one page; show only City, Country, Certification badges, and Areas of Expertise to the right of the picture and make every speaker box the same size
• Use the following fields for search filters: Certifications, Area of Expertise, Country, Self-Identification

Steps:

• [x] Diego: Design new directory page which works within the constraints of the search/filter plugin
• [x] Implement using the search/filter plugin

[cjyabraham]

@dankohn would like to imitate the geography feature we use for Events We'll Be At (country and city nested).

[dankohn]

@deigolocco Can we please get a new design mockup showing a much denser layout?

[deigolocco]

sure @dankohn

[pablodelarocha]

@dankohn and @cjyabraham here's a design for this page according to your requests: (we can have more than just 9 per page... up to you on how many rolls should each page have) Let us know your thoughts about it.

[KimMcMahon]

@pablodelarocha Can you update the design?

We do not want the social profiles. Instead, if they have any certifications, we want that in the social profile place. They can up to 3 certifications: CKA, CKAD, or Ambassador.

Please use the logo for each of the certifications. Can you do some mockups with all 3 certifications for some people and 1 and 2 certifications for others?

[pablodelarocha]

@KimMcMahon here's a suggestion of design as requested. Since the space to add the badges is very small and you can't read the badge's content, as you can see in the first tile, i've designed tooltip that would appear when you hover the mouse over the badge, showing the name of the certificate. Let us know what you think of that!

[dankohn]

Please also add a ✈️ emoji if they're willing to travel and a 🖥 if they're willing to videoconference. And can we eliminate area of expertise and do first few lines of their bio instead. Area of expertise and language spoken seem better to get via the faceted search than have them displayed.

[dankohn]

If you make the emoji the same size as the badges, I think we're basically there.

[pablodelarocha]

@dankohn ok! Something like this?

[dankohn]

LGTM

[cjyabraham]

Looks good. Can you show a mobile view? @pablodelarocha

[pablodelarocha]

@cjyabraham i'm sending attached a couple of options:

1 simulates the exact same behavior as desktop, but instead of hovering with the mouse you have to touch the badge with your finger to read the tooltip

or

2 in case you don't find the tooltip very intuitive, we're suggesting this option with all badges with their description already open

Please, let us know if any of these suggestions works for you.

[dankohn]

I think #1 is OK. I'm not expecting most people to pick their speakers from their phone. Also, if we use SVG images, you can zoom in by pinching to see the logo better.

[deigolocco]

can we start the development?

[KimMcMahon]

@diego. Yes please work on development

[deigolocco]

sure @KimMcMahon , thanks

[deigolocco]

guys we are working in the frontend and during the integration with search/filter plugin we realized the plugin doesn't work for users, but only for CPTs. @cjyabraham should we keep the Ultimate Member's filtering or implemente it manually as we did for webinars?

[cjyabraham]

Hmm. Ok. I'm fine with you implementing your filters manually then.

[deigolocco]

ok @cjyabraham , thanks.

[KimMcMahon]

@deigolocco Status? When will I have something to test? Thanks!

[deigolocco]

@KimMcMahon we're planning to finish until next Monday.

This filtering has some challenges like:

• There's no taxonomies to filter, the filters will work with user_metas
• Some user_metas are serialized arrays, so this make the filtering harder and affect the performance
• we can not reuse the Ultimate Member's filters

We're working to have the filters like search/filter plugin. With counters, interacting with each other, ajax filtering and with acceptable performance.

[KimMcMahon]

@deigolocco Thank you. Can we split this task into two? Update the profiles on the web page?

Then, work on the filtering?

[deigolocco]

sure @KimMcMahon, we can finish the frontend tomorrow and continue the filtering in parallel

[deigolocco]

@KimMcMahon the profiles up to date https://fz-57-cncf.pantheonsite.io/speakers/

[dankohn]

That shows 9 on a page. I think it should be more like 27.

In the dropdown menus, can you please make the lists single spaced.

[KimMcMahon]

@deigolocco Looks great!

Two things: 1) @deigolocco On the mobile version, can you add an arrow or something to move from page to page?

2) @dankohn When the page is narrow, the boxes do not line up with the exact same height. Do you want this fixed?

[deigolocco]

@dankohn is adjusted

@KimMcMahon 1 - We don't have control for this pagination, it comes from Ultimate Member's plugin. I did a few tests but the plugin hide the arrows navigation because it doesn't fit at screen

We can reduce the size, but not the number of itens. Reducing the size will became mobile unfriendly. But for the new filtering we'll be in control, so the pagination will be as in the rest of the website.

2 - We normalized the heights and centralized

[deigolocco]

guys the filtering + paginations is fully working https://fz-57-f-cncf.pantheonsite.io/speakers/

But we don't know which badge should be associated to certification KCSP

[cjyabraham]

A few comments:

1. can you show 27 per page instead of 9 (unless @dankohn has changed his mind on this)
2. when you open the filter drop-down, it looks different than the drop-downs on webinars. Can you make them consistent?
3. also on webinars you use the filter placeholders "All companies", "All projects", etc. Can we do the same pattern for speakers: "All certifications", "All areas of expertise"...?
4. when you choose "Brazil", the Certifications dropdown disappears. I wonder whether it would work better to just grey-out the dropdown to indicate that there are no longer any filter options available?
5. is it possible to do a hierarchical list of countries, like we do on case studies. Actually, I assume that the Speaker's Bureau doesn't have the data to support this. Right?
6. Can you change "Speaker’s filtering:" to "Speakers Filtering:" to be consistent with how you do it on Webinars and Events?

[dankohn]

KCSP is for companies, not individuals, so doesn't apply. The badge should just be CKA, CKAD, both, or neither.

[cjyabraham]

As discussed in #cncf-wordpress-dev, please remove the "Willing to Present via Video Conference" icons from the profile cards. This field is being removed since we can assume that pretty much everyone would be willing to do this.

Also "Willing to Travel" is being removed but "Travel Range" will remain in place. Perhaps we can use the airplane icon when the person has "Travel Range" of Domestic or International but not Local. So it would work like this:

• "Local": no airplane icon on profile card
• "Domestic": white airplane with tooltip "Willing to travel domestically"
• "International": blue airplane with tooltip "Willing to travel internationally"

@dankohn @KimMcMahon any thoughts?

[dankohn]

Maybe train for domestic and airplane for international?

Dan Kohn dan@linuxfoundation.org +1-415-233-1000 Executive Director, Cloud Native Computing Foundation cncf.io https://www.cncf.io/ dankohn.com https://www.dankohn.com/ or book on my calendar: dankohn.com/c https://www.dankohn.com/c

On Thu, Sep 26, 2019 at 10:35 AM Chris Abraham notifications@github.com wrote:

As discussed in #cncf-wordpress-dev, please remove the "Willing to Present via Video Conference" icons from the profile cards. This field is being removed since we can assume that pretty much everyone would be willing to do this.

Also "Willing to Travel" is being removed but "Travel Range" will remain in place. Perhaps we can use the airplane icon when the person has "Travel Range" of Domestic or International but not Local. So it would work like this:

• "Local": no airplane icon on profile card
• "Domestic": white airplane with tooltip "Willing to travel domestically"
• "International": blue airplane with tooltip "Willing to travel internationally"

@dankohn https://github.com/dankohn @KimMcMahon https://github.com/KimMcMahon any thoughts?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cncf/wordpress-site/issues/57?email_source=notifications&email_token=AAXQYBQABCHZDYTZRR4L57TQLTCCPA5CNFSM4IO4EBXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7VZIJI#issuecomment-535532581, or mute the thread https://github.com/notifications/unsubscribe-auth/AAXQYBSB3VUQNOKJPXVGVQ3QLTCCPANCNFSM4IO4EBXA .

[deigolocco]

implemented the train for domestic and airplane for international @dankohn

adjusted @cjyabraham , except item 5 as we discussed on slack https://fz-57-f-cncf.pantheonsite.io/speakers/

[cjyabraham]

Looking good.

1. Can we hide the self-identification filter for now until we have data for it. It looks odd showing up but always greyed-out.
2. If you go to the page, pick "Cloud Platforms" and then pick "Ambassador", and then re-open the certifications drop-down, you'll correctly get this with all options in the drop-down:

If you, however, directly go to that link, it only has "Ambassador" in the drop-down.

Can this be fixed so that it always shows all options?

[deigolocco]

ajusted @cjyabraham

[cjyabraham]

@deigolocco 1 seems to be fixed but 2 is still a problem

[KimMcMahon]

@cjyabraham @deigolocco Can someone help me understand what is needed to get the new design deployed on https://www.cncf.io/speakers/?

[cjyabraham]

@KimMcMahon once we are done QA, we can deploy. Does everything look ok to you?

[deigolocco]

@cjyabraham item 2 looks like fine for me. If you pick "Cloud Platforms" and then pick "Ambassador", then refresh the page, all options still there.

Please let me know what is not working for you.

[deigolocco]

[KimMcMahon]

Can we deploy with the icons? Filtering still needs some work.

For example, we don’t have the option from the mobile version to search by name.

[deigolocco]

@KimMcMahon we followed @cjyabraham instructions:

• Use the following fields for search filters: Certifications, Area of Expertise, Country, Self-Identification Search by name is not included at the design approved by you

Self-Identification filter was hidden because we don't have data yet. I believe this issue is completed, if new fields are required we should create a new issue.

[cjyabraham]

@cjyabraham item 2 looks like fine for me. If you pick "Cloud Platforms" and then pick "Ambassador", then refresh the page, all options still there.

Please let me know what is not working for you.

@deigolocco what you say is true. However, if you pick them in the opposite order, first pick "Ambassador" and then "Cloud Platforms", you'll see this:

You can also just go to this link.

[cjyabraham]

@KimMcMahon we're almost there with the filtering and then we will deploy all together. It's not possible to release just the icons at this point.

If you're now wanting to search by name we need to consider how that can be integrated in to the design. Can you open a new issue for that?

[KimMcMahon]

@cjyabraham @deigolocco Everything looks good to me. I was testing the filtering on my mobile and desktop and saw no issues.

Can we deploy?

For the other fields - I will open a new issue, as you both suggested.

Thanks!

[deigolocco]

@KimMcMahon I believe we're ready to deploy

@cjyabraham adjusted according our last call

[KimMcMahon]

Super - thanks! After @cjyabraham deploys, I'll do Q&A tomorrow. Thanks!

[cjyabraham]

@deigolocco there's a render issue on mobile view. Go here and you'll see that the first speaker doesn't have any certification badges. They have actually floated off to the side. See:

It seems to only affect that one person.

I know @KimMcMahon is wanting to get this live so I've deployed the branch but will leave this issue open until this is fixed.

[cjyabraham]

Could you also make the airplane icon more in line with the other icons? So move up a little bit:

[deigolocco]

both adjusted @cjyabraham