Homepage: Showcase CTA Improvement

marko-srb commented 10 months ago

Context: As the launching of Showcase v2 is getting closer, we are envisioning updating a CTA section on the hompage as well, in order to follow the updated content.

This is a light update suggestion, without major layout changes.

Here is the Figma link.

Here's a comparative view of live section, next to the suggested changes. These should include:

Copy edits (so 'starry elements' of the new showcase are present here, and hopefully inviting)
New website selection/screenshots
New logos (some of the old ones aren't on WP anymore - Vogue, for example)

GH issue

Note. Ideal behavior on the mobile is to hide first row of dots. If not possible, can we hide dot-starry-pattern once the responsive size gets to mobile?

CC: @thetinyl @jasmussen @ndiego

marko-srb commented 10 months ago

There are some title ideas in the file itself.

@thetinyl would you mind trying something along these lines for the title, and adjusting the paragraph to connect?

Copy Inspiration

ndiego commented 10 months ago

I think the dot layout should be relatively easy to accomplish. Here is some demo code:

<!-- wp:group {"align":"full","style":{"spacing":{"padding":<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"backgroundColor":"contrast","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-contrast-background-color has-background" style="padding-right:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:cover {"url":"https://cldup.com/o3gBGnbYgL.svg","id":422,"isRepeated":true,"dimRatio":0,"customOverlayColor":"#FFF","minHeight":124,"contentPosition":"top left","align":"wide","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"className":"has-dots","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignwide is-repeated has-custom-content-position is-position-top-left has-dots" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;min-height:124px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#FFF"></span><div role="img" class="wp-block-cover__image-background wp-image-422 is-repeated" style="background-position:50% 50%;background-image:url(https://cldup.com/o3gBGnbYgL.svg)"></div><div class="wp-block-cover__inner-container"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#3858e9"}},"fontSize":"medium"} -->
<div class="wp-block-button has-custom-font-size has-medium-font-size"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#3858e9">Find Inspiration</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

It just needed a custom CSS class on the Cover block. This might need some fine tuning, but I used:

.has-dots .wp-block-cover__image-background {
    background-position: 0 27px !important;
    background-repeat: repeat-x;
}

thetinyl commented 10 months ago

Thanks @marko-srb. I've shared my copy suggestions in Figma. I actually think the current headline (with a conceptual tie-in update) is pretty strong already.

I have some thoughts around the company logos based on your updated version (this is assuming these are your suggested replacements):

Sony Music is no longer in the showcase, so we should replace... some options could be: Harvard, NYT Company, TechCrunch
This is a personal opinion, but do we think it could be worth swapping some of the logos that are really just WP blogs (Spotify, Meta, Microsoft) for companies that are using WP for their whole site? There are a few other brands that are relatively well-known (I think) in different industries that could work: noma, Momofuku, Capgemini, for example. Not saying we should replace all those big tech names, but it feels strange to be leaning on a brand only because their blog is powered by WP.

ndiego commented 10 months ago

I actually think the current headline (with a conceptual tie-in update) is pretty strong already.

I agree. While I like the starry theme in concept/visually, the current headline is straight to the point. The Showcase demonstrates the possibilities that WordPress provides. While we could have a bit more fun with it, I do think the main headline should be super clear.

marko-srb commented 10 months ago

@thetinyl

Thanks for the copy edits and the logo suggestions.

Copy is ready. Logos selection is a bit tricky thing. When I look at previous solution, there were only famous brands there. Although I get the concept behind

swapping some of the logos that are really just WP blogs (Spotify, Meta, Microsoft) for companies that are using WP for their whole site

I don't think adding non-recognizable brand logos there is good. Who'll recognize Noma? Momofuku? And in general, logos are reserved here, and generally as a signal of the logos you can recognize. I think we can swap, but I am not sure those would be the right ones.

I'll send a suggestion shortly.

Thank you!

marko-srb commented 10 months ago

How about this?

homepage-showcase-cta-v2

@thetinyl let me know your thoughts about it, with context of my previous comment.

CC: @jasmussen @ndiego

ndiego commented 10 months ago

I defer to @thetinyl on copy, but I think this looks great!

thetinyl commented 10 months ago

Looks good with the updated language, thanks!

I don't think adding non-recognizable brand logos there is good. Who'll recognize Noma? Momofuku? And in general, logos are reserved here, and generally as a signal of the logos you can recognize. I think we can swap, but I am not sure those would be the right ones.

I can definitely see where you're coming from. I'll just add that there are some superstar brands in other industries (I used restaurants/food as an example) that may not be known for everyone, but will be very well known in those industries and anyone who follows them/aspires to be like them. Just thinking about the mandate from Matt about folks seeing themselves in the Showcase.

I think we're fine with what's there at the moment.

ndiego commented 10 months ago

Editor demo (frontend will look like the current layout when synced)

@marko-srb @thetinyl @eidolonnight @jasmussen In the interest of time, I have updated the logos, copy, and graphics using the current layout. This way, no code changes are required other than the sync to the theme.

Are you comfortable with this approach? We can then add the dots post-launch.

thetinyl commented 10 months ago

Copy-wise, looks good to me. Thanks for doing that!