Demo content

[adamziel]

Playground doesn't teach new users arriving at https://playground.wordpress.net/ how and why they can use Playground. All they can see is empty WordPress site.

@akirk had an idea to spin a demo site with some onboarding content by default instead of just an empty WordPress site. While I'm not sure if changing the default site is a way to go, I'm 100% on board with creating a demo site with onboarding content. Let's explore that

Done is

• We have an informed idea of what a useful onboarding site is
• We've built that site
• We've shipped it as a Blueprint in the Blueprints gallery
• We're showing that site to new users in some way that's accessible but probably doesn't involve changing the default Playground

Questions to answer

What's the best way to show that site to new users?

Changing the default site is problematic – it would break the existing https://playground.wordpress.net/ links and embeds. It's also unclear what would happen when ?plugin=friends is present in the URL – would it apply to an empty site? Or to a demo site?

I wonder how to have a cake and eat a cake here – as in both make the onboarding materials obvious and easily accessible AND still have a plain WP site easily available AND not break any existing Playground links.

@fellyph had these thoughts:

My first idea will be to create a URL property called demo, and add some variations, such as baber-shop , yoga or photo-portfolio. But I think it could have some impact if we add another url property, so it could be the less probable solution.
Another solution, before we launch the playground for the first time, we ask the user in a modal if they want to launch a default version without data or a dummy content template, such as a barber shop, a yoga teacher, or a photo portfolio.
To be less intrusive, it can be a toast notification showing in one of the corners, guiding the user to the playground settings panel, to load some of the blueprint templates with dummy data.

To which I've replied:

URL properties are actually a neat idea. We could have something to easily run canonical Blueprints. So that clarifies what’s the first step to include demo content – just add a new Blueprint to the gallery that does that. Then we’d only have to figure out when to open it.
Modals are tempting but they annoy the heck out of people and they almost immediately start asking to remove them
Toast notification is a pretty cool idea, too

cc @fellyph @bph @juanmaguitar @akirk @jarekmorawski

[bph]

For a vanilla Playground instance aka someone uses https://playground.wordpress.net via the browser with no query params or blueprint, I would love to see content about how to use Playground interface and the various features, like Blueprint gallery, blueprint builder, integration with GitHub. One of the options could be to offer various demos (shop, food blog, travel blog, consulting services, appointments). Those demos should come with instructions, to download a zip and how to add it to the next playground session.

As a start, we can organize the browser documentation, recently updated by @karthick-murugan 🎉 and bring it to a WordPress site.

We could call it the Playground site and start with the hello dashboard blueprint example from my workshop and update the content.xml file.

[fellyph]

New users without context won't accomplish as much in the Playground; we are counting on users who already know the project. Talking with @akirk, I got some ideas for the first page work as a landing page, with the following items on the design:

• What is the Playground (with a video)
• What can you do with a playground
• Three examples of blueprints
  • Woocommerce Store
  • Barber shop/Handyman website
  • Blank Canvas(Previous default version)
• Link for the blueprint directory
• Useful links
  • Documentation
  • Slack Channel
  • Github

I have done a test with the WordPress Builder to have an idea of the Landing page for the Playground:

This is a draft of the landing page, as we have an idea of what the landing page will look like. This can provide more guidance to new users and offer new options to those who haven't used blueprints yet. We could first define the elements that will appear on the landing page. The final result can also be used for educational purposes, allowing users to see how to utilize blueprints to set up a landing page.

Regarding the layout, the Blueprints can be listed on the second row before the intro video to give them more relevance. This section could work in the following way: when the user clicks into one of the options, it loads a playground with the URL property to load the respective blueprint. In this case, any person who wants to run a default version loads the playground with the URL property blank.

What do you think about this approach?

[adamziel]

I like all the ideas! Let's do it. We'll need to find a good answer to this question, though:

How do we provide useful content for new users without breaking existing Playground use-cases?

One answer could be:

• Make the demo content the default Blueprint
• Redirect from / to e.g. /?blueprint-url=/tutorial.json
• Avoid redirecting if the user provided any query parameters (?plugin=friends etc.) or their own Blueprint
• Avoid redirecting when Playground is embedded on another site via an <iframe>
• Expose a visible button such as "No, thanks just give me a plain WordPress site"

Poking @akirk and @jarekmorawski for more thoughts

[jeffpaul]

I'd recommend against too much technical bits in the hero section there, meaning remove the WASM bit, and focus more on what someone can do with playground there at a high level targeting a not-super-technical audience broadly speaking. farther down the page can be a section that gets into the more technical aspects.

[akirk]

This is great! I think most of Adam's answers are the way to go:

• Make the demo content the default Blueprint
• Redirect from / to e.g. /?blueprint-url=/tutorial.json Remove in favor of the above
• Avoid redirecting if the user provided any query parameters (?plugin=friends etc.) or their own Blueprint
• Avoid redirecting when Playground is embedded on another site via an <iframe>
• Expose a visible button such as "No, thanks just give me a plain WordPress site" I would propose to just add an empty blueprint to top of the Blueprint Gallery.

Regarding the content:

• It would be nice to emphasize the presence of the Admin bar (see Explore a new design for the playground admin bar #2279) with the demo content and that this means that the user can explore (and even modify) the whole website from the backend.
• A section explaining the Playground UI would be helpful, i.e. the button on the top left, the address bar etc.