Add Search box to Learn homepage

[kathrynwp]

Issue

When a learner visits the homepage at https://learn.wordpress.org there's currently nowhere to do a search

Improvement

As a learner, I want to be able to search for a term like "block theme" or "plugin development" to see if there are any relevant resources.

I want a quick and simple way to do a find the content I'm looking for – without needing to drill down manually into courses or lessons, because there's no way for me to know where the content I'm looking for might live.

Put simply: I need a search box that will search Learn.WordPress.org.

Other

I'm not sure what others think, but this seems like a clear omission. I noticed that in version 1 of the mockups, there was a prominent search on the homepage, so it must have been removed at some point.

I set the milestone to post-launch, but I do think it warrants another look and strong consideration.

[westnz]

I believe it is essential to have a search option available to a learner who is looking for something specific. A person might come to the site to solve a single issue and will need a way to quickly find the relevant resource. A few other thoughts:

• Improves user experience and saves time: Helps users find content quickly and easily.
• Increases engagement: Encourages exploration of more content.
• Improves bounce rate: Helps learners find what they need before getting frustrated and leaving.
• Enhances accessibility: Makes content easier to access.

[Piyopiyo-Kitsune]

Heya! Thank you for bringing this up!

I am surprised to learn that the search box is currently not going to be implemented, and strongly advise that we implement maintain this feature on the website. Here's some additional reasons;

• Understanding User Needs:

  • The search terms entered by users provide invaluable insights into their interests and requirements. By analyzing these search queries, we can continuously refine our content and offerings to better meet the needs of our audience.

• Optimized Content Delivery:

  • We've invested significant effort in curating and organizing lessons, courses, and learning pathways to be highly searchable. This meta work ensures that users can effortlessly find and access the most relevant educational resources.

• Industry Standard:

  • In today's digital age, a search bar is a fundamental feature on any modern educational platform. Providing this essential tool ensures that we meet the standard expectations of our users and align with best practices in online education.

• Enhanced User Experience:

  • A search box allows users to quickly find specific topics or tutorials they are interested in without having to navigate through multiple pages. This streamlined access improves overall user satisfaction and encourages continued use of the platform. This efficiency is especially important for learners who may be on tight schedules and need immediate access to information.
  • A search box can help users discover relevant content they might not have found otherwise.
  • When users can easily find what they're looking for, they're more likely to engage with the content. Higher engagement can lead to better retention rates and a more active learning community, which is beneficial for the platform's growth.
  • Non-English speakers can quickly find their relevant content.

• Personalized Learning:

  • A search box empowers users to tailor their learning journey according to their individual needs and preferences. By easily locating content that matches their current skill level or specific area of interest, learners can create a more personalized and effective educational experience.

[adamwoodnz]

@WordPress/meta-design it seems we need further discussion on this please.

[ndiego]

Here are some previous designs that include the search on the homepage. We would need to add:

• A search block on the homepage (we could follow the previous designs or choose a new location)
• A search archive template that displays block courses and lessons based on the search term

Here are some rough mockups.

Homepage Search

Learn	Forums (for comparison)

Search Archive

Search archive (https://learn.wordpress.org/?s=blocks&new-theme=1)

Note that the lessons should not have the design at the top, and the courses and lessons displayed above are for demonstration purposes. They are not actually the result of searching for "blocks."

[Piyopiyo-Kitsune]

I think this is a great start to the homepage search and we should go with this @ndiego. @renintw can we prioritize implementing this for the launch?

I understand for the archive page we may need to make iterative edits, but I want to make a suggestion that we try to be specific here by including somewhere on the card whether or not folks are looking at a Course or a Lesson (surface the CPT meta or a tag?).

Also, instead of Type, be specific calling it Content Type and instead of All, calling it Skill Level. I'll make a separate issue for this if there isn't one already.

Also, I'm attaching below an example of the search archive page for Khan Academy-- just one of the many modern learning sites we can take inspiration from :-)

https://github.com/user-attachments/assets/c920c29b-02c3-4779-a3f7-d6048a92c1d6

*** edited to note I created the issue to address the label clarity https://github.com/WordPress/Learn/issues/2787

[kathrynwp]

I want to make a suggestion that we try to be specific here by including somewhere on the card whether or not folks are looking at a Course or a Lesson (surface the CPT meta or a tag?).

If my suggestion in #2767 is implemented that could be one solution, as it will be more obvious when a lesson belongs to a course.

@ndiego your mockups look good to me!

[ndiego]

@renintw let us know if you have any questions on the implementation. I think the last thing to sort out is how to distinguish between lessons and courses on the search archive page. I have no strong opinions. I recommend starting with implementing functionality that displays either "Course" or "Lesson", and then we can tweak the styling/position of the labels. cc @WordPress/meta-design

[renintw]

@ndiego I am currently adding filters to distinguish between courses and lessons. As for how to further differentiate between lessons and courses on the search page, since it's feasible to determine if the search result page is redirected from a front page search - ie, identify that search result pages are not redirected from a course archive or lesson archive search, we could add some decorations to the cards on that page to clearly indicate whether it is a lesson or a course.

Regarding the filter for differentiating between courses and lessons, I think we can also discuss whether to simply display the results of a post type or additionally display filters specific to that post type, such as the topic for courses when a post type is selected.

[marko-srb]

Regarding the search button. We can simply follow the suggestions above and add it on the Learn home page (position top left, as in Nick's screenshot). Afterwards we can extend the discussion that takes the bigger picture of how search behaves across all sections (it is a daunting and a longer testing task)... Hope this solves your questions — in case not, let me know.