Add a link to the Beginner User Learning Pathway in the block editor Welcome Guide

[kaitohm]

What problem does this address?

Training and Meta relaunched https://learn.wordpress.org/ in August this year. Training has since been discussing how we can increase traffic to the site, especially from within the WordPress software. (See discussions Drawing new learners to the new Learn.WordPress.org, which led to Brainstorm: Introducing Learning Pathways to users during onboarding.)

We are proposing using the block editor's Welcome Guide to direct new users to resources created for them on Learn WordPress.

What is your proposed solution?

The final card of the Welcome Guide currently says the following:

Learn how to use the block editor

New to the block editor? Want to learn more about using it? Here's a detailed guide.↗

We'd like to add the following (or similar) to that card:

You can also take these free courses provided by the official WordPress Training Team.↗

[Mayank-Tripathi32]

Hi @kaitohm,

Did you mean to add it like this?

Or would you prefer I add some space, like this?

[kaitohm]

I like the second option with some space 👍

[t-hamano]

Related track ticket. This ticket suggests adding a link to Learn on the dashboard: https://core.trac.wordpress.org/ticket/62512

@annezazu @bph @ndiego I'll ping you as you might be interested!

[kaitohm]

Ah, thanks. Also noting another similar ticket Training started: https://core.trac.wordpress.org/ticket/62510

[jasmussen]

Good instincts, though I just left some feedback on a PR work in progress. We know from various user tests that some people simply dismiss this dialog immediately, especially if it gets long. The modal is already 4 pages, and the illustrations are somewhat out of date. How would this dialog look if it was slightly bigger, visually refreshed, a bit more spacious, and had only 3 slides and a single call to action link that took users to Learn? I know iteration is usually the best path forward, but it's not clear to me that the current welcome modal is working at all, so if you'd really like to improve things, a slight refresh is likely a good path forward. If you can provide some napkin sketches, I can probably help with refreshed illustrations.

Separately, it's not clear to me that "increasing traffic to the learn" site should be a goal unto itself. I do not sence malice in the statement: I suspect your instinct is that increased traffic here would equate to more users helped. But I want to challenge that a bit: a random click is meaningless. With a mindset to help the user—and providing a learning resource can be part of that—it can help frame the overall effort to be more potent.

[Mayank-Tripathi32]

How would this dialog look if it was slightly bigger, visually refreshed, a bit more spacious, and had only 3 slides and a single call to action link that took users to Learn? I know iteration is usually the best path forward, but it's not clear to me that the current welcome modal is working at all, so if you'd really like to improve things, a slight refresh is likely a good path forward. I

@jasmussen I was thinking, why not have a helper/assistant (Ex. Clippy) that stays in the editor to guide users through their first few posts? We could also add an option to turn it off in the settings.

I feel this might work better than modals. It might take some effort to build, but I think it could be useful in getting users to check out important docs and learning sites.

Just my idea, I don't know if this has ever been discussed before

[annezazu]

why not have a helper/assistant (Ex. Clippy) that stays in the editor to guide users through their first few posts? We could also add an option to turn it off in the settings.

This is blowing the scope out in a big way and very much feels like plugin territory. I think we'd see really big backlash on this!

[ndiego]

Related track ticket. This ticket suggests adding a link to Learn on the dashboard: https://core.trac.wordpress.org/ticket/62512

Added some thoughts there.

This is blowing the scope out in a big way and very much feels like plugin territory. I think we'd see really big backlash on this!

Agreed. Cool plugin, but not something for Core.

it's not clear to me that the current welcome modal is working at all

Agreed. It needs a complete rethink, but I also would be in favor of removing it altogether.

[jasmussen]

We've actually tried pointers in the past, and it was removed becuase it wasn't well received or useful.

The problem here is: most welcome modals or pointers, people immediately dismiss. This is what's driving my instinct that we should:

a) be very careful with adding these, add them only when they are truly important and meaningful
b) ensure they are exceptional, carefully written to be short, highly glancable, and as minimal as possible

These modals can be very important. And if we recognize that most people dismiss them, we can counteract that by being brief, clean, immediately impactful on the first screen. It's also useful to know this, because when we then do add a link and no meaningful traffic change results from it, we shouldn't be surprised.

[kaitohm]

Thanks for feedback everyone 🙌

Separately, it's not clear to me that "increasing traffic to the learn" site should be a goal unto itself. I do not sence malice in the statement: I suspect your instinct is that increased traffic here would equate to more users helped. But I want to challenge that a bit: a random click is meaningless. With a mindset to help the user—and providing a learning resource can be part of that—it can help frame the overall effort to be more potent.

Good point. The mandate given by project leadership is to increase the number of learners who complete courses on Learn. The Training Team is approaching this from multiple angles, one of which is to increase traffic to the Beginner User course signup page: https://learn.wordpress.org/course/beginner-wordpress-user/ Just noting, this issue is not the only way we're seeking to achieve this. Also, other measures/projects are underway to improve leaner retention once they sign up.

