Revitalizing the WordPress Showcase

On Wednesday, October 18th, we will update the WordPress Showcase as part of the ongoing visual refresh of WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/

We began this project last year and have continually iterated on the initial design throughout 2023. In the past few months, a team of contributors has worked hard across Figma, GitHub, and the new #website-redesign SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel to get Showcase v2 ready for launch.

While still being actively worked on, you can view the staging site here: wordpress.org/showcase-v2


The Showcase should be a natural starting point when a visitor arrives on WordPress.org and wants to explore what WordPress can do. It should inspire and demonstrate what’s possible, from personal blogs and portfolios to online businesses and enterprise-level sites. The Showcase should be instrumental in answering the question, “Why WordPress?”

Achieving this goal begins with an update to the design and structure of the site as well as the return of Showcase as a top-level navigation link (handled separately). 

These are just the first steps. Feedback and ideas for future iterations are encouraged. Please comment below or raise an issue on GitHub

Design

The new Showcase design follows the general mold of the current Showcase while overhauling the aesthetics and improving the user experience. It emphasizes bold visuals and a more dynamic browsing experience through tags and categories. Individual site pages now include desktop and mobile screenshots, while the site introduces an improved layout on mobile devices. 

A diversity of websites is presented in this initial redesign, from Fortune 500 companies and celebrity fan sites to small boutique businesses and artist portfolios.


This design also paves the way for future iterations. Some ideas include spotlighting popular use cases and introducing more engaging content like “site of the month.” The possibilities are endless. What would you like to see?

Development

While the new design is the most apparent change, Showcase is now powered by blocks. Specifically, it’s a custom child theme that sits atop the WordPress.org parent block theme. This structure allows the site to take advantage of CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. functionality like Group and Query blocks as well as custom blocks explicitly built for WordPress.org. 

