Lesson Plans: Landing page layout

[courtneyr-dev]

At this time, the lesson plans resemble dumping a filing cabinet full of papers onto a desk. We need a way to visually organize the content. I think "lesson group" taxonomy may have been intended for that?

The team's original vision can be seen at the bottom of the staging site: https://learnwp.jco.dev/

.org inspirational ideas: https://developer.wordpress.org/ & https://wordpress.org/support/
non-.org inspiration: http://m.tri.be/kb, https://docs.wpbeaverbuilder.com/, https://www.advancedcustomfields.com/resources/

This can go below the fold, beneath "Get Involved"

We have 2 halves of the website at this time. I want to be mindful of the traffic flow. Do we show 1 visual breakdown with links to individual lesson plans AND also workshops when there is an option for each? We don't need all the answers but I do want it to consider what the future iterations can look like.

[coreymckrill]

@courane01 Is this the same as #147?

[azhiya]

I like the concept of grouping it using the "lesson groups" when there is an agreement on what those groups should be called. I'm not partial to any of the inspirational design layouts that have been listed. However, for consistency, it might be better to go what is currently being used .org inspirational ideas: https://developer.wordpress.org/ & https://wordpress.org/support/

[courtneyr-dev]

Related? I think of this more as something broken down like Dev & Support, while the other lives near the lesson plan nav bar to sort and filter. Filtering can come secondarily.

[courtneyr-dev]

As I studied https://wordpress.org/support/ & https://developer.wordpress.org/ an idea occured. On /lesson-plans, can we show basically everything that is on /support, but including 3 additional cards for plugins, themes, and an speaker diversity? (we do not yet have those lessons revised but could in that timeframe) We can refine our categories in that time and reuse much of the dashicons. How does /support order the items under each icon? I do like the chapter breakdown within as well. Is that handbook? Does that function more like pages or posts? Can we enable some sort of sequence within lesson plan CPTs?

I think this is a higher priority than the navbar, but am open to input.

I don't see much value in a lesson plan post excerpts archive page when it's not sequential. It looks like a pile of papers on my desk.

On the main page of Learn, can we have something that shows several recently published or recently updated lessons below the fold? That can happen later.

The organization on /support really does make sense, but I don't want to confuse viewers in what they are seeing.

[varlese]

I agree with you on the higher priority/impact for adding the visuals to the landing page for lesson plans vs. filtering.

To avoid duplicating efforts since there's already a considerable amount of categorization for the lesson plans, I would suggest using what we already have present in Learn for "Lesson Categories" (Builder > Plugin Dev, Theme Dev; General; Speaker; Templates; User > General Admin, Plugin, Theme) and/or "Experience Level" as a start.

I believe the icons are pulled from Dashicons for the Support and Dev docs, so that gives us some flexibility in terms of finding visuals that match the categories we already have (if we don't exactly copy what's on those two pages). Over time, I imagine we may add new categories or refactor them a bit, but my two cents is that this seems to me the best way to implement that organization while leveraging natural groupings we already have in place.

[courtneyr-dev]

The only thought to "Builder" is builder vs dev. Informally in the community, I've been hearing more "site builder" as one who doesn't touch code but can assemble websites for clients using plugins/themes already made. Whereas Dev would be more specifically one who writes the code. https://www.acquia.com/drupalcon-certification#block-uplifting-content:~:text=Exam%20Blueprints follows similarly. But we can delineate that later too, not a big enough issue to prevent implementing something.

[coreymckrill]

If I'm following correctly, it sounds like we want to have a section on the front page that has a grid of Lesson Plan categories, each with a Dashicon and a blurb, that would link out to a separate page showing all the lesson plans in that category. Is that right? If so, some follow up questions:

• There's already a lot going on on the front page, and there will soon be even more. Where would this section fit in the order of sections on the page?
• If we use the Categories taxonomy for this, what is the Lesson Plan Groups taxonomy for? Currently it is registered but appears not to be used in the code, and only one lesson plan has a term assigned.

[courtneyr-dev]

How about we put the grid on https://learn.wordpress.org/lesson-plans/.

