[Getting Started] More prominent walkthroughs on Welcome

[digitarald]

tl;dr: Feature the core Getting Started guides with more prominent placement and design, to raise the likelihood that new and intermediate users discover them.

Problems

1. Muted design causes the walkthroughs to go unnoticed. While the first Getting Started page (1.54), featuring large cards for walkthroughs, had the highest engagement, adding back the well-known Welcome page to bring back file/folder/recent tasks lowered engagement significantly.
2. Walkthroughs are interesting for more users than just first-time installs. The v1.54 did open setup to all users until items got done, while the 1.55 heuristic reduced it to users in their first day with VS Code. While the core audience for getting started is first-time users, we found that returning users used the walkthroughs to tweak their setup and deepen their skills.

Options

The assumption is that that we keep the Welcome page actions while elevating the walkthroughs. These placement ideas are just meant as conversation starters and to spawn more UX ideas:

1. Larger cards design for the top-most walkthrough
2. Expand top 3 walkthrough cards into larger cards
3. Dismissible gallery for 3 walkthroughs cards, above the welcome page content

3. is my recommendation as it gives us the biggest impact to experiment with, applies the lesson that top-most welcome content gets most engagement and puts the trifecta of walkthroughs into one journey. As a bonus we can measure opt-out rates of users hiding the element, if we want decide to implement that toggle.

Risks

• How could we know about the negative impact of being distracting for existing users? Maybe track satisfaction, instrument a clear opt-out or combine existing telemetry.
• Depending on completion might make the placement stale. How can we make sure mostly partially done walkthroughs that users don't intent to finish make room for the next walkthrough.

cc @misolori @JacksonKearl

[JacksonKearl]

Didn't also change the focus-first-page behaviour from "when nothing is checked off" to "when nothing is checked off and it's the first session"? How do the new numbers compare to when focus-first was off entirely?

[digitarald]

Yes, I have that one the experiment analysis. Focus-setup-first did help with increasing engagement, but not having it wasn't a massive dip compared to 1.55 vs 1.54.

With #122570 more items should be checked off for returning users and we don't need the first-day check. I'll file another issue to remove the first-session heuristic afterwards.

[digitarald]

@misolori what are your UX thoughts on nudging up the visibility of walkthroughs to give more users a moment of awareness before they habitually moving onto recent projects or closing the welcome page?

[miguelsolorio]

Here's a couple of ideas on how we could "highlight" certain walkthroughs:

Star adornment

We could add a little blue star in the corner (kind of like a bookmark) that would draw the user's attention. We can also show the description to show more context.

Label

Similarly we could add a "featured" label + show the description.

[digitarald]

We could add a little blue star in the corner

I like those, especially as it can be used versatile for highlighting a) the setup to users b) recently added walkthrough, c) walkthroughs matching the current folder (C++, Git, etc)

Featured

Could seem too ad-like or looks like we have some ongoing content curation going on. One angle though would be to use the badge to give the reason why the walkthrough is important atm; but a short one-word explainer seems too limited for that ("Because you opened C++ files", or "Relevant for current workspace").

Here's a couple of ideas on how we could "highlight" certain walkthroughs:

@misolori what are your thoughts on the wireframes I posted, highlighting the first 3 walkthroughs in the top row? The mockups could also consider that all new users will have a (mostly) empty Recents list, so have more space available.

[miguelsolorio]

what are your thoughts on the wireframes I posted, highlighting the first 3 walkthroughs in the top row? The mockups could also consider that all new users will have a (mostly) empty Recents list, so have more space available.

The biggest concern I have is how busy this will start to look. It already is starting to feel a bit busy as extensions are adding items there and making some items larger won't improve that. While it can make Day 0 feel better, i worry about the implications for Day 30 when you have recents + more extensions installed.

[digitarald]

Makes sense. Keeping that page simple and welcoming is key. The star adornment is a good middle-ground:

1. Highlight first built-in walkthrough for new users until it is at least 50% done. The idea of half-completed is to prevent that users churn users against a 100% goal but also giving enough to do.
2. Highlight the last installed extension walkthrough that matches the current context.

@JacksonKearl is the latter feasible with the when clauses added to extensions? Right now it only supports the auto-open heuristic for the walkthroughs, right?

[meganrogge]

@digitarald @misolori can you move this to the June milestone?

[JacksonKearl]

Maybe we could show the star next to "new" contributions? i.e. record the first time we saw it, and if that's less than say a week ago show the star? This could apply to both built in and contributed walkthroughs.

[alefragnani]

I also prefer the star adornment, not only because it is less distracting, but also because it shares the same approach from Extensions Viewlet.