Title: Improve UX and Fix Broken Links on Default Playground Welcome Page #139
Description
Description
The default welcome page for a new WordPress Playground instance has a few usability issues that can confuse new users. This issue outlines three specific areas for improvement: broken links in the Blueprints Gallery, a potentially confusing "Blueprints Directory" button, and unclear link text for the project's mission.
1. Broken Links in "Explore Blueprints Gallery"
Problem:
The links associated with the example blueprint images ("StylishPress", "Woocommerce Store", "Blank Canvas") are broken. They appear to be pointing to a URL relative to the Playground instance (e.g., playground.wordpress.net/link), which doesn't resolve correctly.
2. "Blueprints Directory" Button Points to GitHub
Problem:
The "BLUEPRINTS DIRECTORY" button at the bottom of the page links directly to a directory in the GitHub repository. For a non-technical user, this is not an ideal destination. They are likely expecting a user-friendly gallery or a curated page, not a list of files.
Proposed Solution:
Change the destination of the "BLUEPRINTS DIRECTORY" button. Instead of pointing to GitHub, it should link to a more user-friendly Blueprints Gallery page on the main website. If such a page doesn't exist, this button might be premature, but linking to a "Learn More About Blueprints" documentation page would be a better alternative.
3. Vague Link Text for Project Mission
Problem:
At the bottom of the hero section, the link text Find out more? Learn more about the mission? is a bit vague. It doesn't clearly state what the user will find when they click the link.
Proposed Solution:
Improve the link's "information scent" by making the text more descriptive. Suggestions:
- "Learn more about the WordPress Playground mission."
- "Discover the mission behind Playground."
- "What is the Playground Project? Learn more here."
This sets a clearer expectation for the user.
4. Add "Learn More" Link for the CLI Tool
Problem:
The "Run Playground in your terminal" section introduces the local CLI tool but provides no link or button for users to get more information. A developer interested in this feature has no clear next step.
Proposed Solution:
Add a "Learn More" button or link below the npx command. This link should direct users to a resource with more detailed documentation. The GitHub repository's README for the CLI tool would be an excellent destination.
5. Enhance Copy for the PHP Playground Section
Problem:
The copy for the "Test Our Brand New PHP Playground" section is functional but undersells the significance of the feature. The ability to run PHP in the browser is a major technical achievement and a key selling point.
Proposed Solution:
Revise the copy to better emphasize why this feature is so special and powerful. Highlight that this is "PHP running entirely in your browser," which enables instant, shareable, and safe code prototyping in a way that wasn't previously possible.
6. Clarify "Playground Blog" Link in Footer
Problem:
In the footer, the "Playground Blog" link's destination is not immediately obvious. The annotation ... on make.wordpress.org ? suggests user confusion about whether this is a standalone blog or part of the official Make WordPress blog.
Proposed Solution:
Review the destination and text of the "Playground Blog" link. If it links to the make.wordpress.org blog filtered by the "Playground" tag, consider renaming it to something more descriptive like "Project Updates on make.wordpress.org" to set clear expectations.
Summary of Tasks
- Correct the URLs for the "StylishPress", "Woocommerce Store", and "Blank Canvas" blueprint examples.
- Update the destination of the "BLUEPRINTS DIRECTORY" button to a more user-friendly page.
- Revise the link text for the "mission" link to be more descriptive.
- Add a "Learn More" link to the CLI tool section, pointing to its documentation/README.
- Revise the marketing copy for the PHP Playground section to emphasize its uniqueness.
- Clarify the text and/or destination of the "Playground Blog" link in the footer.