Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WordPress.org YouTube video showing how release pages are created with blocks #418

Closed
annezazu opened this issue Apr 29, 2024 · 33 comments
Closed

Comments

@annezazu
Copy link

annezazu commented Apr 29, 2024

For the last few releases, microsites have been created to show off what you can do with the latest release:

https://wordpress.org/download/releases/6-5/
https://wordpress.org/download/releases/6-4/
https://wordpress.org/download/releases/6-3/

I've helped review these design & content wise and have always loved that they are using blocks. I thought it would be fun to create a YouTube video highlighting this that could be shared on the WordPress.org YouTube channel. I'm not sure what the best process is for this right now so opening this issue to get some direction and confirmation that this is the sort of thing to share there (relevant, impactful, engaging).

For now, I'll try my luck at creating a video and will share it here as I progress.

@eidolonnight
Copy link
Contributor

Tagging in @jasmussen as he and someone from Design can likely advise on style.

@bjmcsherry can likely provide some additional YouTube insights regarding what videos are performing best.

@annezazu
Copy link
Author

Awesome! Noting for now that I am stuck with this styling bug: WordPress/wporg-parent-2021#134 Once it's fixed, I'll dive into a video hopefully this week or next to at least kick off something.

@jasmussen
Copy link

Great issue, good suggestion. Just to make it more easily digestible to understand this suggestion, here's a screenshot of the editor for the 6.5 site:
screenshot of the editor

As you can see it's a nicely WYSIWYG representation of the frontend, and all blockified. It's a nice way to:

  • Showcase how to use the block editor and block themes on a very notable production site.
  • Show tips, such as grouping, naming groups, moving sections around with the list view, how to drag and drop to sort or tweak columns, how to duplicate a section and edit it, etc.

What format were you considering for this? Short 1m featurette with no sound, and intro/outro? Or something narrated and more casual? If the former, it can just review the existing sites, show some things, perhaps delete a section and "re-build it". if need be, for practical purposes, can just make a copy of the page so we're not editing the production version. If the latter, it's less clear to me, and Anne you've skill there already, so let me know how I might be able to help.

@annezazu
Copy link
Author

Always appreciate you chiming in on these things, Joen!

What format were you considering for this? Short 1m featurette with no sound, and intro/outro? Or something narrated and more casual? If the former, it can just review the existing sites, show some things, perhaps delete a section and "re-build it". if need be, for practical purposes, can just make a copy of the page so we're not editing the production version. If the latter, it's less clear to me, and Anne you've skill there already, so let me know how I might be able to help.

I was thinking of going the more casual, approachable route in line with the gist of the video: watch how the everyday blocks you use power WordPress.org. I aim to keep it fairly short (1-3 minutes) with some light narration. I like the idea of deleting and recreating. I want to talk about how we use renaming group blocks too!

Keep the thoughts coming and I'll drop an idea here when I get to it.

@annezazu
Copy link
Author

annezazu commented Apr 30, 2024

Alrighty -- here's a script draft and what follows is a rough take to at least get the idea out there. I say rough because my audio isn't great (didn't record in my closet) and some of the edits are rocky (had to hide some stuff):

Release.page.youtube.video.draft.1.mp4

What do you all think? Does it cover what you'd expect folks to want to see? Is it compelling? I am aiming for approachable while also showing how there are design standards in place to ensure consistency across the site. I might add in a quick part where we go through how the page really is made up of everyday blocks but I don't want to get too long winded.

@ndiego
Copy link
Member

ndiego commented May 1, 2024

This looks great @annezazu. A few minor suggestions.

  • I think it would be nice to record using the "Modern" admin aesthetic if possible (I wouldn't rerecord for this though if you weren't planning on it already)
  • It might be good to note something about the actual deployment process. To the casual viewer, it looks like contributors are able to simply hit "Update" and the changes will be live. Maybe just mention that there is a deployment process once changes are saved. The updates are reviewed by a member of the Meta team, approved, and then deployed to the live site.
@annezazu
Copy link
Author

annezazu commented May 1, 2024

I think it would be nice to record using the "Modern" admin aesthetic if possible (I wouldn't rerecord for this though if you weren't planning on it already)

Agreed! The audio is bad and I need to use the modern profile. I am definitely re-recording so I'll be sure to do that.

It might be good to note something about the actual deployment process. To the casual viewer, it looks like contributors are able to simply hit "Update" and the changes will be live. Maybe just mention that there is a deployment process once changes are saved. The updates are reviewed by a member of the Meta team, approved, and then deployed to the live site.

Great idea. I can throw in a sentence at the end there without getting too far into the weeds ("Since this is such an important site, updates are reviewed by members of the Meta team before they go fully live").

@ndiego
Copy link
Member

ndiego commented May 1, 2024

I can throw in a sentence at the end there without getting too far into the weeds

Yeah, exactly.

@richtabor
Copy link
Member

I like it. The behind the scenes is nice.

  • It could be nice with a cut showing the url for this page.
  • I think we could use a standard-ish screenstudio preset that we can use across efforts.
  • One note on cursor placement: I suggest either hiding the cursor when it's not moving (screen studio control) or placing the cursor strategically off canvas, or in the corner, when talking through something.
@annezazu
Copy link
Author

annezazu commented May 2, 2024

Great notes and thanks for sending me your preset. I'll work on hiding the cursor (just stop moving it so screen studio can remove) or moving it off camera. I have a bad habit of spinning it around when talking haha. I'd need/want design help for a cut away to the URL but that would be an easy ask :) Will attempt another version today.