Seeing the lessons as they are on the lesson plan archive doesn't have much organization now. There's no idea of the sequence to it.

We can still tuck that filter option in on lessons later.
The front page can later include some recent lessons.

[hlashbrooke]

I think it makes sense to put it on a new lesson plans landing page. I do think the current filters are also valuable, but I'm not sure how the filters and the landing page would work alongside each other.

[varlese]

In terms of combining the existing filters and landing page, I was picturing something like this for the Lesson Plans landing page:

And then when you click on "All" or navigate through any of the filters in that bar, it could default to the current layout that exists now:

If the goal is to help the workflow that appears upon first impression in particular, I think this approach can help give new visitors a sense of what's available, while then being able to navigate/search as normal as they click through the existing filters, too.

[courtneyr-dev]

I love that Erica.

Backlog extension to this: later can we sort the lessons in a logical flow - accounting for prerequisites. And how support/docs use the "chapters" at left on the post/page content? https://developer.wordpress.org/block-editor/architecture/fse-templates/ That part looks like handbook.

[paaljoachim]

Here is a backend view of the plugin WeDocs:
https://wordpress.org/plugins/wedocs/
I have been testing it out today for a possible use with a Documentation dev site prototype.

It shows sections such as Block Editor, DevHub, Handbook and HelpHub.
Within the Block Editor we have the subsections: Project Overview, Architecture and Developer Documentation.
Within the subsections we have individual articles.
I liked this page as it kept a clear order of sections -> sub sections -> articles. All could be modified through Gutenberg. Having a few 100 articles or lessons spread through these sections would keep a very nice backend overview.

Frontend view:
(Showing WeDocs organization and the theme MyWiki.)

---

Deactivating WeDocs and activating Knowledge Base for Documents and FAQs plugin and the theme MyKnowledgeBase.

Viewing the Block Editor section on the frontend.

Categories overview on the left underneath Table of Contents highlighting headings.
Center area: Breadcrumbs. Last updated. Then the article.

It would be nicer to have the left sidebar menu like the handbooks https://developer.wordpress.org/block-editor/
As it groups the various sections into nice logical order. Making it easy to find and navigate.

I do believe finding something that works here in Learn would very likely also work with for a new look and feel for documentation as well.

[coreymckrill]

I think it would be good to get some help from a designer to refine @varlese 's mockup above.

This is still an open question:

If we use the Categories taxonomy for this, what is the Lesson Plan Groups taxonomy for? Currently it is registered but appears not to be used in the code, and only one lesson plan has a term assigned.

[courtneyr-dev]

@StevenDufresne indicated that due to the change to include video workshops, the "lesson group" taxonomy wouldn't show anywhere yet. https://wordpress.slack.com/archives/C02RW657Q/p1605668199127800?thread_ts=1579550929.007200&cid=C02RW657Q

https://wp.invisionapp.com/share/BNP0V7QXRF8#/screens/330323714 Notice the filter. Also, each of these training team workshops are a series of lesson plans intended to be part or full day presented in a series. I don't know if there was further work on ordering these within. The bottom one, WP Full Day Workshop, does order lesson plans in a logical order as one progresses down through the bullets and on to the next column. I really like this mockup when we are ready to present "units" or whatever term we use to rename "workshops" as the training team planned.

