Lesson List on Course Single Page and Course Completed Page

[renintw]

Update the Lesson List style on the Course single page and the Completed page. Some details moved from here:

No further change has been discussed. But from the screenshots, I notice two use cases: Not started, and Completed. If there are more, can you share them?

Yes, there are three cases. Not started, In Progress, and Completed.

In Progress & Not started	Completed

do we have room to improve this elements?

I think we can make changes, but I will open another ticket to handle it, as other than the statuses "Not Started," "In Progress," and "Completed," it looks like there are two different ways to present lessons: lessons that belong to a module and those that do not. Lessons that belong to a module have a blue border and a blue header. Those without a module only display the lesson name.

Lessons without a module seem to be very few in production, but there are still some, although they were created quite a while ago. Whether to consider these needs to be discussed with the training team (~I plan to ask about this in the new ticket~ Update: see https://github.com/WordPress/Learn/issues/2531#issuecomment-2162368470).

Additionally, the "course completed" page also displays this lesson list, which I reckon needs to be changed as well.

Update

Preview Button (When a user isn't enrolled)

Not belong to a module	Belong to a module

[renintw]

@WordPress/learn-team Is it possible for a lesson to not belong to a module? I haven't seen this for recently created lessons, but I've noticed it's the case for some older lessons. This could affect how a lesson is rendered.

Update

Lessons belong to a module: https://learn.wordpress.org/course/beginner-wordpress-user/ Not belong to a module: https://learn.wordpress.org/course/wordpress-community-team-program-supporter-tasks/ ⬆️ Just found this course, it seems that lessons not belonging to a module currently exist and have been added to a course and there might be more in the future. So it seems to me this needs to be considered in the design. cc @fcoveram

[jonathanbossenger]

@renintw agreed. We have not created stand-alone lessons recently, but we would like to have the ability to have stand alone lessons that would be rendered on their own.

[fcoveram]

I took a look at this and here is an idea I made based on the screenshots attached in the first comment.

Users not enrolled

Interaction

Here is how the interaction could work

---

Notes

• The "Preview" pill does not provide any new information, and clicking on it takes you to the same page as those without the pill.
• The progress bar has a new style for Not started, In progress, and Completed. If we go with this version, we could apply it to all places where it's visible.

What do you think of this @renintw? Here is the section in Figma where all mockups are. If this works, I plan to update the mockups in Design

[renintw]

Lesson list on a course page

I'm still not sure if the "in progress" status of a lesson can be retrieved on the course page. If it can, what do you think if we move the black semicircle indicator to the bottom for consistency, or to the left side?

Lesson list on a lesson page

[renintw]

The "Preview" pill does not provide any new information, and clicking on it takes you to the same page as those without the pill.

I've looked into it a bit and it turns out the "Preview" pill comes from this setting of a lesson post. If it's not checked, there won't be a "Preview" pill:

Preivew option	If not checked

Logged-out users will see the following when clicking on it (No content display)	For logged-in users, it will look like this

ref: https://learn.wordpress.org/course/developing-your-first-wordpress-block/

Note

1. The sign-in button style needs update. On production, it looks like: cc @adamwoodnz

2. Do you think this eye icon needs to be displayed in the Lesson list on a course page, as it shows in the Lesson list on a lesson page?

Lesson list on a course page	Lesson list on a lesson page

[renintw]

@fcoveram Thanks for the design update! They look great, except for a few questions being brought up above.

The progress bar has a new style for Not started, In progress, and Completed. If we go with this version, we could apply it to all places where it's visible.

I'd also like to know @adamwoodnz thoughts on the updated progress bar and other updated design.

[adamwoodnz]

I'd also like to know @adamwoodnz thoughts on the updated progress bar and other updated design.

LGTM!

[fcoveram]

I'm still not sure if the "in progress" status of a lesson can be retrieved on the course page. If it can, what do you think if we move the black semicircle indicator to the bottom for consistency, or to the left side?

Done. I moved it to the bottom

I've looked into it a bit and it turns out the "Preview" pill comes from this setting of a lesson post. If it's not checked, there won't be a "Preview" pill:

To keep consistency, I included the lock-outline icon from the WordPress library. Here is a screenshot of the mockup added.

On the other hand, I cleaned up the sections in the Design page to distinguish between mockups for Courses and Lessons. In each, I included the sidebar and lesson list variants for courses as assets.

I hope this works. Let me know if I'm missing something.

---

Regarding your notes

The sign-in button style needs update. On production, it looks like: cc @adamwoodnz

I would go with something very simple. Put the sign-in button next to the blue one with the same style as the “Practice on a private demo site” button on the course page.

Do you think this eye icon needs to be displayed in the Lesson list on a course page, as it shows in the Lesson list on a lesson page?

I couldn’t find a Lesson showing this. Can you share a link to understand the context?

[renintw]

Do you think this eye icon needs to be displayed in the Lesson list on a course page, as it shows in the Lesson list on a lesson page?

I couldn’t find a Lesson showing this. Can you share a link to understand the context?

sorry that I missed attaching an example for that one: https://learn.wordpress.org/course/beginner-wordpress-developer/

[fcoveram]

Awesome. Now I understand.

Do you think this eye icon needs to be displayed in the Lesson list on a course page, as it shows in the Lesson list on a lesson page?

Not really. The eye is redundant as the link itself conveys the preview action.