Improve Events page

[popovayoana]

Description
This is a major, quite big fix but we should slowly start thinking about it. The events page needs a redesign. Currently it's no different than a regular blog post page - it's user-unfriendly, it looks poor and doesn't give a feeling of a platform.

What we imagine is something like:

• https://www.ataccama.com/digital-conference
• https://opensourcelive.withgoogle.com/events/security/watch?talk=opening

Expected behaviour
When visiting ckan.org/events page, I want to see a visually appealing event platform like this one: attaccama.com with the following structure:

• an attractive menu on left side bar that consists of:
  • live streams - where we have the last event video embedded with a short description alongside an option to go the previous ones using the arrows (see example: live streams)
  • events - where we have all events in a nicely formatted way with title, duration, thumbnails of the speakers, etc. (see example: events)
  • archive - all past events (see example: archive)
• ADDED Nov 2022:
  • calendar Add a calendar to Events page #25 (note that this has low priority because section Upcoming events solves the problem for now)
  • trending sessions/highlights - where we have 3-4 videos selected by site moderator as highlights (reference: https://business.adobe.com/summit/adobe-summit.html)
  • search bar
  • filtering of events by category/use case -(e.g. internal/external data catalog, gov/enterprise etc)
  • "join our next webinar" snippet (at the end) - where users can subscribe for email updates about future events - that should be the webinar form Add a new pop-up form to "Join our next webinar" #89 (reference: https://www.ibm.com/events/think/)

When I click on a certain event e.g. ckan.org/events/ckan-monthly-live-october-4, I want to see a subpage with the following structure:

• embedded YouTube event video - video should be at the beginning like a hero image like on Google Open Source Live: https://opensourcelive.withgoogle.com/events/security/watch?talk=opening (see example: video)
• description below the video
• meeting agenda with timestamps and speaker thumbnails - like the one on Google Open Source Live: https://opensourcelive.withgoogle.com/events/cdapday (see example: agenda)
• ADDED Nov 2022:
  • filtering of events by category/use case -(e.g. internal/external data catalog, gov/enterprise etc)
  • "join our next webinar" snippet (at the end) - where users can subscribe for email updates about future events - that should be the webinar form Add a new pop-up form to "Join our next webinar" #89 (reference: https://www.ibm.com/events/think/)

references

example: left side bar:

example: live streams

example: events

example: archive

example: video

example: agenda

[popovayoana]

@Alex-Pavlyuk we've already discussed this and we're aware that this is a big fix. I suggest we split the work. if Datopian takes on the design work, would it make it easier for you to deploy? it's not something super urgent but definitely good to have as it will improve user experience and general feeling of the website immensely. wdyt?

[Alex-Pavlyuk]

@popovayoana if we have at least a clear design of how it has to work (mockup + page elements descriptions) we can start to work on it next month

[popovayoana]

@Alex-Pavlyuk Had an internal conversation - we can allocate this task to a designer in January so we'll have to leave this for the beginning of next year. Will update you on project kickoff.

[Alex-Pavlyuk]

We have created some ideas\mockups for the page, I asked our designer to think about it I need to get his update, maybe he has created something already

[popovayoana]

@Alex-Pavlyuk wow, that's amazing! our designers are overloaded and unfortunately, my plans to allocate someone to this didn't work. let me know how it goes, very happy to hear that there's some progress!

[alexmorev]

@popovayoana I need you look through and approve the design of Events page in order to start working on it. https://www.figma.com/file/yuS1whH2G8BkPMXOHfdkLO/CKAN-3.0-Design?node-id=8%3A3

[popovayoana]

@alexmorev cc @Alex-Pavlyuk hey, alex & alex : ) thanks and well done to the team, it looks good! here are a few suggestions for improvements from our team:

General impression: We like the minimalism and the airy feeling. Clean and tidy, aligned with the rest of the pages and the website design system. However, we think the Events page could be slightly more entertaining ; )
Suggested action: One thing that could make the page more expressive and energetic is adding background colour on one of the sections (e.g. on the hero section). In this way it will be a bit more fun and also will make things more easily distinguishable.

1. Hyperlink colour
Currently, the colour of the hyperlinks on the website is red. The buttons are blue. We need to have some consistency there - we either do both hyperlinks and buttons in red or in blue. I do like the suggested blue colour in general - I find it entertaining and brave but we should keep in mind the CKAN logo branding colours. (My 2c: I don't have a strong opinion on this - I'd listen to the designer).
Suggested action: Make colours consistent throughout the whole website.

Current state

Suggested design

