Skip to content
Telescope

Modal SplitNew: New

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

Features

  • Show an illustration or photograph 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.

Information:

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.

Photography

Using photography in a Modal Split can boost feature adoption and drive resulting spend by attracting attention and adding context. Rarely used in the product, photos draw users in, suggesting where and how the feature fits and creating a positive emotional tone. Paired with simplified UI, they can help users quickly grasp the value proposition.

Information:

If a photograph is purely decorative, set the alt attribute to an empty string (alt="") to ensure it’s ignored by screen readers. Otherwise, use descriptive alt text to convey the essential content or purpose of the photograph.

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.

Information:

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.

Information:

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.

Information:

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.

Information:

Can't find an illustration that works for your use case? Request a new one from the brand design team.

Photography

Collaborate with brand design when using photographs in a Modal Split. It's brand design's responsibility to curate and export the photographs. You can request new photographs from the brand design team by filling out this form.

When using simplified UI in a photography, make sure to position it in the top left corner. This is to ensure that it doesn't get cropped out when the modal is displayed on smaller screens.

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 enhance visual communication
Don't
Manually stretch illustrations vertically or horizontally
Do
Make use of photographs to maximise attention for a feature
Don't
Overuse photographs so they lose their impact
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 and photographs from the brand design team
Don't
Recreate or recompose your own illustrations or photographs

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.