The same materials could be laid out using Erica's mockup above as well. I think Erica's mockup looks like page 13 (Just realized Steve's link was all the mockups, not just one screen). I believe page 13 links would point at all lessons appearing ina sequential order, using "lesson group".

I have the capacity to organize "lesson group" taxonomy before launch, but do not know how to make those appear in a sequential order. That may be an after launch portion.

As a team, we can work on a new name for "workshops" as the idea is a grouping of lessons presented in a logical order.

Before launch, can we get close to Erica's mockup. After launch, we could swap the sub-points from her mockup to lead to groupings of lessons or whatever should come/go off that main list.

[varlese]

It sounds like there are two main options here:

• Use the categories we have to create a layout similar to the mockup I added above that mimics Support and Dev doc pages.
• Use the audience and duration taxonomies to create a layout that mimics Steve's layout above, but we would also need to organize lesson plans into workshops/Lesson Groups to go under Workshop Ideas.

@coreymckrill and @courane01, which is your preference at this point? In either case, we have some existing categorizations we could use (categories, duration, audience), and the second option just requires a bit more thinking and organization from Training ahead of implementation.

I'm thinking the second option gets us closest to what we'd like in the long-run, and I'm happy to work with @courane01 on getting some Lesson Groups together by the end of the week or so, if that makes sense.

[courtneyr-dev]

I think option 2 is more thought out. Do we see a way to partially implement before release? I did see Hugh indicating postponing a few days to give 5.6 & PHP8 breathing room in the news.

[varlese]

Just to sum up what we've discussed so far here, and to help us with moving forward, the main goals for visual organization here are to help educators visiting the site to better navigate what's available in lesson plans. With that in mind, the Lesson Plans landing page should make it clear:

• Who the lesson plan is for (i.e. developer or user, beginner or advanced)
• What the lesson plan is about (i.e. plugins, themes, site set-up)
• What type of lesson it is (i.e. a lecture or a demonstration? does it have exercises?)
• How long it takes to teach

There are some existing taxonomies within Learn WordPress that may help with this implementation (namely, Audience, Experience Level, Category, Instruction Type, and Duration).

Relatedly, we do have the Lesson Groups taxonomy, which is designed for creating a group of lesson plans that form a course, but we haven't really used this just yet and this might fit better in later conversations around structuring courses for both workshops and lesson plans as a whole.

For next steps, it would be ideal to:

• Have designer help with sketching out what this could look like (either something fresh, or iterating on previous ideas) - both for the landing page, and how that will tie in with existing navigation.
• For implementation, I believe we can leverage what's already in place in Lesson Plans on Learn, so it's more a question of implementing the design once we have that set.
• The biggest wish is to have this at least partially included in launch, so if there is any part of implementation that makes sense to divide into two pieces, that works well, too.

[melchoyce]

Took a quick look at wireframing the landing page. Is this along the lines of what you're thinking, @varlese?

If so, I'll flesh this out some more.

[varlese]

Thank you so much @melchoyce! It definitely matches what I had in mind, and I like the approach here for how someone might interact with the page :D

As a secondary, but related question: I'm wondering about the flow from the landing page to the lesson plans in each section. We currently have this layout with the nav bar for lesson plans by topic. Do you (or @coreymckrill) think we can incorporate that same design for the other groups (like Audience or Duration), or would we benefit from stepping back to discuss scope and design with that in mind as well? ("It's just the landing page" - famous last words)

[paaljoachim]

Mel @melchoyce that looks really nice! Clear and easy to read. Thinking out loud. A question comes up.... Should there be a sidebar menu that is fixed to the left sidebar (always in view)? So the user can either choose to scroll the length of the page, or use the sidebar menu to jump (think HTML anchor) to the location on the page where a specific lesson is located. Having a sidebar menu gives an instant short overview/summary of lesson titles one can easily go to. Like an index in a book.

I am looking from an even higher perspective....
Perhaps we can do something similar for all handbook landing pages.
Creating a consistency between them. Making it easier for the user and ourselves.

As a user enters a handbook they see the landing/intro/overview page. Having a design that fits with the handbook the user enters. Here is an issue I made for the Block Editor handbook intro/landing page showing how various other sites: WordPress/gutenberg#27400 (comment) do their own landing pages.

[melchoyce]

In general, I think we should try to stick as close to the Workshops pages as possible — not only to build consistency across the two sections, but to also simplify development. With that in mind, we could still do a categorized landing page, such as:

Description on top of page	No page description

...or, we could forego the explicit categorization entirely, and add filters like the Workshop page:

Which method do you think would be more effective for people looking for lesson plans?

[varlese]

You know, I was expecting to want to stick with the categorization, but I'm really leaning towards your second proposal here, using filters like the Workshop page :)

It seems to me that it makes more sense to have a holistic search/filter experience across the site with workshops and lesson plans, while still making use of the different elements educators might be searching for.

[hlashbrooke]

That last layout looks great - I really like the consistency with the workshops page.

[azhiya]

So I'm going to be a pain and say I like the first one (visual categorisation). To me, it looks much clearer and in line with what you already have in https://developer.wordpress.org and https://wordpress.org/support/

[azhiya]

Agreed that from a front-end perspective, by topic would be the natural way that people would search for a lesson plan and workshop. We (training, community) would know that categories reference topics so on that sense changing it on the back-end would be that important.

Renaming the time to match the term (short, long, etc.) makes sense but can we keep it on the landing page as Short (15-30mins)?

Audiences - I see Kids, maybe Organiser (as in Meetups and WordCamps?) being added to the list.

Terms - happy to have a generic one in there as a placeholder

[courtneyr-dev]

During the meeting on Dec 18, the team indicated that the landing page should go on /lesson-plans. See all lessons (from the buttons) that should direct users to /all. This also would involve making prettier permalinks for all filters as well.

[courtneyr-dev]

Checking on progress

[tellyworth]

For the landing page, could we move this forward by having someone draft it as a page in Gutenberg? It's mostly text and buttons. It won't look perfect, but if the content is laid out in blocks then we could have a designer work up some CSS to tweak the appearance.

That would mean the content is more easily editable. And if the CSS is done well, it would then be easy to replicate similar buttons and icons on other pages as needed. Perhaps some could be made into block patterns or reusable blocks. We have a CMS, let's make the best use of it :)

[paaljoachim]

Hello everyone.

(I will likely have missed a few things discussed above here.)
I do want to add the following.

In relation to the landing page design shared by @melchoyce here: https://user-images.githubusercontent.com/2846578/101688755-79264f00-3a3a-11eb-899a-fccedd032de5.png

Currently there are two important features included into the design that have not yet been built into Gutenberg.

1-
The icons block

2-
The Level and Duration area shows a kind of tabbed interface with a kind of query added.
I believe that some of the work done by Joen in relation to the Navigation block, and Nik in relation to the Query block.

The two features above would be nice to first get into Gutenberg before we go ahead and the layout suggested by Mel.

Alternatives.

One alternative is to go to the Dashicons page. Take screenshots, adjust these to look like the design and add these into the Landing page.
Tabbed interface and query. Simples a bit more tricky and looks like it would need coding to get done.

Another alternative is for the moment built a simpler landing page with the purpose of explaining.
Here is one exploration I did a while ago: https://wpdocs.easywebdesigntutorials.com/learn/

Here is @varlese post on Make design back in February.
https://make.wordpress.org/design/2021/02/03/review-feedback-request-ux-for-learn-wordpress-org/

My conclusion would be go to with a simpler design as a first small step. A small step is a lot easier to get implemented vs a (currently in Gutenberg) big step. Focusing on guiding people to where they need to go and also clearly explaining the difference between Lesson vs Workshop. As the icons block gets added into Gutenberg and the Query block is been improved upon. Then we can revisit Mel's landing page design to see if it is easier to recreate in Gutenberg.

[hlashbrooke]

We don't quite have a consensus on this yet (which is fine!) and since we now have the results from the needs assessment that was done for the site, we'll be publishing that on Make/Training and have a much broader discussion about the future of the frontend of the site as a whole, so I'm going to close this issue for now and we can reopen it and/or incorporate it into the updates that come from reviewing the needs assessment results as a team.

[courtneyr-dev]

@melchoyce any chance this exists in a Figma file somewhere? Do you, or might a current Automattician, have access to that?

[melchoyce]

@melchoyce any chance this exists in a Figma file somewhere? Do you, or might a current Automattician, have access to that?

Here you go: https://www.figma.com/file/UtmG8KQv3Csy8hNtuAWkwZ/Learn-WordPress?node-id=1094%3A52

[courtneyr-dev]

Reopening as we have expressed interest from @isvictorious in implementing the mockups from Mel.

[courtneyr-dev]

@hlashbrooke - the landing page on this looks solid for https://learn.wordpress.org/lesson-plans. Tossing it over for a code review.