Feature ideas for a new NexGen WP Events central site

[dorsvenabili]

This ticket is to open a call for ideas for a future website to host all NexGen WordPress events, have a centralized place to find the next WP events, all open calls for speakers, sponsors, volunteers, ticket sales,... and to be able to filter them by continent, country, language, type of event, etc.

I’d like to share The Linux Foundation Events page for reference as it contains many elements that we're missing in the WordCamp Central Schedule page and that it would be very useful for attendees, sponsors, etc.

Highlights:

• You can search events by name, topic, categories, country…
• Every event in the list has a direct link to its registration page, schedule, call for speakers, sponsors, etc.
• The top submenu includes links to the pages where someone can see all the calls for speakers currently open, all calls for sponsors currently open, etc.

I'll be adding new ideas to this thread, and I welcome anyone with more ideas to share them here as well, thank you! :)

[dorsvenabili]

Note: I'll start a P2 post in make.wordpress.org/community/ first to discuss different ideas and I'll be back to GitHub when the discussion is closed.

[dorsvenabili]

The public discussion is now closed: https://make.wordpress.org/community/2023/08/23/call-for-ideas-new-features-for-our-nexgen-wp-events-central-page/

I suggest the next steps:

• Give a design to the current version of: https://events.wordpress.org/?preview to start promoting it within the WP community
• Create a list of requirements/features of improvements to this landing page, like filtering by type of event, region, language,... show a link to the open calls per event, etc.

[dorsvenabili]

Context
As I already discussed in the p2 post linked above, wordpress.org lacks an Events Landing Page to increase the visibility of all our WP community events around the globe and to get more people to discover all our kinds of events. Right now, these are the following sites to find our events:

• WordCamp Central
• Meetup.com
• Do_Action hackathons
• Upcoming Events (includes WordCamps, Meetups, online and in-person)
• Upcoming online events (includes only online WordCamps and Meetups)
• Next Gen events (so far it’s a static page that we keep updating)
• WordPress Events in the Dashboard of WP sites

All of them are in external domains (not in the main wp.org domain) and are difficult to find for a new-to-WP user.

We already have some functionalities running in https://events.wordpress.org/?preview 🙂

Goals
A new Events Landing Page in the top menu of wordpress.org will improve the visibility of all our WP community events, especially for casual new users who are still not aware of them.

This landing page would be the first step of our vision of hosting all WP events in wp.org and having them all under the same domain umbrella.

Requirements

• New Events Landing Page on events.wordpress.org that is appealing, modern, and attractive and that shows the upcoming WP events (online and in-person)
• A new top menu “Events” in wp.org linked to the new events landing page
• These are the elements that we would like to show on the page:
  -- A global map with a pin on the location of upcoming events (the color or shape of the pin could be different depending the kind of event: WC, Meetup, etc.)
  -- List of upcoming events (with the option to filter by location like country, type of event, etc.). The links would go directly to their respective events pages, these are examples of the four different kind of events we have at this moment:
  --- WordCamp San José
  --- Meetup: Santa Cruz WordPress HelpDesk
  --- Do_Action: Hackathon Solidaria – Griñón 2022
  --- NextGen: WordPress Community Day – Roma 2023
  -- Info about what are Meetups, WordCamps, Do_Actions, etc., and linked to their respective sites
  -- Call to action to either attend or organize events (if there are no events/groups in your city)
  -- List of our Global Sponsors and a link to our handbook to learn more about the Global Sponsorship program.
  -- A second page in events.wordpress.org/organize that is appealing, modern, and attractive where we show the info and links to apply to organize WP events:
  --- Meetups
  --- WordCamps
  --- Contributor Days
  --- Virtual Events
  --- do_action charity hackathons
  --- NextGen Events
  -- For future iterations of this landing page, we would love to have more functionalities like: a link to the event’s ticket page, a direct link per event to their open calls for speakers, organizers, volunteers, or sponsors… a page for sponsors with info about our events, numbers, global sponsorship programs and all open local calls for sponsors, a central page listing all open calls for speakers, etc. (see the Linux Foundation events page in the resources section).

Designs
We still have no a design. I’ll list here some sites that we like for this page:

• Linux Foundation Events site: Our team likes the design and functionality of this site. It serves as a model of what we envision for our own events program page.
• CreativeMornings Events site: we like the photos, fresh and modern style, and how the info is shown and structured
• Google Developers Community Events: a very similar community events program with different kinds of community organized events.

