Overview Issue: Homepage of WP.org

[pablohoneyhoney]

This is an overview of identified issues that relate to homepage https://wordpress.org. Mobile is indicated where applicable (tested in Safari, iPhone Pro Max). When no indication, both desktop and mobile apply.

Overall

We’ve had the current homepage for a bit, and I think we can take some learnings for when we have an opportunity to explore a refresh. So there's some deeper work work highlighted below but also some fixes we should address asap.

It's fairly static of a page to be the main or first one. We shall consider video (like for the editor) as well as surfacing here video content that portrays a more moving, active project (perhaps announcing the principal upcoming event?).
It seems also very disconnected from the rest of pages it links to. ie: how we introduce the editor doesn't connect with how we talk about it in each own /gutenberg page. Same with the Showcase, we don't say Showcase.

The overall language seems to be fairly plain. While we want to reach a wider audience, we are loosing a bit of that dev character in the verbiage. More pro. It portrays a sense of the wrong lightness when it's a historic, large, powerful project.
We don't mention the freedoms or freedom license when it's basically the essence of it all. We used to say "Beautiful designs, powerful features, and the freedom to build anything you want. WordPress is both free and priceless at the same time." Which is still a much clearer description.
We don't intentionally or clearly link to the where the open happens. Github does a good job with this. Or show which large brands work on WP, or a Matt quote. Like giving it much more validation and substance. It all reads a bit amateur, when we are THE platform. WP should feel like the OS of the web.

The Swag Banner

• Swag Banner needs to be clickable as a full module.
• Right now the only clickable element in a URL that reflects as a button/link when hovered. We need to add a clearer button or link.
• The products in the Swag Banner are laid out strangely in scale and proportion, also the shadows can be better and consistent.
• In smaller desktop viewports, the banner pushes everything down too much. Could be less tall. In mobile it's even more obvious.
• The copy say Show your wp20 excitement, but it doesn't explain it's the anniversary. Without making the copy too long, it'd be good to bring slightly better awareness of it. Text and call to action needs to be more specific, even for unawareness. Celebrate the 20th anniverssary with new swag. Show off WordPress 20th with fresh swag. Or alike.

Top heading

• Shall we mention the current market share %?
• Generally, this top heading is light, it could carry more weight functionally. Like guide people to learn the latest news? Or get involved? As a secondary button.
• And we aren’t mentioning blog here or we are shying away from it on purpose? It's only mentioned once as a “personal blog” down the page, when many enterprises leverage WP for their blogs and journals. Are we also missing other keywords? We used to say "WordPress is open source software you can use to create a beautiful website, blog, or app."
• The line height could be a bit tighter. This is a general rule for all headings in the page.
• With the current copies, not sure we are opinionated enough about the moral imperative to be open and contribute to it. And the business value. Worth a spin on content options.

The editor module

• Let's explore a different graphic or video? The current doesn't really represent anything about the editor. It's generic.
• In mobile, the graphics are laid out strangely, it's not clear what it is.
• We don't say clearly editor, we seem timid here. We should own this saying like this is the best editor, more used, more stable, more everything.

Features module

• This is the real meat of the platform aside of the editor, and we lay out timidly. Could be bolder visually. The graphic also is timid with styles. Each point could have its own.
• If we link to themes and patterns, we should also do so with plugins. And the license. And to Make or showing where the community is working.

The Showcase module

• The enterprise brands are different than https://wordpress.org/enterprise/ we should align them.
• We don't link to https://wordpress.org/enterprise/, we likely should if we show the brands.
• We don't mention Showcase, we should (again, to connect things more directly).
• There’s a visual bug in the images, the radius isn’t consistent.
• The width of the screenshots are also super wide (can be narrower, and show mobile views, mixed), and cut strangely so the content or the brands aren't clear.
• Another example of boldness, the text is very timid, plain verbally. When we could say that the largest, more beautiful, and more popular sites run on WP.
• Visually, the sites can be bolder too. The visual assets should have more visual weight in the page, and provide the option to link to the web in a new tab.
• The sites could be moving, like in Semplice.
• In mobile, these visual devices are extremelly small. Worth giving them the deserved weight.

Community module

• Pic shall be retina ready.
• We should also fix the top border embossed effect.
• The use of brush stroke is not as refined as it is in the /news section. The rest of the page graphics look sharper and the stroke itself is perhaps a bit too messy. It makes the whole page disconnected.

