💸 SSW Events page - Filtering improvements (Add location + better UI)

[tiagov8]

cc @jaydenalchin @bettybondoc @adamcogan @Calinator444

Hi team,

I was looking at https://www.ssw.com.au/events and I'd love to see events filtered by location

• [ ] 1. Can we have an extra filter on the left?

... few other things:

• [ ] 2. I think we should change from "All Technology" to "All technologies" + "All Formats" to "All formats"
• [ ] 3. I also think the 2 items above should be bold even when not selected... because more than a filter, they divide each section of that sidebar...
• [ ] 4. The <hr> that divide them also could have a margin top and bottom to give some breathing space

Figure: Current filtering section for SSW Events

Figure: Proposed filtering section for SSW Events

[bettybondoc]

cc @jaydenalchin @adamcogan

Hi @tiagov8,

I agree with the intention behind segregating the filters.

However, I'm a bit concerned that making "All {{ ITEMS }}" bold might confuse users, leading them to think it's a heading rather than something clickable.

Here are a couple of suggestions:

1. Use actual headings - This would make it clearer that "All" is clickable.

Technology

• All
• .Net Core (1)
• Angular and React (2)
• Other (5)

Format

• All
• Conferences
• Hack Days
• SSW Courses
• User Groups

Location

• All
• Sydney
• Melbourne
• Brisbane
• Others

2. Implement accordions - To hide categories users may not care about. While it looks manageable now, using accordions could improve scalability and prevent the list from becoming too long like SSW People. This approach would also make it mobile-friendly. Right now, I have to scroll through a long list on mobile before seeing the events (see image below)

3. Allow multiple selection - Currently, only one item can be selected per category. There might be a use case for users to filter by more than one technology or format, but not all.

Figure: Filter taking precious real estate on mobile

[tiagov8]

✅ Happy to go with @bettybondoc 's suggestion!

Among with this, please change from

Free SuperPower Videos

to

Free Videos

The term "Dev SuperPowers is already repeated in all images ;)

[tiagov8]

as per conversation with @Calinator444 , the mobile view should also be improved, since you currently scroll a lot before seeing any event on a mobile.

My first thinking is to

• [ ] 1. Hide the Superpowers banners from mobile

• [ ] 2. I also don't see a reason to have this extra div (space) here and would remove it

  

• [ ] 3. Same for the 60px padding top on <h1>... not needed...