Page MenuHomePhabricator

Homepage: increase affordance in homepage discovery guided tour dialog
Open, Needs TriagePublic


As part of the Growth team work to increase Newcomer homepage discovery (T222852), a guided tour dialog has been used to invite newcomers to discover their homepage, or to learn how to come back to their homepage, right after account creation -- on desktop (T222852).

We have reason to believe that guided tour affordance could be increased by adding an illustration that conveys the message of homepage discovery.

This task is to evaluate the work and for @Cntlsn to propose design solutions.

Event Timeline

@MMiller_WMF shall we wait to measure homepage conversion rate before working on this task, or do we want to ship it with the first release of the homepage features to aid discovery?

I think that @kostajh told me that he thinks it is already possible to include images in GuidedTours. @kostajh, what is your current assessment?

I would say that if it is trivial, we can toss an image in there before this feature is released. If it takes more than a day of work, we should add images as an iteration.

While waiting for technical feedback, I decided to work on the design for this task. Here are design proposals for including an illustration to the homepage discovery popups.

  • After account creation user decides to go to Homepage

Screenshot 2019-07-25 12.57.14.png (1×2 px, 596 KB)

  • After account creation user decides to go back to context of origin (reading context shown below)

Screenshot 2019-07-25 12.57.14.png (1×2 px, 596 KB)

In both scenarios the illustration also present in Homepage discovery treatment for Desktop + noJs users (T225318) is displayed.
The illustration is scaled to max-height: 70px to better fit popup's spacing.

Moving to "Pending Product Manager Input" column for @MMiller_WMF to decide how to prioritize this.

@Cntlsn @MMiller_WMF, very sorry for the delay in responding to you on this.

Yes, we can definitely add images and it doesn't seem like a ton of work. To see an example of this, go to

Then in your browser console run:

mw.loader.load( 'ext.guidedTour.tour.RcFiltersHighlight' );
mw.guidedTour.launchTour( 'RcFiltersIntro' );

@kostajh Thanks for your input, looks awesome!

I think the home illustration would work for now, and it could be enhanced with a better illustration (and eventually animation) later on.

@MMiller_WMF please let me know if we are happy with this solution, so I will update the mockups on InVision and Zeplin, thanks!

RHo added a subscriber: RHo.

Hi @Cntlsn @kostajh - per offline discussion with @MMiller_WMF, we want to see how the guided tour works as it has just been deployed before adding the illustration.
Then if and when we decide to add an image later, let's update the visual style to be more in line with welcome/onboarding illustrations we use elsewhere, following the guidelines at