2. Title of Events
In the Events section, the title/topic should be higher in the hierarchy than the number of the CKAN monthly event and the month as that is not equally important information.
Suggested action: Simply removing part of the naming (e.g. CKAN Monthly Live #9 - April 2022 meetup) won't solve the problem as this info helps users navigate/find meetups. Instead, we can add additional field for the meetup number (can be next to the date as a tag/label or some tagline above or below the title).

3. Upcoming events
Rename Events to Upcoming events so that it's clear

4. Live streaming
Live streaming might not be very appropriate as we have community meetups once per month. Maybe "Last session/Last meetup". WDYT?

5. Speaker
We usually have single-speaker sessions (at least atm) so we need to make sure the design looks fine when only one speaker

Some items to be added (updated in the body of the issue)

• ADDED Nov 2022:
  • calendar Add a calendar to Events page #25 (note that this has low priority because section Upcoming events solves the problem for now)
  • trending sessions/highlights - where we have 3-4 videos selected by site moderator as highlights (reference: https://business.adobe.com/summit/adobe-summit.html)
  • search bar
  • filtering of events by category/use case -(e.g. internal/external data catalog, gov/enterprise etc)
  • "join our next webinar" snippet (at the end) - where users can subscribe for email updates about future events - that should be the webinar form Add a new pop-up form to "Join our next webinar" #89 (reference: https://www.ibm.com/events/think/)

[alexmorev]

@popovayoana Thanks for your feedback. I've sent your propositions to our designers for page design updating. I will keep you posted on the results. After the design is approved from your side, I can actively start development.

[popovayoana]

@alexmorev great! thank you, can't wait to make it super awesome! 🥰

[popovayoana]

@Alex-Pavlyuk @alexmorev hey guys, how is this going?

[popovayoana]

@Alex-Pavlyuk @alexmorev saw the second iteration by accident via this link, think it's going well so far. are we going to move this forward?

[Alex-Pavlyuk]

@popovayoana yes, we can go forward with it, probably in a few weeks.

[popovayoana]

@Alex-Pavlyuk awesome news, please keep me posted! and merry christmas and happy new year! : )))

[Alex-Pavlyuk]

@popovayoana For now, we have set a low priority for it due to a lot of other more important tasks. If you want to increase the priority pls let us know.

[popovayoana]

@Alex-Pavlyuk @alexmorev hey guys, could we revive this issue somehow? thanks!

[Alex-Pavlyuk]

@popovayoana, we still have 4 tasks in to do, so this one is in line till the other are done

[anastasiia-shevtsova]

Hi @popovayoana ! Please review this option of Event page. You can find figma prototype by the link. Here I used upper horizontal panel with filters, tabs and calendar as is fits better to the website layout - https://www.figma.com/proto/yGSXAZwITjSjHf9PNipyHg/CKAN-org?page-id=8%3A2&type=design&node-id=8-3&viewport=518%2C287%2C0.05&t=y7mx0PuJYQJ6HTAO-1&scaling=scale-down-width&mode=design

[Alex-Pavlyuk]

I think the search feature and options\facets are excessive for now.
We probably have two categories of events: government or enterprise - we can make a kind of switcher to the toolbar to switch between them. But Im not sure how do we focus our events

[anastasiia-shevtsova]

Hi, @Alex-Pavlyuk I've added filters to choose Government, Enterprise or All events on page, what do you think?

[Alex-Pavlyuk]

@popovayoana what do we need on the page?
I believe we are not planning to have separate Live streams, and we dont have Archive entities for now
what do you think?

[popovayoana]

@anastasiia-shevtsova @Alex-Pavlyuk the prototype is awesome, I love love, love it! since the issue is pretty old and there were some changes, i suggest we do the following:

one clarification re Individual Event Subpages > each event should have two different individual pages:

• Upcoming Event Individual Page: Provides details about the future event, including highlights, agenda, and reasons to attend. (this is not in the prototype, we need to create it)
• Past Event Individual Page: Shares the recording with timestamps and other relevant information. This is the current individual event page that we have in the prototype with the video.

Updated structure
instead of live stream, events, archive, calendar, we can have upcoming events, recent events, and past events/archive, calendar:

• Upcoming Events:
  • This section will highlight the next event with relevant details. Instead of a video, we should use an image or graphic since this is an upcoming event.
  • We need to ensure there is enough space for all the event details such as highlights, reasons to attend, and the agenda. For reference, please see: https://ckan.org/events/ckan-innovation-benefit-new-ongoing-investments. This would be what I called Upcoming Event Individual Page.
• Recent Events:
  • Here we want to list the last 3-4 events with a brief summary and links to any resources shared during these events. When users click on an event, they should be redirected to the Past Event Individual Page with more details about the past event.
• Past Events/Archive:
  • Stays as it is - this is a collection of all past events. Users should be able to click on each event to go to its Past Event Individual Page.
• Calendar:
  • This remains unchanged. Here we want to include the regular dev meetings as well.

Other Elements:

• Trending Events:
  • This section remains as it is and should be visible on every tab above the "Get an Invite" section.
• Get an Invite:
  • This can either remain as a button or have the form directly embedded on the page, depending on your preference.
• All/Gov/Enterprise:
  • Remove this for now.
• Search:
  • This can stay if feasible.

If anything is unclear or needs further discussion, I suggest we have a quick call to clarify and brainstorm together. Great work, well done, @anastasiia-shevtsova!

[anastasiia-shevtsova]

Hi @popovayoana @Alex-Pavlyuk Thank you for the feedback. Please review the updated prototype, I've added Upcoming event individual page and updated other pages - https://www.figma.com/proto/yGSXAZwITjSjHf9PNipyHg/CKAN-org?page-id=171%3A2952&node-id=171-3169&viewport=825%2C410%2C0.08&t=phqlhkxKNHFjdW3r-1&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=171%3A3169

[popovayoana]

@anastasiia-shevtsova I absolutely love it! well done! no comments on my side, I think it's perfect.... let's implement 😍 // cc @Alex-Pavlyuk

[Alex-Pavlyuk]

@popovayoana https://ckan.org/events - check it pls