The Showcase also introduces new blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-based functionality and several components that will be used elsewhere on the WordPress.org network. Improvements, such as the standardization of layout and spacing variables (#105) and the new Query FilterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. block (#441), will make it easier to update other areas of WordPress.org to blocks.

Content

This iteration of Showcase has primarily focused on design and development. That said, some content work was done to ensure all sites in the Showcase are up to date. 

For launch, 101 sites have been added to the site, many of which were brought over from the current Showcase, or had been submitted but were never actually added. This number will grow with new submissions.

Earlier this year, two Make posts were published regarding the content moderation and submission guidelines for Showcase. You can review both here:

Moderating submissions and maintaining the Showcase takes a significant amount of contribution hours. As a result, there have been times in the past when the Showcase was left somewhat neglected. 

Looking ahead, we need to streamline the submission process as much as possible. Submissions will likely always require manual review, but the rest of the process should be automated where possible. As an example, automated email notifications are currently being explored (#223). This work will take time, but should not impede the launch of Showcase v2.


Thank you to everyone who contributed to this revitalization of the WordPress Showcase, whether in Figma, GitHub, or in the #website-redesign channel in Slack. As with all changes to WordPress.org, this is just a single iteration with many more to come in the future.

If you would like to propose a change or report an issue, please do so in the wporg-showcase-2022  GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repository. Also, make sure to join the #website-redesign Slack channel if you are interested in additional updates coming to WordPress.org and want to contribute.

Props to @eidolonnight, @cbringmann, @annezazu, and @laurlittle for reviewing this post and providing feedback.

+make.wordpress.org/design/
+make.wordpress.org/marketing/

#design, #showcase, #website-redesign

Refreshing the WordPress Showcase

As part of the ongoing visual refresh of wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/, design and layout changes introduced in A refresh of WordPress.org/Showcase have been published to the showcase today 🎉. These changes align with the new design direction already implemented on sections of wordpress.org. The design will continue to be applied to sites over the coming months.

Here’s a brief look at some of the visual changes:

Additional changes include supplementary metadata, simplified submission criteria, improvements to legacy content, and a much-improved mobile page layout.

What’s next?

This redesign is an important starting point to modernize the Showcase site design and theme code that will continue to be iterated. Additional improvements and optimizations to Showcase will be made in the future, including an improved moderation process. If you have any feedback or find a bug, please open a new GitHub issue.

#design, #make-wordpress-org-marketing, #showcase

WordPress.org Redesign Update

This post is a community update on the progress and next steps of the WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ website redesign project. Conversations earlier this year led to the current design direction, which has been applied to the homepage and several other sections of the website. In the coming months, additional websites will be refreshed, with a majority of the wordpress.org websites likely updated by the end of Q1 2023.

The main goal of this redesign project is to apply the updated design direction to all websites across wordpress.org as quickly as possible, making the sites visually consistent. Site content will remain largely untouched. As usual, any future enhancements to website functionality can be requested through Meta Trac. Feedback during the redesign is available in individual website GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issues (see Development Approach). 

The Showcase website will receive a more-significant overhaul of site content and layout, which hasn’t had a significant update in years. Some well-planned past attempts to update the site will help inform changes for this project. Planning and feedback for the Showcase site will be available in a forthcoming Make WordPress P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. post.

Where We Are

Several sites on wordpress.org have already had the new design applied:

  • The WordPress Mobile website received a visual update with minor copy edits made to reflect recent changes to the WordPress mobile app.
  • The Download main page and subpages for release versions and counters were updated to use the new design.
  • Updated the Global Navigation and Footer in September 2022.
  • Homepage implemented the new design and copy in August 2022.
  • The News website implemented the new design in June 2022.

What’s Next

The following sites will be worked on in the coming months. This list is ordered by complexity, not necessarily the order of execution. Many of these sites will be worked on in parallel or redesigned within the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ editor, so the frequency of sites launched with the new design should soon increase.

Lower Complexity Sites:

  • Hosting
  • Enterprise
  • About

Medium Complexity Sites:

  • Documentation (read the recent planning post on Make WordPress Documentation)
  • Developer
  • Learn
  • Five for the Future
  • PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Directory
  • Photo Directory
  • Pattern Directory

Most Complex Sites:

  • Theme Directory
  • Forums
  • Showcase

Development Approach

Redesigned sites will follow the approach of the wporg-main-2022 theme, which uses a new parent theme, wporg-parent-2021. The parent theme provides a design and layout library as a starting point for all sites. All work will be done in repositories in the public WordPress GitHub repository. 

Once this redesign project is completed, additional website enhancements and future redesigns will be straightforward in that all sites will share a common parent theme. Currently, many wordpress.org themes have legacy functionality built into each theme. This project will allow us to better-separate legacy functionality from the theme.

Communication

Since most sites are not intended to have a complete overhaul of functionality and will be functionally similar to the current sites, batched progress on the redesign project will be announced by the MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. team regularly to keep the community informed. 
Feedback and team involvement are welcome in the redesign project GitHub repositories, with iterations able to be made based on community feedback. Sites requiring a larger overhaul (such as the Showcase website) will have their own Make posts to discuss the project and solicit community feedback, which is welcome and encouraged!

#design

Handbook Redesign

The Handbooks are slowly being updated to the o2 theme (Breathe). With this upgrade, I’ve been thinking about how we present our documentation, reference materials, etc. While Breathe was definitely refreshing, there’s still some experience issues I need to work through.

CURRENT ITERATION

Right now, the amount of floating menus on the page is too many. When navigating to a Handbook page there’s a floating menu on the left side, and possibly another floating menu on the right side for in-page navigation. This compresses the initial intro of the document a user might be reading causing some confusion with its odd flow of characters.

Current Handbook

 

PROPOSED ITERATION

I believe we could alleviate some of this by anchoring the left side menu a bit better and structuring these pages to appear more like a true documentation portal. I made a few changes in Inspector within the browser and came up with something like this (b/c of this there’s no mobile version yet):

Handbook

 

Some PROS and CONS are mentioned in a conversation here: https://meta.trac.wordpress.org/ticket/2389

FEEDBACK

Please leave some feedback here in the comments or on the actual ticket. Everything is helpful. I’m personally struggling with the floating right-side menu. There’s been some good ideas for solutions, what’s yours? If you have a few minutes to take a brief survey regarding the Handbook usage, please do! Handbook Usage Survey

 

#design, #make

New Homepage is Launched

There’s been a lot of positive feedback regarding the new homepage development, and I’m excited to say it’s live! While this is only the first iteration, the plan is to continue design and development to create something truly amazing. This is the first step toward that goal. This project moved quickly in hopes to provide something beautiful for the holidays, and I’m proud of this beginning.

Thanks to everyone involved in this process: @rosso99, @sonjaleix, @hugobaeta, @brad2dabone, @matt, @otto42, and the many others who provided feedback!

Take a look and leave some feedback. Just visit the homepage to see the new changes! https://wordpress.org/

+make.wordpress.org/marketing +make.wordpress.org/design

#design, #homepage

New Homepage Redesign

Wow, this is happening fast! During the Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. at WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. US, the Marketing Team sat down with a project in mind—the homepage of wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. Being that the new design style is making an appearance in various places across the site, there was a desire to reboot the homepage as well. @rosso99, @sonjaleix, @hugobaeta, @brad2dabone, and @matt got together to begin creation.

Sketches were presented and thoughts shared.

Collaboration of sketches

Soon the idea took form and Matt expressed the need to get this project live. While much was resolved during Contributor Day, there was still more to go. The design was kicked of by @hugobaeta, and followed up by me (@mapk) and shared via Codepen Prototype.

Quick View of Homepage

Quick view of homepage

Homepage Mobile View

Some things to note:

  1. This is version 1 – we plan to iterate.
  2. The homepage screenshot section is a fixed background so the user sees many examples while scrolling.
  3. The map will show location pins of all WordCamps and Meetups worldwide.
  4. The quick view does not include the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and footer which will be present in the final implementation.

What are your thoughts?

Keeping in mind that this is only version 1 and we’re planning on launching and iterating quickly, please share your thoughts and feedback with us. We’re excited to see what you have to say.

+make.wordpress.org/design, +make.wordpress.org/marketing

#design, #homepage

Plugin Directory User Testing – Round 1

With the advent of the new Plugin Directory, I wanted to get some basic user testing in place to help guide UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. decisions. Props to @designsimply for helping me with the tasks, and to @tellyworth for making sure functionality was up-to-par for testing.

In this test, I wanted to observe the user’s ability to easily find a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, and verify which metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. information helped the user select the best plugin for their use.

Tasks

  1. Find an SEO plugin you think would be the best solution for your website, and talk through the reasons why you’d pick that one
  2. What would be the next step you would take to install the plugin on your site? [Verbal Response]
  3. How was your experience finding this plugin? [Verbal Response]
  4. Locate the Plugin Search Field and search for a plugin that will add an image slider to your website.
  5. Are you able to make an informed decision from the search results page? Why, or why not? [Verbal Response]
  6. If you haven’t already, click on the plugin that you like best to view the details.
  7. Looking at this Plugin Detail page, how do you feel about the content layout and organization? Is there anything you might improve? Is there anything that is unclear? [Verbal Response]
  8. What are the top 3-4 things on this page that influence your decisions when selecting a plugin? [Verbal Response]
  9. Please share your overall experience with this process. Was there anything you’d like to see improved? Was there anything you thought particularly helpful? [Verbal Response]

Video

User Testing Round 1

Notes

  1. [1:48] After browsing, user decides to search for ‘SEO’
  2. [2:07] User looks at ratings as a good indicator for which plugin is best b/c other people tried it out and were satisfied.
  3. [3:17] User still doesn’t seem to have enough information to choose a plugin directly from search results page.
  4. [4:21] User clicked to check negative reviews and ended up at older layout for plugins reviews.
  5. [6:11] User is highly influenced by ratings above all else.
  6. [7:14] User checks “last updated” as well at this point.
  7. [8:33] User would download plugin and figure out how to install it. He didn’t see any instructions in the ‘description’.
  8. [9:09] User uses ‘search’ as an option when he’s “stuck”. He prefers browsing first, and then later searches.
  9. [10:23] User found the Plugin Search quite easily but then gets confused seeing another search field above it in the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.. He expected it to be in top right corner.
  10. [12:21] Not enough info on search results page to make an informed decision.
  11. [15:09] User says layout is pretty typical on the Detail page.
  12. [16:10] Bringing negative reviews closer to the top would be helpful for this user.
  13. [16:30] Top 3-4 things this user relies on for selecting a plugin are: 1. Ratings, 2. Last updated, 3. Description/Feature list, 4. Maybe FAQs?
  14. [18:31] Overall experience was “fine”. Easy to find plugins. Providing more meaningful descriptions would be helpful b/c they all kinda looked the same in the short descriptions.

#design, #plugin-directory, #user-testing

Support Forum Preliminary Mockups

The next revision of the support forumSupport Forum WordPress Support Forums is a place to go for help and conversations around using WordPress. Also the place to go to report issues that are caused by errors with the WordPress code and implementations. design is ready, as we get closer to coding, hopefully by next week! In order to move to the next stage, I want to get these mockups in front everyone to gather comments and feedback. These are definitely preliminary mockups; things can and will change, especially during the implementation phase.

If you haven’t followed along before, take a moment and review the Design Research post and the Wireframes post from earlier.

The Homepage

Homepage

Homepage

Mobile view

Mobile view

Homepage Notes

  • Search is prominent in the blue title bar, which follows the design pattern from the new PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Directory and Get page.
  • 3 columned jump points to various popular documentation destinations.
  • Forums have a grid layout, as seen in the wireframes, but the most recent topic links have been removed. Instead, longer descriptions have been added. The support team can customize these to make it easier to locate the relevant forum and dive into it, without be overwhelmed with text.

Forums page

Forums page

Forums page

Mobile view

Mobile view

Forum View Notes

  • Two columns in the table now use icons instead of text descriptions to minimize their width. This should reduce wrapping of the topic title.

Topic/Discussion page

Discussion page

Discussion page

Mobile view

Mobile view

Discussion page Notes

  • The initial post is given a grey highlight, to separate it from replies.
  • If the post has been resolved, it’s marked as such and the specific answer is noted with a green checkmark.

Search results

Search results page

Search results page

Mobile view

Mobile view

Search Results Notes

  • As of right now, search will be use the built-in bbPressbbPress Free, open source software built on top of WordPress for easily creating forums on sites. https://bbpress.org. 2 search, so it will only return forum posts in the results.
  • If the user doesn’t see an answer or post about their question, there’s a button to quickly move this into a form for creating a new discussion.

Feedback

I’d love some some feedback on these mockups! Feedback on anything is great, but in particular I have a couple of questions:

  • Should comments from moderators, authors, and plugin authors have a different style than regular comments?
  • Where should the “All Topics” and “No Replies” links go? Perhaps on the homepage?

Leave your feedback below and let us know what you like and don’t like. 🙂

#design, #forums

Support Forum Preliminary Wireframes

After looking through the feedback from the initial forum design research, I began to create wireframes to help organize some of these ideas. Forum design is pretty standard across the web, and features don’t vary much either, so building out wireframes proved to be a straightforward task.

I wanted to stick with something basic and build from there. The forums and the topic/discussion pages are simple and straightforward. I worked through some layouts for the Support homepage and played around with the display of content in different ways.

The Homepage

Homepage

Homepage

Mobile view

Mobile view

  • I made the search more prominent on the homepage. Rather than diving down into the forum topics, people are more likely to search for their issue instead.
  • I provided three very prominent sections at the top for the ‘Welcome’ intro, a link to the Codex (documentation), and a third link, possibly to the Support Handbook.
  • Below those jump points, the forums are separated out and grouped with their 3 most recent topics. This was done to help with discovery and ensure users find the right forum. I determined that, if the topic was popular enough to continue getting activity, then others coming to the Support page might also relate to that topic.
  • The post tags are moved to the bottom along with other useful links.

 

The Forum Page

Forums page

Forums page

Mobile Wireframe - Topic page

Mobile view

  • The layout comes with the new subnav that’s being implemented on other parts of the site. This includes a search field, and the three main subnav links.
  • The title of the forum is on the left top with a description under it.
  • The list of topics in the table below display the topic title, author, author avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name., number of participants, number of replies, latest person who replied with their avatar, and the date.
  • Below the list, if logged in, you’ll see the form to add a new topic. Otherwise, you’ll see a call to action to login and add a new topic.
  • The sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. has been moved to the right. Primary content in LTR languages should be on the left, while metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. content should be on the right. The sidebar includes: number of topics/discussions, number of replies, Last reply, and last activity.

 

The Topic/Discussion Page

Discussion page

Discussion page

Mobile view

Mobile view

  • This page would include a breadcrumb nav to help orient the user to their location given that it’s deeper than two levels.
  • The title of the forum is below that.
  • The initial question is a highlighted box which includes the user’s question/title, the user info, and the detail of the question/topic.
  • The comments are displayed below in a simple layout.
  • If logged in, there will be a reply form below.
  • Sidebar includes: number of replies, number of participants, last reply (user), last activity (date), and ‘favorite’ option.

 

The Search Results Page

Search results

Search results

Mobile view

Mobile view

  • The question is predominantly displayed at the top.
  • Search results are displayed below with pertinent information like title, desc., author, date, etc.
  • Pagination
  • Sidebar includes ability to convert the search query into a proper question (‘Ask Question’ button). Most likely transfer the user to a form page where the user can select which forum this question should be posted in.
  • Sidebar also includes recent forum posts and additional meta data.

 

A Call for Feedback

I’d love to hear what you think about the wireframes. Please leave some feedback below! 🙂

#design, #forums

Forum Design Research

As some may have noticed there are efforts to improve the support forums on WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. In addition to the backend changes, this seems like a good time to make some design upgrades as well. To kick things off, I’ve done a bit of research into various forum designs in use online (similar to the web store explorations for the plugin directory).

If you’re interested in the forums, please take some time to review the research here and leave your feedback. What stands out from these examples as something you’d like to see implemented on WordPress.org? Which design feature is your favorite and why?

Feature comparison

Feature comparison

Below are some screenshots from each of the forums reviewed.

Non-bbPressbbPress Free, open source software built on top of WordPress for easily creating forums on sites. https://bbpress.org. Support Forums

bbPress Support Forums

Thank You

Thank you for your feedback! If there are other forums designs you’ve seen on the internet that should be reviewed, leave a comment here, along with any other feedback you have.

#design, #forums