-
Notifications
You must be signed in to change notification settings - Fork 123
Description
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
Metadata
Metadata
Assignees
Labels
Type
Projects
Status