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: https://github.com/WordPress/gutenberg/issues/27400#issuecomment-736622284 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/

[courtneyr-dev]

I am leaning toward the first option.

Second option ideas:

• We are still sorting out where we store our slides (still in GitHub at the moment) and have few fully done. We are using a template, but aren't super tight on design adherence there yet. So featuring a slide deck that hasn't run through the paces for design approval might be ... interesting?
• Below the slide player still seems disorganized. What appears there and why? What order? As a new visitor to the site, the content doesn't appear to be sorted.
• I do love the filtering presented there though and would love to consider where to use it.

In the first option with description:

Wow - It's so pretty! Thanks @melchoyce

• We are avoiding "teach" to create space between professional teachers vs a Meetup presenter. "Want to help others learn WordPress? Read through..."
• I think the Topics and Audience are the most helpful part of the organization. Later I envision roughly the left "Chapters" navigation that Developer Docs uses to show lesson plans in the logical flow for learning on single lesson plan views.
• I like that it roughly looks like Support and Developer docs landing pages for entire .org consistency.

[jessecowens]

These are great @melchoyce! For my two cents, I think the first option does look a lot more consistent with other .org sites like make and support. I also think that the drop-down filters might be less obvious to use compared to the material icons. A featured slide deck is a great idea, but I think functionality-wise we might not be there yet.

[melchoyce]

Cool, sounds like we'll want to move forward with one of the first options. Thanks for all your feedback, folks.

Here are some ideas for the archive pages: one without a container around each item and a filter sidebar, one with a container around each item and a filter sidebar, and one in a grid of containers, without a filter sidebar. The filter sidebar would allow you to narrow down results within a particular section. So in this case, since we're in a topic, you can filter by level, duration, and format:

Filter with no container list	Filter with container list	No filter with container grid

I also looked at bringing the single page in line with the Workshop single page:

I added in accordions to help with organization, since some of the lesson plans are quite long and hard to scan. We could potentially collapse all of the sections by default, except for the description, which isn't in an accordion section.

[courtneyr-dev]

@melchoyce Great work! I'll put some thought in this evening on the filter views. I would like the team to eventually have some control on the sequence of lessons within there. Not essential for launch on the filter view.

Single view quick thoughts/impressions:

Good thinking for accordions.

• Would having the Chapters styling at left work with a single view? And the Table of Contents? Docs does both of those nicely
• Love the slide player! For the lesson plans that have slides, except the one shown in the example, they are still stored in the team's GitHub. We decided to wait until AFTER launch to revisit our slides situation. In GitHub, they are Shower files, similar to Reveal.js. I'm not familiar enough to know if they can be embedded - though goodness it looks nice that way. https://learn.wordpress.org/lesson-plan/high-level-overview/ is an example lesson with slides. We are working on a method to provide the slides as a click-to-print PDF or already created PDF available to take offline, considering overhead efforts on maintaining synchronization/versions and more. If the slide viewer simply doesn't display because there isn't a slide available, then I think shipping as is would be okay.

To reiterate, I am so thankful for your work again with the team. I found traces of your work in the years I was away. The main concern for Dec 15 is the initial lesson plan landing page. Anything else before then is icing on the cake.

I'll think on the filter view for any thoughts I may be missing. I should be available to respond for those a little past noon EST Friday.

[azhiya]

Oooh, I love this @melchoyce. I'm torn between the filter with container list and the filter without a container. I can't decide! Hopefully we can a view from the Training on their thoughts in time.

For the Single view - I'm also now torn between using the accordions and mimicing what @paaljoachim is doing with documentation using the table of contents and chapters. Or do we just stick to using a table of contents and chapters for documentation like handbook and use this accordion style for lesson plans..... I think we need to run it by the Training team as I can see a case for both options.

Will bring it up at the meeting which is happening in the next 2 hours.

Thank you.

[varlese]

Doing my best to recap everything from our conversations here and the Training team conversation in Slack today:

• For the landing page design, as you noted, it seems we're all happy to move forward with the first option you shared.
• For the archives page, the team landed on this design with containers around the lessons and filters in the right sidebar.
• Finally, for the single lesson plan page, all looks good. The only two concerns raised were around whether or not the accordions could be made accessible and if it's possible to add some sort of breadcrumb navigation.

Design-wise, I think that should be enough for us to go on to get started with implementation. Thank you so much @melchoyce!

[hlashbrooke]

Now that we have the new Lesson Plans archive page (which looks incredible and I love it), I'm going to remove this issue from the milestone for the 15 December launch, but we can keep this issue open for further discussion about the landing page.

[paaljoachim]

Here is a Figma prototype I built showing the pages that were talked about last week during the Learn office hours.

https://www.figma.com/proto/d76J93PECXgcuziPiXq3Yd/Learn-docs-pages?node-id=3%3A1966&scaling=min-zoom

Click anywhere to see the blue boxes that show a link. Then click the links.

--

I have added breadcrumbs. On Individual lesson in the sidebar Lesson overview/chapter and related lessons.

I have a few thoughts on the new design which I can get back to.

[azhiya]

@paaljoachim, I love how you've combined this with @melchoyce's original design.

Landing page - yes, I'm assuming that when I click on a topic then I should also get a similar archive page.

Archive page - the breadcrumbs are great as it lets me know where I am and easily allows me to get back to the landing page.

Single page - I love how the chapters or overview are incorporated. I'll flag the accordions to the accessibility team for review but for now, I'm very happy. I hope the rest of the team is too.

Thank you.

[azhiya]

Hi @coreymckrill how do I add the accessibility tag to this ticket? Do I need rights or am I missing something that is so obvious :-)?

[coreymckrill]

Some questions/comments about the landing page design:

• “Topic” is the headliner in the mockup, but it’s not a taxonomy used by lesson plans, it’s only used for workshops. Does that mean we just leave out that section, or do we need to pick a different taxonomy to be at the top with large icons?
• The items under "Duration" don't match the names of the terms we are currently using. Should we rename the terms? E.g. "15" => "Short"
• Some parts of the layout don’t have a lot of flexibility for new taxonomy terms to be created later. For example, if a fifth Audience term was created, that would leave us with a single large icon on its own row.
  • Related, there isn't a way to specify a taxonomy term's order in WP-Admin the way there is with pages, so if we want the terms to appear in a specific order on the landing page instead of being alphabetical, e.g. Beginner, Intermediate, Expert, we'll have to hard-code them into the template. This will also make it more difficult to add new terms later.
• There’s not a good way to specify an icon for a term in WP-Admin, so each term that has one will have to be hard-coded in the stylesheet, and any new terms that get added later will either have some generic icon, or none at all, until a developer can update the stylesheet.
• The URL of the archive page is already learn.wordpress.org/lesson-plans/, what should the URL of the landing page be?

[courtneyr-dev]

Good questions!

• Topic does seem to make sense. The technical taxonomy is "categories" in the admin dash. For consistency, we could rename that in admin, keeping the functionality of categories. From an instructional perspective, if I were presenting this in a class or Meetup, I'd likely use the word "Topic" ... what are we going to speak about tonight? Tonight's topic is __. It doesn't seem super important to rename categories to topics in the admin dash though.
• I think renaming the terms/time is good. From the landing-page, can we still keep the approximate minutes shown? This can help set the expectation what "short" means. Though on "Any" we should omit the time.
• Audiences: I do envision KidsCamp getting a call-out, and possible a space for info specific to education institutions. Some material within will overlap, but some unique to either. We are at least a month away from KidsCamp, and possibly a bit longer for anything that'd be specific to schools. I don't see other ideas at this time for additional audiences. I'd like to keep it under 8, and not have a single dangler either. No tile left alone.
• Possibly the icon area will help get me focused on theme PRs for just areas like this.
• hm... the landing page...I'll do a quick round with some of the team on this one.

[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.