@annezazu
Copy link
Author

annezazu commented May 2, 2024

Alrighty -- here's draft 2. I actually am pretty happy with how this turned out. I had to tighten up some points but what do you all think? Changes:

  • Added in a sentence about the changes needing to be pushed live at the end.
  • Changed profile to "modern".
  • Updated preset to use a black background.
  • Tried to reduce the amount my cursor is in the way.
  • Recorded in my closet and spoke a bit louder to help with audio quality 😆
Release.page.youtube.video.draft.2.mp4
@ndiego
Copy link
Member

ndiego commented May 2, 2024

Very nice @annezazu. I wonder if we should create a playlist for this sort of thing on the WP YT channel: "WordPress.org – Behind the scenes" or something more catchy.

@annezazu
Copy link
Author

annezazu commented May 2, 2024

I dig it. I think this would be a fun series to do! "The ultimate wp-admin".

@annezazu
Copy link
Author

annezazu commented May 3, 2024

I've looped in @admwgn who has done some awesome work on the release videos previously to help out here as I worry about this not being good enough for a more official video. Here's what we've chatted about:

  • Add an intro that's reusable for future similar videos (“Behind the Scenes of WordPress.org)
  • Outro with the CTA (“See the power of blocks: https://wordpress.org/download/releases/6-5/”)
  • Light clean up — I don’t think we need chapter titles or anything too major but I’d love to have someone with real video knowledge to sharpen what's there.
  • Sound track! We'll want to have an upbeat, jazzy vibe.

Will keep working on this together, sharing updates, etc.

@annezazu
Copy link
Author

Whew! @admwgn did some incredible work here to add an intro/outro, music, and to clean it up.

bts-dotorg-6_5-1080p.mp4

Some minor changes to go: remove the green 6.5 as this isn't tied to a release and add a call to action at the end to https://wordpress.org/download/releases/6-5/.

@jasmussen
Copy link

Let's be sure to re-use that intro for similar material in the future. Nice work, all!

@annezazu
Copy link
Author

annezazu commented Jun 5, 2024

Here we go! At this point, I think it would be neat to get a WordPress.org/news post out about this too. I'll work on some copy today and loop back. I think we can keep the copy fairly simple and showcase the video overall:

bts-dotorg-6_5-v2-1080p.mp4
@annezazu
Copy link
Author

annezazu commented Jun 5, 2024

Here's a link to the transcript to use for the video and finally here's some draft copy. @thetinyl or @DanSoschin could you all help review and collaborate with me here? Unless you think a wporg/news post is unwise :)

@annezazu
Copy link
Author

annezazu commented Jun 6, 2024

Getting some reviews now for the /news post and am hoping to use a still from the video intro/outro as a featured image for the post. Bad screenshot but this would work well IMO:

Screenshot 2024-06-06 at 10 07 25 AM

@thetinyl
Copy link

thetinyl commented Jun 6, 2024

Sweet video! Thanks for wrangling all this together, @annezazu.

Unless you think a wporg/news post is unwise

