Skip to content
Telescope

Modal SplitNew

Modal split is a focused-experience, introduced as an overlay to explain to customers concepts or actions within the product.

Features

  • Show an illustration to amplify communication visually
  • Can be used for both single and multi step flows
  • Supports both light grey and pink background colors

When to use

Modal split is used for explaining things - such as introducing customers to new concepts or set up features, communicating in-product updates, or encouraging specific actions or behaviours.

Promote feature

Before a customer has access to a feature, we often use a modal split to highlight the benefits, and explain why this would be a good feature for them.

We commonly use a Tag to help communicate to customers about the pricing plan their in, emphasising the access to a particular feature. To highlight the benefits of upgrading, we often use our List component.

Set up features

We use the modal to take customers through step-based journeys to set up features and present key concepts that need configuring, for features to be ready for use.

For multi step flows, step indicators in the form of "dots" are shown to communicate the stage customers are at, setting expectations for the duration of the journey to completion. We recommend breaking flows into a maximum of 3 to 4 steps.

Communicate updates

When there are new in-product updates e.g. changes to the UI, we use the modal to communicate to customers why they happened and how they can benefit from them.

Encourage actions

We also use the modal to encourage that customers take certain actions e.g. top-up wallet, to get the most out of the the Pleo product.

We commonly use Action banners to encourage and direct customers to take different actions to get the most out of Pleo.

Best practices

Illustration style and color

The modal split is intended to be used with "high complexity" illustrations to amplify visual communication. The background color should be based on how the illustration looks: if the illustration includes colour, use grey; if the illustration is monochrome, use pink.

For multi-step flows, keep the background color consistent across all steps. Mixing colors can imply additional meanings or suggest that some steps are more important than others. If unsure, default to grey.

Can't find an illustration that works for your use case? You can request new illustrations from the brand design team.

Do's and don'ts

Do
Keep the experience concise for customers (e.g. up to 3 or 4 steps)
Don't
Use the component to present critical information to customers
Do
Make use of illustrations to maximise visual communication
Don't
Manually stretch illustrations vertically or horizontally
Do
Allow customers to skip or exit the experience and easily return to it
Don't
Use videos for the right-sided section of the modal
Do
Let customers disclose the modal split component through interactions
Don't
Introduce customers to the modal split unexpectedly
Do
Request new illustrations from the brand design team
Don't
Recreate or recompose your own illustrations

Accessibility

We use @reach/dialog to make the modal accessibile. It implements the WAI-ARIA principles of Dialog (Modal).

Related components

  • Drawer: A panel that slides out from the edge of the screen to focus a user's attention on completing a task or viewing details about an item.
  • Modal: A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.
  • Page: A collection of components which let you compose a page in our web application.
  • Popover: A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page.