[Fellowships Mini Site] Add filters to Directory Page

[taisdesouzalessa]

Issue:

Now that we have the MVP of our Directory Page it is time to add filters as per wireframes:

[taisdesouzalessa]

Here are the comps and Filter behaviors. I have 2 options for that:

OPTION 1:
Gif Files - I made some Gif because they are easy to walkthrough:
Gif (adding filters - DESKTOP)
Gif (deleting filter - DESKTOP)
Gif (MOBILE)
InVision File (interactive prototype):
Desktop
Mobile

OPTION 2:
Gif Files
Gif (DESKTOP)
Gif (MOBILE)

InVision File (interactive prototype):
Desktop
Mobile

@alanmoo @xmatthewx @mmmavis - please take a look and give your feedback. I'll also request feedback from other designers as well.

[xmatthewx]

Thanks @taisdesouzalessa. I'd like to team up on this, sort through the ux and technical challenges. Let's find some time to whiteboard together.

[sabrinang]

@taisdesouzalessa
I think Opt 2 was more obvious multiple filters could be made and it may be more commonly experienced (like on shopping sites etc.) I think for Opt 1 it wasn’t immediately obvious multiple could be chosen and I was wondering what would appear in the dropbox itself when 2+ filters are selected? The gifs are great 👍

[taisdesouzalessa]

adding @natalieworth's feedback from Slack:

I think if stakeholders need only the 1 filter option, then I'd prefer the 1st option with the deselect. Feels more modern and easier to switch between single filter selections. If more category selections are necessary/ possible though I think the 2nd would work better since it's easier to clear multiple filters.

[kristinashu]

I like the simplicity of Option 1. Option 2 feels like it would be better if there were lots of possible items to filter by, but seems overkill for us. I also like how both options show the number of results next to the name.

For comparison, it would be nice to see a non-dropdown version of filtering. Because there are two fields, dropdowns might be our only option here but if we can avoid them then we should.

[beccaklam]

@kristinashu nice article!
@taisdesouzalessa I agree with the feedback given so far that option 1 is good if the user can only select one filter at a time and option 2 is good if we can select multiple. I also agree with Kristina that it would be good to explore another input form besides dropdown menu (i.e. one that shows all the filter options straight away -- just to see what that would be like, not saying that's the solution).

[taisdesouzalessa]

Yay! Thank you so much for all this great feedback, friends :). @kristinashu nice article! Bookmarking it.

[mmmavis]

Hey @taisdesouzalessa ,

Thanks for the gifs. They were super helpful!

As what I mentioned to you yesterday on Slack I found option 2 less intuitive as "tags" usually imply we can allow multiple tags at the same time -- in this case we don't.

[taisdesouzalessa]

@xmatthewx and I discussed this Filter and we will go with a very simple filter by now (just Year). We will probably use more complex filtering site wide in the future so the discussions we had here are super valid for when we work on it. Thanks for the feedback, team!

[taisdesouzalessa]

Here are the options with just the year:

With Dropdown

InVision (DESKTOP) - interactive
InVision (MOBILE) - one screen only

Without Dropdown

I found the filter a little lost there, since there is only one. And considering the article @kristinashu posted, this option seems to make sense to me:

InVision (DESKTOP) - interactive
InVision (MOBILE) - one screen only

@xmatthewx could you let me know which option you prefer?

[xmatthewx]

Hmmm. Interesting.

• I can see the advantages of option without drop-down. Glad to pursue that, change it later only if it proves necessary.
• I definitely like not having 'filter' as a label
• Can we try a treatment without greybox as background? I am not opposed, but I've always felt it feels drab here and behind the Join CTA. This is not critical if there isn't an easy alternative.

[alanmoo]

Does this mean that every year we’ll be adding another item to that list?

A second question that may be out of scope for this issue: How will we handle the logic when 2018 is no longer the “active” fellows year but still the current calendar year?

[xmatthewx]

Does this mean that every year we’ll be adding another item to that list?

Yes, true whether we do a drop-down or not. We'll out grow it in 2020. But by then, our brains will be wired directly to the internet for nav, so it won't matter.

How will we handle the logic when 2018 is no longer the “active” fellows year but still the current calendar year?

Out of scope. And, i think we just add 2019 when we have people named for that year. and we default to it. i don't think the calendar matters.

[taisdesouzalessa]

Can we try a treatment without greybox as background? I am not opposed, but I've always felt it feels drab here and behind the Join CTA. This is not critical if there isn't an easy alternative.

@xmatthewx I tried a treatment without the background and it seems it is floating there. Both Mavis and I agree that the background helps to anchor the content. I am leaving it for now and once we have more filter options we can reevaluate this issue. Does that work for you?

[xmatthewx]

sure thing. this is definitely not a blocker.

i like your style used for application date CTA. maybe there's some variation on that to anchor it with lines. but again, let's ship this!!! we can always change the style later.

[xmatthewx]

❗️ 👍 💯 💥 🛥

[mmmavis]

This is now on staging. Will go live in the next production push (tomorrow most likely).

[taisdesouzalessa]

This feature is now implemented! Thanks all for the feedback :)