How would this dialog look if it was slightly bigger, visually refreshed, a bit more spacious, and had only 3 slides and a single call to action link that took users to Learn? ...If you can provide some napkin sketches, I can probably help with refreshed illustrations.

I'd be happy to work with the Training Team to provide that.

It needs a complete rethink, but I also would be in favor of removing it altogether.

@ndiego Does any team collect data on how the modal currently performs? Why would you be in favor of removing it completely?

I'd like to test @jasmussen 's suggestion of revamping the modal before removing it completely. Training can monitor traffic to Learn and see if it has an impact or not.

[ironnysh]

I'd like to test @jasmussen's suggestion of revamping the modal before removing it completely.

I created a few alternatives in Figma.

Changes:

• Edited the copy
• Combined all slides into one
• Used the official WordPress colors and fonts.

@kaitohm @jasmussen

[jasmussen]

Thanks for exploring. Here's a quick screenshot from the Figma:

There's a larger question around illustration style here, as these although lovely, depart somewhat from the slightly more generic or abstract style used in some other places. I wonder if there's a way of using the existing illustrations, until such a time we have the ability to decide in perhaps a more systematic way, an illustration style across more of the modals?

Adjacent feedback relates to the content of the modal, it's unclear we should change paragraph, button, heading styles or colors. But it's interesting to see the vastly reduced content here, reducing to a single "slide" rather than having several. There may be something to that. CC: @WordPress/gutenberg-design

[ironnysh]

Hi @jasmussen, thanks for your feedback.

1. These mockups are meant to serve as starting points. Visual brainstorming, if you will :-)
2. Illustration style: I tried not to drift too far from the current “generic or abstract style”, but, again, these are merely suggestions. More importantly, the lightbulb and stick figure were adapted from the free version of The Doodle Library. Not sure what's the license situation there.
3. Re the content: Each standalone modal variation features a different colors/fonts combo designed for demonstration purposes. The copy is identical.

Finally, without going into a deeper discussion about onboarding and UI/UX, it's safe to say that sliders aren't generally the ideal choice. Fitting everything into a single glanceable modal with a clear CTA seems like a win-win.

[kaitohm]

Thanks for creating and sharing these mock-ups, @ironnysh . I love them 🤩

I understand it's the end of the year so things may be slow. Training would love to see these changes made, though, so let us know if the design team etc. need additional input from us to move this forward.

[fcoveram]

Thanks @ironnysh for the suggestion. I like how the content is reduced while keeping clarity about what’s the editor about, but I’m not sure about putting everything in a single view.

The texts communicate three ideas that relate to each other, but the purpose of each is different. Because of that, it’s hard to transfer one strong concept through a visual, no matter the style applied. I’m drawn to keep the guide in slides and follow current the component.

That said, and since the illustration style is open to exploration, I tried an idea that mixes abstract and literal parts of the UI and added transitions within each slide’s image and between slides to reinforce the sequence from blocks to the editor.

Welcome.slides.i1.mp4

Here you can download the three visuals as gifs high-res videos: Slide visuals.zip

While I like the above, a few concerns raise to me:

1. The current illustrations don't present any language, and therefore, are more inclusive. I revisited the blocks and ended up using the heading for the sequence as it's likely the most common use case of facing a blank page when editing a site.
2. The block editor in slide 3 feels inconsistent with what happens after clicking on "Start editing" as closing the modal shows an editor with the side panels invisible.

Finally, I also think we could include a link to Learn in the Options menu, but that seems part of a new ticket.

[ironnysh]

Thanks for this thoughtful exploration, @fcoveram.

These illustrations are very elegant, but they don't address the elephant in the room :-)

What sparked this single-view iteration are @ndiego and @jasmussen's comments above, about the current multi-view modal not working (as in, being immediately dismissed).

I also think that displaying an autoplay animation without allowing the user to pause it violates WCAG rules.

[fcoveram]

From @jasmussen's comments, I understand that shifting from 4 to 3 slides is fine and that dismissing the dialog has to do with the dialog itself, no if it has more or fewer slides. A conclusion I agree with.

In that vein, @ndiego seems fine with removing it completely. I’m not fully sure about this approach as I see value in having an onboarding process.

I also think that displaying an autoplay animation without allowing the user to pause it violates WCAG rules.

Good point. The current visuals are also gifs and don’t have a way to pause. It should be addressed in a different ticket.

These illustrations are very elegant, but they don't address the elephant in the room :-)

I approached the design by fulfilling the request of adding a link to Learn, which is visible on the third/last slide, but I’m open to exploring a different idea that summarizes all content in a single view. In that case, rewriting the text as bullet points or a single paragraph plus a single static image could work.

A wilder idea could be replacing this modal with a step-by-step process that inserts dialogs next to key actions like the inserter, the document overview, and the settings toggles. But that’s definitely out of this ticket’s scope.