Learn
Learn copied to clipboard
WordPress
Lesson Plans: Landing page layout
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.
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/
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
@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.
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.
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.
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.
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.
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)
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.
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?
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.
That last layout looks great - I really like the consistency with the workshops page.
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/
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.
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.
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.
@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.
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.
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!