New Theme: "Practice on a private demo site" is distracting.

[StevenDufresne]

Description

When viewing a course, there is a really prominent and verbose button that says "Practice on a private demo site".

The ultimate goal of this page is to get users to click "Take this course" and this detracts from that purpose.

Can we find a better place for this or only show it after they have subscribed to the course?

Screenshot

@WordPress/meta-design @jonathanbossenger @westnz @kathrynwp @bsanevans

[westnz]

only show it after they have subscribed to the course?

Good idea

[jasmussen]

Good observation. It makes me want to ask: what purpose does the button serve? What does it do differently from the main "Take this course" button?

Separately, it seems we have two big blue "Take Course" and "Take this Course" CTA buttons. Can we have just the one? And should it be "Take course" (lowercase c) or is there a good reason we are capitalizing "Course"?

[adamwoodnz]

Separately, it seems we have two big blue "Take Course" and "Take this Course" CTA buttons. Can we have just the one?

The current (old) theme doesn't have the CTA in the sidebar, hence the need for it in the content. This will need to be cleaned for launch unfortunately. We could hide it in the meantime, but then we might miss it later...

And should it be "Take course" (lowercase c) or is there a good reason we are capitalizing "Course"?

There is a mixture of case use around the site for both course and lesson. It's not clear to me what the rules are.

[fcoveram]

And should it be "Take course" (lowercase c) or is there a good reason we are capitalizing "Course"?

There is a mixture of case use around the site for both course and lesson. It's not clear to me what the rules are.

If I remember correctly, we're following the "sentence case" rule. But in this case, and since Course and Lesson are content types, it should be "Take Course".

What would be the best practice for this @thetinyl ?

[jonathanbossenger]

It makes me want to ask: what purpose does the button serve?

In the context of the course landing page, nothing much.

That button does however have a bit of history, at one point it was linked to InstaWP, and when WP Playground was added, a link to that was added. However, at the time, it just opened a default InstaWP or WP Playground instance, without any relevant context or content related to the course lesson or tutorial. Having this button made more sense for tutorials but not for courses. After some feedback from the community, InstaWP was removed.

The original purpose of the WP Playground button was a) to give folks an alternative to InstaWP to try and b) to promote WP Playground across Learn WordPress.

With the merging (and current testing) of the Playground block, I'd rather advocate for instances of the Playground block being used for practical activities for course lessons embedded from specific locations in modules or lessons.

It might be more useful to the learner to move this button to the sidebar in the Lesson view, as that's where someone will be viewing lesson content and might want to try it out in a Playground instance. The problem is that the longer the list of modules and lessons in a course is, the more likely that button will be missed.

If we (the training team) want to promote folks to use WP Playground more generally by adding a button to the course landing page, moving that button under the License section makes more sense.

[thetinyl]

As far as I'm aware, courses and lessons as content types are still regular nouns for a visitor. They should be lowercase. 👍

[marko-srb]

By points:

1. Take Course duplicates. I think we should hide the 'Take Course' button on the left for desktop, but activate it for mobile (so it's on top), unless there's already a solution that works better for mobile.

2. 'Practice on a private demo site' button. I'd leave this on the page for the time being, especially since it is about Playground (meaning it was considered in more depth when placed there). My two cents: while I am navigating the course, I really would like to have that button always near my hand to click, so I like it being there actually — and I wouldn't do anything to it. In case you all still would like to do something about it, we can consider making it a bit smaller focus (no button, but a link, and nested lower) after the launch. For now, I strongly think it should stay as is.

[adamwoodnz]

Sounds like we're ok for launch, so moving to post launch to see if we want to go any further with placement or style.

[jonathanbossenger]

My two cents: while I am navigating the course, I really would like to have that button always near my hand to click, so I like it being there actually — and I wouldn't do anything to it.

I think it's important to note that while navigating the course, you enter the course view mode, in which the Practice on a private demo site doesn't appear anywhere. This is only on the course landing page, so folks haven't even got content to practice with yet. When they are taking the course, and they do have content to practice with, we'll be implementing the Playground block inside lessons for them to practice on.

[marko-srb]

@jonathanbossenger

I think it's important to note that while navigating the course, you enter the course view mode, in which the Practice on a private demo site doesn't appear anywhere. This is only on the course landing page, so folks haven't even got content to practice with yet. When they are taking the course, and they do have content to practice with, we'll be implementing the Playground block inside lessons for them to practice on.

I'd say it should work nicely even if it is not in the lessons. I finish the lesson, I come back to the course with lists of lessons and I can test things I learned as I have button screaming at me :)

Great on the adding Playground block inside the lessons. I'd say once that's implemented we maybe can get rid of the button.

[adamwoodnz]

We're post launch now, is this something that needs attention still?

IMO the button being secondary style means it isn't that prominent, although I agree the text is verbose. Promoting Playground seems valuable. Options seem to be:

1. Move below license
2. Only show if enrolled or completed
3. Change text
4. Leave as is
5. Remove

[fcoveram]

Thanks for keeping this in the radar. I'm drawn to go with keeping it in the same place but as a link.

Linking to Playground adds value to visitors, but the current design makes it look that it relates to the Course. Landing on Playground loading page feels detached from the Learning purpose.

I can work on a design showing what I have in mind in the following days.

[adamwoodnz]

At least one visitor finds it valuable

[westnz]

I also saw that, Adam! 😆

[fcoveram]

Here is an idea for this

---

The following changes were applied:

• The transparent with border button was removed.
• A paragraph promoting Playground below the course data was added.
• The link Playground takes users to https://wordpress.org/playground/ in the same tab. This is because the current link does not add context about what is Playground, and the temporary site has nothing to do with the Course users are seeing.
• There is a separator between Playground paragraph and the next two sections (Suggestions and License).
• There are spacing fixes to balance the visual relationships of content that will be updated in the designs once we agree on a version.

What do you think of this?

[thetinyl]

A paragraph promoting Playground below the course data was added.

The language on the current button would still work for the treatment you're proposing @fcoveram. I suggest keeping it mostly the same since it'll be a more impactful call to action in the context of the course:

"Practice on a private demo site right in your browser with WordPress Playground."

Otherwise, this looks nice.

[westnz]

Very nice @fcoveram. Thank you!

The link Playground takes users to https://wordpress.org/playground/ in the same tab. This is because the current link does not add context about what is Playground, and the temporary site has nothing to do with the Course users are seeing. I would still suggest it opens up in a new tab, as it will take learners away from the course.

Please note, we have removed 'Average days to complete' from the site.

[fcoveram]

I suggest keeping it mostly the same since it'll be a more impactful call to action in the context of the course: "Practice on a private demo site right in your browser with WordPress Playground."

Perfect

I would still suggest it opens up in a new tab, as it will take learners away from the course.

No problem. I will include the ↗ character at the end of the text to convey this behavior.

Please note, we have removed 'Average days to complete' from the site.

I will remove the item to avoid confusion. Thanks!

[fcoveram]

All changes were applied and are visible on the Design page of the Figma file.

[thetinyl]

I wonder if we can put a non-breaking space to keep "WordPress Playground" together, then we won't have that orphan there.

[fcoveram]

Thanks for the suggestion @thetinyl. If I remember correctly, we have applied a text balance via CSS before, which also seems to fit here.

[thetinyl]

we have applied a text balance via CSS before

Oh, right, of course! Never mind me. 😅