[fcoveram]

Very clear request. Thanks for the detailed comment.

After trying different ideas, I landed on this version. It reuses many existing components from the Design Library and I customized some blocks for the landing's cover area and links set with community images at the bottom.

I also documented the section's information architecture in the site's IA map in Figjam.

Here are the three principal pages on desktop and mobile.

Page	Desktop	Mobile
Landing (events.wp.org)
All events
Organize an event

---

For this first release, I'm drawn to put online a simple design where all events are listed in a table-ish area. In the future, we can try adding more event metadata to ease their finding and browsing.

I would like your feedback on the following:

• What do you think of this idea? Is there something I'm missing?
• I'm proposing a new "Format" filter that allows you to narrow results by either Online / In person / Hybrid. Is this doable?
• In "Organize an event" page I included a FAQ section. Does this make sense?

Regardless any comments, I need help revisiting all content and replacing the "lorem ipsum" examples.

[iandunn]

Those look great, thanks! I can take a closer look next week, but so far I noticed these:

• The map on mobile seems very short to me. I imagine it'll be difficult to use at that height. It should be easy to increase if we run into that though.
• We don't have have a Hybrid format in the data, only online and in person.

To confirm, i1 > first release > landing page is still what we're targeting for SotW, and the above are for future iteration. Is that right?

[dorsvenabili]

Thank you @fcoveram, this looks great! 😀

What do you think of this idea? Is there something I'm missing?
I've been thinking about it and the last two sections at the bottom (the WordCamp and Meetup ones for finding or organizing events), I would remove them and replace them with one single call to action, something like: "Organize a WordPress event in your city" with a subtitle like: "If you can't find a WordPress event around your area, you can become an organizer and to start hosting WordPress events. Find out more!", and that button/link would be linked to the other new landing page for organizers: "Organize an event"

I'm proposing a new "Format" filter that allows you to narrow results by either Online / In person / Hybrid. Is this doable?
Yeah, we don't have Hybrid events. So, +1 to leave it with "Online" and "In person"

In the "Organize an event" page I included a FAQ section. Does this make sense?
Yeah! It's perfect! 😃

Regardless any comments, I need help revisiting all content and replacing the "lorem ipsum" examples.
I'll ask some members of the global community team to work on it next week! 👌

[fcoveram]

To @iandunn notes

The map on mobile seems very short to me. I imagine it'll be difficult to use at that height. It should be easy to increase if we run into that though.

This was intentional as on small screens is hard to interact with maps. The most common interaction is scrolling with two fingers, yet the visible area crops most of the map. To solve that interaction, I was thinking of relying on the full-size toggle (which I forgot to add to these mockups) to see everything at once, open the event details in a box, and open the event's external link from there.

We don't have have a Hybrid format in the data, only online and in person.

In that case, radio options keep making sense, right? If users select online or in person, "hybrid" events will show up in both.

To confirm, i1 > first release > landing page is still what we're targeting for SotW, and the above are for future iteration. Is that right?

Sorry for not conveying Figma's page system correctly. i1 means iteration one where I put all ideas belonging to the feedback stage, and it will continue as long as we continue polishing the mockup. First release section gathers all mockups for the release before SoTW.

The file now has a i3 page where I'm currently working. From today, I will put all first-release mockups in a section with the same name. Once we are done with these mockups, I will move them to the "Design" page in a section marked with the "Ready for dev" status to be viewed in the dev mode.

I hope that is more clear for its browsing.

---

To @dorsvenabili

I would remove them and replace them with one single call to action, something like: "Organize a WordPress event in your city"…

Great. Working on it.

I'll ask some members of the global community team to work on it next week! 👌

Awesome.

[fcoveram]

Design (i3)

Landing page

Here is a new iteration of the landing page. You can find the remaining pages in this section.

Desktop	Mobile

---

Since the changes applied were minor visual tweaks to blocks, I think we're ready to start developing unless there are blocking comments related to functionalities and behaviors.

[dorsvenabili]

Love it! Thank you @fcoveram! 😍 👏

[foosantos]

Love it as well! ❤️

Two ideas:

• Could it make sense to have something like an "In-person events near me" section or something like that? Mostly showing events based on their geolocation — similar to the WP native dashboard widget (with a default or user-selected radius).
• For mobile, what do you think of having a button for viewing the map instead of showing this small version on the page? It feels like it would be more practical (as you can't see a lot on this small map anyway).

PS: I understand it might be too late to propose something like that, but I decided to mention it anyway as it was something that I realized now while reviewing the proposals.

[iandunn]

relying on the full-size toggle

👍🏻

radio options keep making sense, right?

Yeah, we could keep the same UI, but just remove the "hybrid" option 👍🏻

I will put all first-release mockups in a section with the same name. Once we are done with these mockups, I will move them to the "Design" page in a section marked with the "Ready for dev" status to be viewed in the dev mode.

Sounds great, thanks!

[adamwoodnz]

Love the layout, typography and the consistency we're building between sites 🙂

I am struggling with the lack of colour in these 'generic' sites though. I have left this feedback on the Learn designs, where I felt like a 'feature' colour for each site, used in minimal ways, could help differentiate between say Learn WordPress, Documentation, Developers, etc. especially when they are open in tabs next to each other.

For this particular design I think the problem for me is that the lack of colour doesn't reflect a 'vibrant' community. The images in the homepage really add more personality, richness and 'vibe', and I understand that not every page is meant to be like that, but I feel like we're at the other extreme. My experience at WCEU this year walking through the main spaces was that there was a lot of energy, colour and enthusiasm and I don't get that here. The photos could be one way to inject this, but the black and white treatment on the photos strips it away.

[devinmaeztri]

The design looks great! Thank you, everyone!

Just one request from me: can we please add a button to register/create WordPress.org profile to the page?

I noticed recently at WordCamp Manila 2023, that many people, especially folks who are new to the community or the project, do not have a WordPress.org profile.

Thank you!

[dorsvenabili]

+1 to the colors and to add a call for registering in wp.org

[fcoveram]

Thank you all folks for sharing your thoughts. I will reply to some notes to address the points made as next steps.

to @foosantos points

Could it make sense to have something like an "In-person events near me" section or something like that? Mostly showing events based on their geolocation — similar to the WP native dashboard widget (with a default or user-selected radius).

It does make sense. I wonder though if in this first release we are surfacing many worldwide events to avoid seeing a "no events nearby" message in most users and not meet the expectation. Since this redesign aims to include all events, I envision an ideal scenario where that suggestion area displays at least 4 events.

For mobile, what do you think of having a button for viewing the map instead of showing this small version on the page? It feels like it would be more practical (as you can't see a lot on this small map anyway).

I like the small map as it doesn't take the whole screen, yet keeps the idea of geographical location. I agree that hiding parts of the globe feels random or even region-centric, but a button hides that visual effect that is crucial on its desktop view.

In terms of interaction, it doesn't seem that the toggle is less practical or brings a11y problems, but I might be wrong and am open to any change needed.

to @adamwoodnz points

The page style is truly a certain point. I agree with you that community vibrancy can be depicted through colors, but for the scope of this ticket, we're trying to reduce visual tweaks and reuse patterns from the Design Library as much as possible to release a solid first version.

For the future, I envision a richer page to browse events in multiple ways and convey the energy of an active community, but the section also needs to weigh the visual consistency of living among other sections that host completely different content. This doesn't diminish your point, but designing a site as diverse as this is definitely challenging.

In the same Figma file (page "i1", section "Final site ideas") you can see other ideas I was exploring for the long-term future.

To @devinmaeztri and @dorsvenabili

Great! I will include that section.

---

With the content change mentioned above, I think this first version is solid enough to meet the core goal of seeing events in the new WordPress site. And for the future, there is definitely room to explore a more colorful style to convey the community energy and provide more tools to explore events.

[fcoveram]

I tried a few ideas for this, but I couldn't give proper context to why Events visitors might need to create a WordPress.org account.

I checked other site sections that redirect to the account creation, and all of them are within the flow of users trying to achieve something. To name a few: submit a Showcase site, reply to a forum question, and create a pattern. But in this case, you don't need to create an account to browse events.

However, you do need an account to organize an event. But that page mainly redirects to Make handbooks/pages that seem a better place to call for the account creation. If you go to Make's landing page, there are no links to create a WordPress or Slack account.

Therefore, it is more coherent with user flows to include that link in the handbooks referred from Events, and the landing page of Make.

What do you think @devinmaeztri @dorsvenabili?

[dorsvenabili]

Sounds good, @fcoveram! We'll make sure of adding that CTA in our texts! :)

[fcoveram]

Design mockups are done and ready for their implementation.

[thetinyl]

Copy for the pages is being worked on in this Google doc.

cc: @dorsvenabili

[pablohoneyhoney]

Agreed with @adamwoodnz on the color. A simple tweak would be to leverage blueberry in the bottom section to break out from the list. Similar to the current homepage.

For the heading area, it could be interesting to also separate the numbers in an horizontal 3 column where they turn a bit more visible, celebratory; and also the heading becomes a bit more focused.

If we color dark the left side of the heading, shall the whole upper side (nav, subnav) be also dark?

Also, let's make sure the lines break without widows and orphans (ie. "and").

[adamwoodnz]

Also, let's make sure the lines break without widows and orphans (ie. "and").

We're planning to add the new CSS text-wrap rules to the parent theme, which will hopefully improve this across all the sites in the network.

Issue here.

[ndiego]

Copy for the pages is being worked on in this Google doc.

@dorsvenabili @thetinyl would it be possible to get the initial version of the copy finalized by tomorrow? Then we can update the Figma file with a more accurate reflection of the new pages.

[thetinyl]

would it be possible to get the initial version of the copy finalized by tomorrow?

I think there's just the FAQ section that's being finessed, so we should be able to hit this timing no problem. 👍

[fcoveram]

Design (i4)

Thanks for the comments. Here is a new iteration with the changes suggested.

Also, let's make sure the lines break without widows and orphans (ie. "and").

For the mockup purpose, I kept the text area's width to indicate the number of columns it uses per breakpoint, so the line break will not be reflected until its code version, as pointed out here.

Attaching the landing page views as all remaining pages have the same layout with the bottom area in blue.

If we all agree with the changes, I will update the "Design" page with these mockups and mark them as ready for dev. And later updating the content once the copy document has folks' approval.

[thetinyl]

And later updating the content once the copy document has folks' approval.

Copy should be ready for you @fcoveram. 👍 Let me know if you have any questions or need anything adjusted.

[fcoveram]

Mockups are now updated with the latest changes and content, and placed in the "Design" page. I'm also attaching the two images used in 2x and compressed with ImageOptim.

Mockup images.zip

[dorsvenabili]

@thetinyl I'm checking the copy of the page for organizers now, and I see that we're not having anymore the list of kind of events we had linking to the corresponding link to apply to become an organizer of that kind of event.

The organizers page now is just an intro and a FAQ, the FAQ should be secondary.

The main CTA is the list of kind of events we have linked to the forms to apply to organize.

Can we recover that part, please? It's the most important part of that page.

@fcoveram one note: in the events landing page, the bottom part says that if you can't find an event in your area, you can apply for it, because it has the same color as the footer it's not very visible. Can we change the background of that section? it's a very important CTA of the page, we want people to see it and click to find more to organize events.

Thanks!

[dorsvenabili]

This is the section that I'm referring to, it's the most important part of the organizers page, our main CTA, to encourage people to organize events in their cities :)

[catederosia]

That was a misunderstanding. We worked on the text above and below it, assuming that section would stay. I do see a few lines of text are needed to replace the lorem ipsum and I'll work on that today.

[thetinyl]

@catederosia @dorsvenabili I've added some suggested copy in Figma based on @fcoveram's feedback for whenever you have a chance to look.

[dorsvenabili]

The copy looks great! IMO, it’s ready to ship it! 🚀

[fcoveram]

Design (i4.2)

Mockups are updated with the content's latest changes and with the following tweaks:

1. In homepage, the big banner above footer is now dark instead of blue.
2. Organize an event page has a new layout based on iterations DM-ed with @dorsvenabili. Sub copy was deleted as it was needed for the previous layout.
3. In "Organize an event" page, the big banner takes you to "All events" page and, therefore, has a different copy

Images

Mockup images i4-2.zip

[thetinyl]

@fcoveram I've made a couple of minor copy edits in the Figma mockups.

In "Organize an event" page, the big banner takes you to "All events" page and, therefore, has a different copy

I've added this copy in the Events copy document for future reference. (FYI: @dorsvenabili @catederosia)

[fcoveram]

All content suggestions were applied. Thanks @thetinyl.

Previous mockups in "Design" page were removed. Just from that page, they still exist in the iteration ones.

[StevenDufresne]

With the page launched in its MVP state, should this be closed and new tickets opened when necessary?

[fcoveram]

I would say yes. This ticket is about the need and expectations. What was made addresses both and is more clear to tackle improvements in a new issue.