Tour

A Tour view is presented when a user accesses a certain feature in George for the first time, to educate them about its purpose & functionality.

Visual

Tours have a mandatory visual as the top most element.

Illustration

The component is built to support an illustration or animation which is provided in 16:9 aspect ratio.

Open in Figma

Icon

If no illustration is available, the XL variant of any of our library icons can be used. The icon should be used in @3x size, which means it will render at 144x144

Open in Figma

Text Area

Contrary to the Onboarding View, text in Tours is centre-aligned and does not support list-style layout.

Open in Figma

Pagination & Actions

The last element in a Tour View is a pagination indicator and a connected action.

1 Step Tour

A Tour that only consists of one step uses the default Button Group configuration which consists of a suggested action (using a Primary Button) and an alternative action (using a Tertiary Button)

Open in Figma

2 Step Tour

A Tour with two steps shows a pagination indicator and a “Next” action for the first step, and a pagination indicator and a “Done” action for the second step.

Open in Figma

3+ Steps Tour

A Tour with three or more steps shows a pagination indicator for every step. All steps but the last one show a “Skip” action below the pagination indicator, which takes the user to the last step of the Tour. The last step shows a “Done” action.

Open in Figma

Dismissable Tours

Tours can be mandatory or optional. Mandatory Tours do not show a close/back action in the Navigation Bar, and can only be dismissed by the “Done” action in the last step.

Optional Tours can be closed/dismissed via the respective actions in the Navigation Bar.

A Tour can be configured for both scenarios - a typical example would be that a Tour is shown as “mandatory” when a user visits a feature for the first time, but when it is later accessed via a different entry point, it becomes “optional”.

Open in Figma

Tokens