A revamped design in Lesson flow

[fcoveram]

I revisited the Lesson flows related to the learning journey and designed a new version that simplifies the UI and addresses the requirements pointed out in the following tickets:

• Clearer lesson completed indicator on the single lesson page #2809
• Single Lesson: Polish the design #2638
• Feedback - Improve the lesson preview CTA banner #2864
• Add Facilitator Notes area to Lessons #2855

Below you'll see a description of the main changes applied. The call for feedback is open so we can assess whether the proposal meets the expectations and how doable is the outlined.

General layout

To create a more immersive experience, I revisited the spacings and reduced the values in the header, the left sidebar, and the content area. Given that the WordPress global header and the Learn local nav are not present, we can use the areas more freely and not be constrained by the WordPress site context.

That being said, the header has less padding on the sides, and the exit course action was placed separately to create a lesson area where the breadcrumb and the new “Facilitator notes” action exist.

If you explore the mockups in dev mode, you will see that lesson content and quiz content are wrapped in a container with a max-width of 960px. I think this value keeps texts readable, but I would like your thoughts as this relates to other layouts implemented across the site.

Main action

On every lesson page, there is a main action that allows users to complete the lesson or take the quiz to complete it. Since users can browse lessons regardless of their order, it seemed logical to place the previous and next actions at the end of the reading direction.

Regarding completing the lesson, I reused green to accentuate the lesson state and match the progress bar on the Course details page.

Login and Take course

When users land on a lesson in preview, they must log in and then take the course to start the learning journey. In both cases, the message was placed below the content, replacing the browse and main actions to ease exploring the lesson.

The eye icon in the left sidebar was replaced by a locker icon, and the “Preview” label on the right of the lesson name was removed to convey the lesson state more directly. In addition, a “Preview mode” pill was added in the content area next to the module name.

Lesson progress

Completing a lesson has two paths: taking the quiz or clicking on the “Complete lesson” button. For the former, the main blueberry was applied to convey the primary action and jump to the quiz page, and for the latter, the green color keeps the progress visual language.

The progress bar in the header is placed above the bottom border in gray instead of adding an extra component that pushes down the areas below.

Once a lesson is completed, the status icon on the left sidebar changes to a check icon and a completed message appears at the beginning of the page.

Quiz

I cleaned up the spacing and text styles of this section, and applied the green in the "Complete quiz" button. Also, the correct and incorrect messages were updated with the color scheme used in the callout component implemented across the site.

Facilitator notes

The facilitator notes are under a link in the header that opens/closes a new sidebar on the right side of the page. The spacing applied differs from that of the left sidebar to convey that the content is in a secondary hierarchy.

---

Feedback

These designs are not written in stone, so please share all your feedback.

Here are the components used in the section. There are also the messages with pending texts and others written by me that need revision from the experts in the project.

I hope this proposal meets you all expectations ✨

Note

Pinging the folks involved in the tickets referred: @renintw @adamwoodnz @StevenDufresne @kathrynwp @Clorith @jonathanbossenger @westnz @ndiego

[jonathanbossenger]

Facilitator notes

I like this implementation. The only comment I have here is that if you look at an example lesson plan, the facilitator notes could get quite long. It's potentially everything except the Example Lesson section.

That having been said, as a presenter, I wouldn't be opposed to the facilitator notes link being a toggle that shows/hides or slides in/slides out the facilitator notes over the lesson content (up to the sidebar). I don't need to be able to see both the facilitator notes and the example lesson at the same time.

As it is, the current lesson plan presents everything on one page anyway, so a facilitator wouldn't see the prep notes and the example lesson at the same time either.

[kathrynwp]

I had the same concern as @jonathanbossenger about the facilitator notes area being so narrow. Some of the lesson plans that will be moved over are quite long, as you can see here:

https://learn.wordpress.org/lesson-plan/create-a-basic-child-theme-for-block-themes/

(This is likely why a tab approach may have been suggested earlier, since it takes advantage of a wider area in which to display content.)

[fcoveram]

Thanks for the feedback. I will work on a different version that addresses the content extension.

[fcoveram]

Coming back after a few days working on 5FTF to share a new idea for the facilitator notes.

Facilitator notes in popover and modal

I tapped into @jonathanbossenger's comment and explored a popover version on desktop that then changes to modal on mobile. Here is how the flow would work on both key displays.

---

Mobile views

Regarding the experience on mobile, I explored different ideas that make better use of the spacings and provides an action affordance similar to its desktop version.

Below you can see the mockups of the pages documented in the Design page.

Main action

Lesson progress

How do you see the above in terms of flow @kathrynwp and @jonathanbossenger, and how feasible is the implementation @renintw?

[renintw]

The facilitator notes in both the popover and modal look good to me and are technically feasible. It may take some time to ensure their accessibility is handled properly, though.

In mobile view, I noticed that Home was changed to the lesson name.
Just to confirm, it's not the course name, right? @fcoveram
And having a look at the code, I think this change should be feasible, except for the part where the sidebar is expanded and the button section also needs to turn gray, which might be a bit tricky.

This is just a preliminary assessment, might be achievable with ease, I'll give it a try first once the design is confirmed, and if any issues arise during implementation, I'll discuss them with you then.

Before		After

[fcoveram]

I noticed that Home was changed to the lesson name. Just to confirm, it's not the course name, right?

No. It's the lesson name. "Home" says nothing about what users are seeing. In that vein, I think we should change the breadcrumb label to say "Learn WordPress." This conveys better where users will land once clicking on it and which site section this content belongs to.

And having a look at the code, I think this change should be feasible, except for the part where the sidebar is expanded and the button section also needs to turn gray, which might be a bit tricky.

We can dismiss that change and keep the white background. The color change was to reinforce the submenu section, but we can try keeping the white.

This is just a preliminary assessment, might be achievable with ease, I'll give it a try first once the design is confirmed, and if any issues arise during implementation, I'll discuss them with you then.

Awesome. The before/after assessment is correct 👌

[jonathanbossenger]

@fcoveram, I think this is a great implementation. I would just mention this conversation about the amount of possible content in the facilitator notes. The current width in the screenshots on desktop view doesn't seem wide enough to display that amount of content well.

[fcoveram]

I would just mention this conversation about the amount of possible content in the facilitator notes

Oh, I think I misunderstood the link. Is the whole page content a facilitator note?

The current width in the screenshots on desktop view doesn't seem wide enough to display that amount of content well.

Is your point only about the popover width? If so, we can increase it to look wider and test the final value in development.

[kathrynwp]

@fcoveram

Oh, I think I misunderstood the link. Is the whole page content a facilitator note?

Exactly, the whole page is a lesson plan, which will be turned into "facilitator notes."

Is your point only about the popover width? If so, we can increase it to look wider and test the final value in development.

Jonathan is away this week but I believe the issue is that it would indeed need to be wider to potentially accommodate more content. Thank you!

[renintw]

Hey @fcoveram @jonathanbossenger 👋

Any further thoughts or adjustments on the design, or is it mostly finalized with just the width needing a few tweaks?

[jonathanbossenger]

Echoing @kathrynwp's comment, I just think the popover needs to be wider on a desktop view. I'd advocate for it being at least 60 to 75% of the lesson content area.

I appreciate that the term facilitator notes makes it sound like it needs to display a list of short notes, but in fact the content of those notes are in some cases even more detailed than the actual lesson itself, depending on the lesson content and preparation requirements.