I think focusing on YouTube and social (I'm thinking LinkedIn in particular for this) may be the most strategic use of this content. /News is a great mouthpiece to reach the WordPress community, but this feels bigger than that—and also something that's not entirely new to the /News audience.

How would you feel about leveraging the copy you have for the /News post into a longer form LinkedIn post? I can edit and make recommendations based on your current document.

In terms of timing, with WCEU next week, I'm wary that this will get swallowed up and overshadowed by all of that content. What do you think about this getting published around RC1 (so end of June)?

@annezazu
Copy link
Author

annezazu commented Jun 6, 2024

Whatever you all think is best. I think it makes a solid /News post that touches on the broader redesign, releases, and the power of blocks. I think in terms of talking about product, it hits a unique angle. At the same time, I'm not on the back end doing a lot of this content so will defer to your read. Just wanted to share why a /news post came to mind in case it helps.

Could we do the week June 17th? I don't want it to get swallowed up by WCEU nor do I want it to get overshadowed by RC1 :D

@annezazu
Copy link
Author

annezazu commented Jun 6, 2024

In terms of tasks, at this point, the following is needed:

  • Finalize copy of linkedin post
  • Upload youtube video with featured image (trying to get) and captions (shared above)
  • Post it all :)
@admwgn
Copy link

admwgn commented Jun 6, 2024

@annezazu I've attached a 4K static image of the BTS visual for use as a Thumbnail. Let me know if you need anything else.
BTS-DotOrg_6_5-Thumb

@DanSoschin
Copy link

I think YouTube + LinkedIn is a solid plan. The shelf life on YouTube will be longer so let's pair it with solid title/description for discoverability. But this definitely brings up thoughts for a good place for this type of informative, non-technical (that's a good thing!) content. It doesn't really fit with the audience of the dev blog or the news blog. But it is a solid case study that demonstrates the no-code capabilities of building pages in WP.

@thetinyl
Copy link

thetinyl commented Jun 6, 2024

Could we do the week June 17th? I don't want it to get swallowed up by WCEU nor do I want it to get overshadowed by RC1

Absolutely. I think that works.

@annezazu I may not have the bandwidth to review/edit for the LinkedIn post before the end of this week. I'll add it to my priority list for early next week (Mon/Tues). How does that sound to you?

The shelf life on YouTube will be longer so let's pair it with solid title/description for discoverability.

@DanSoschin Yes! Good call.

@annezazu
Copy link
Author

annezazu commented Jun 6, 2024 via email

@annezazu
Copy link
Author

annezazu commented Jun 6, 2024

Let me know if anything else is needed from me btw and please share the link to the post whenever it's live! I'm going to move onto other work for now.

@annezazu
Copy link
Author

Checking in on this to ensure it's slated to land this week ✨

@thetinyl
Copy link

Thanks for following up @annezazu!

I'm aiming to schedule for Thursday. Is the file above the final version of the video? Just want to double confirm.

Here's the suggested post copy for LinkedIn:

Over the last few WordPress releases, you may have noticed the introduction of dedicated landing pages for WordPress 6.3, 6.4, and 6.5. These pages are sleek and snazzy and play well with the rest of WordPress.org’s look and feel. Best of all, they use the same blocks you do every day on your WordPress sites.

Thanks to the visual nature of building with blocks, creating and editing these pages was swift and smooth. This also simplified cross-functional collaboration between contributor teams. Designers and marketing contributors could take turns in the Site Editor, making quick changes and adjustments as content needs shifted during the release process.

Watch a behind-the-scenes take on how this process worked—and imagine how, in the future, real-time collaboration in WordPress could elevate this experience further.

See the sites:

WordPress 6.3: https://wordpress.org/download/releases/6-3/
WordPress 6.4: https://wordpress.org/download/releases/6-4/
WordPress 6.5: https://wordpress.org/download/releases/6-5/

@admwgn
Copy link

admwgn commented Jun 18, 2024

@thetinyl This is the 4K high quality version for YouTube and should work for LinkedIn too. If you need a 1080p version, that's here.

@annezazu
Copy link
Author

Thank you so much for those uploads @admwgn.

Copy wise, this looks great 💥 . Excited to see it out in the world.

@thetinyl
Copy link

Alrighty. We're all scheduled for tomorrow on LinkedIn (and bonus: Facebook). The YouTube link will, of course, also be ready.

Thanks all involved for putting this together!

@thetinyl
Copy link

Links to the live posts:

Since this campaign has spread its very fine wings, I'm going to close the issue. 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
8 participants