News section

• Could be more connected to the scale titles of https://wordpress.org/news/all-posts/ or to the Help/support one.

Misc

• The language banner is in an unconventional position, worth trying at the top below top bar.
• For some reason, since recently I'm not seeing this banner anymore. Which had some feedback here: Overview Issue: General Elements of WP.org #221
• When multiple official languages are available in the locale, let’s list them equally. And use the same capitalization (not consistent in Spain, for example).
• As mentioned above, there is a bit of a stronger validation module missing. Or sprinkled throughout. Or both.
• The scales of texts are a bit uncanny (I couldn't figure out the logic of H1, H2, etc visually) but also need better hierarchy. At times the title is almost equal as the paragraph or link. Conversely, some modules have huge scales.
• This is likely subjective and informed, but the colon punctuation construct in the title reads strange to me. The most common use is of colon is to amplify the concept written before the punctuation, but here we do a call to action (speaks to me). The more natural flow to me would be like "WordPress: the open software and community running the web", hopefully something shorter, but just to clarify the point.
• Community image, the powerful and empowering crop, and the dream it build it background feel low resolution still, on a retina screen. Ever so slightly uncrisp. If there’s a performance issue in terms of filesize, we should explore alternatives, either fewer images, or embracing flatness so the PNGs can have higher compression.
• There's a disparity of button styles across the page, without a noticeable logic. When parsing the page, I should be able to identify the main triggers equally.

[bengreeley]

@thetinyl ccing you on this issue since many of the comments have to do with content updates for the homepage. We can discuss during our weekly call this week, but I wanted you to be looped in.

[bengreeley]

Thank you for coming up with this summary. I looked through the comments, and the only ones that stand out as possibly already being done are the following. For the rest, let's discuss what makes sense for an approach. Most of these changes seem like they would be fairly straightforward content and/or design updates. I'll list the development tasks below.

Already completed:

• For some reason, since recently I'm not seeing this banner anymore. - I'm able to see this at wordpress.org. Which URL were you on?
• When multiple official languages are available in the locale, let’s list them equally. And use the same capitalization - this appears to be fixed in the original issue and I can see consistent capitalization screenshot below)

Other development tasks:

• There’s a visual bug in the images, the radius isn’t consistent.
• Swag Banner needs to be clickable as a full module.

[ryelle]

since recently I'm not seeing this banner anymore.

What do you see at https://wordpress.org/lang-guess/lang-guess-ajax.php?uri=/&debug=true ? That'll show what the suggestion tool is using to make suggestions. It uses either your IP (geolocation) or if you've set your browser to use multiple languages. If you're in the US, and never customized your browser's language support, you won't see any suggestions.

[ryelle]

We shall consider video
The sites could be moving, like in Semplice.

Just want to flag that any video or moving element we use should either be paused on load, or have a very clear way to pause it, for accessibility.

While technically we can use prefers-reduced-motion for something like the moving sites, it's a large enough component on the site that it could cause some real problems (vertigo, migraines) for users who don't know about that setting. I'm happy to chat about other alternatives for this, though.

Swag Banner needs to be clickable as a full module.
Right now the only clickable element in a URL that reflects as a button/link when hovered. We need to add a clearer button or link.

If we make the whole element clickable, we shouldn't nest any clickable items inside, so we should only go with one of these suggestions. If we want the whole element to be clickable, we'll need to create a new container-link block — but this has come up before, so we'd need to make this eventually.

[StevenDufresne]

@WordPress/meta-design How do we want to coordinate on this? The majority of this feedback requires design.

Does it make sense to break the sections down into their own tickets or does a figma iteration make more sense?

[jasmussen]

I've a bit on my table this morning, but it is definitely my intent to break out and expand each item here with additional context and screenshots when possible, like we did with the other overview issue.

[StevenDufresne]

Great, if you can, try to assign any issues to the checklist on creation so we can better track progress in real time. 👍

[jasmussen]

I extracted this swag comment into a separate issue: #258

Previous comment

Expanding with a little additional context or screenshots.

Swag Banner needs to be clickable as a full module.

That's this one:

I'm not sure the technically best way to accomplish this given it's in the block editor, but one way to do it would be to link the image to the mercantile site, and then change the heading + paragraph + link into one big link, with large text and curated underline inside.
Another approach could be to add a link with a custom CSS class, then use custom CSS with the text-indent hack (text-indent: 9999px) to hide the text visually, then abs-position that link to cover the entire box. Accessibility wise, you'd just want to author the link with descritpively useful text, then omit the actual hyperlink from the "mercantile" spelled out link in the text that follows. Custom CSS should be available in Global Styles now, so you could create a helper class to handle it.

Right now the only clickable element in a URL that reflects as a button/link when hovered. We need to add a clearer button or link.

The most basic solution I can think of is to just underline the link always:

Another option would be rephrasing the text a little bit, and making the link into a button:

Note that we'd still want the whole module clickable.

The products in the Swag Banner are laid out strangely in scale and proportion, also the shadows can be better and consistent.

In smaller desktop viewports, the banner pushes everything down too much. Could be less tall. In mobile it's even more obvious.

The copy say Show your wp20 excitement, but it doesn't explain it's the anniversary. Without making the copy too long, it'd be good to bring slightly better awareness of it. Text and call to action needs to be more specific, even for unawareness. Celebrate the 20th anniverssary with new swag. Show off WordPress 20th with fresh swag. Or alike.

This one is a bit tricky since the media & Text banner needs to scale to mobile. But here's a tweak that rearranges things a bit, rephrases, makes it less tall, and tries to tie it all together. Desktop:

• Facing, simpler illustration
• Stacking so that shadows shouldn't be needed but let me know if I got this wrong
• Simpler, smaller text, more context, 240px tall.

Mobile:

• Should still be feasible to build this using the Media & Text block
• About 370px tall

It's likely going to be a challenge to make this substantially smaller, due to how the responsiveness is built-in to the block. If we need a different approach here, let me know any technical ideas you might have.

[StevenDufresne]

I'll ask the tough question, :), is this worth our effort? At what point will this banner be removed?

[StevenDufresne]

If we think it it will improve conversions, great! I think a quick test would just be to add a button and see what happens to click through rates.

[jasmussen]

It's worth effort, yes, since it's the homepage. To me it's less about clickthrough rates, and more about ensuring we have an outward appearance of quality and care, since it reflects on the blogging software itself.

Are there changes you could consider that would make it simpler to implement? If it's the click aspect, it seems like making the image clickable, and making the entire text clickable, both should be fairly easy to implement, even if that solution ends up not technically being the whole banner.

[jasmussen]

Related to the conversation on the homepage, this conversation is relevant.

[jasmussen]

About the language bar, these three:

The language banner is in an unconventional position, worth trying at the top below top bar.
For some reason, since recently I'm not seeing this banner anymore. Which had some feedback here: #221
When multiple official languages are available in the locale, let’s list them equally. And use the same capitalization (not consistent in Spain, for example).

I'm seeing the language bar with two of my nordic neighbor languages, all appropriately capitalized. I believe @ryelle addressed the capitalization recently, so if you are seeing otherwise let's resurface, but otherwise I think two of those boxes can be checked.

Extracted conversation about moving the language banner into #264

Previous notes

As far as moving the language bar to the top, here's what it would look like, with and without any situational feature banner:

I think this works, personally. I vaguely recall some prior conversations around why it was moved down, @ryelle do you recall? Depending on that, I think we can move forward with moving it above the main banner. Let's do this for any subpages as well.

[ryelle]

I vaguely recall some prior conversations around why it was moved down, @ryelle do you recall?

No, I believe the first mockups I saw had the bar below the header— I assumed because that was the layout of the old site.

I think we can move forward with moving it above the main banner. Let's do this for any subpages as well.

Can you split that out into a new issue, one here & one on wporg-documentation-2022? Those are the only two sites using this right now.

[sereedmedia]

This has a related issue in marketing here per the main introduction section: WordPress/Marketing-Team#205

It would be amazing to incorporate the results of the marketing ticket into this ticket.

Also, happy to get other tickets going in marketing to get content and Calls To Actions happening as needed.

[sereedmedia]

Just pinging here to see if there is movement on this. @jasmussen, any updates on this?

[pbearne]

A thougth:
As WP gains full site editing, it becomes a no-code / low-code solution. But it retains the ability to be customized via code (unlike other no-code solutions)
Could we create a line along the lines of
No-code to No-limits
I looked at no-code to all-code/full-code but no-limits runs better I think