Empty state pattern Validation messages Error pattern Error screen Design and contentAvailabilityHelp articles Notifications Progress screen Success screen Accordions Banner Card Banner Info Callout Small Callout Large Card Cluster Card Cluster Image Carousel Feature Section Grid Feature Section interactive Feature Section Single Feature Section Wide Hero Interactive Hero Large Hero Simple Hero Small Highlight Product Highlight Trust Icon Divider Icon List Icon Socials Logo Grid Quote Highlight Quote Text Tabs Data Tabs Feature Text Disclaimer Text Fact Text Headline Text Intro Text Stack Video Embed
Design at Wise Foundations Components Patterns Empty state patternValidation messagesError patternError screenHelp articlesNotificationsProgress screenSuccess screenAccordionsBanner CardBanner InfoCallout SmallCallout LargeCard ClusterCard Cluster ImageCarouselFeature Section GridFeature Section interactiveFeature Section SingleFeature Section WideHero InteractiveHero LargeHero SimpleHero SmallHighlight Product Highlight TrustIcon DividerIcon ListIcon SocialsLogo GridQuote HighlightQuote TextTabs DataTabs FeatureText DisclaimerText FactText HeadlineText IntroText StackVideo EmbedResources
Error screen

Use an error screen to tell the user that an error has occurred during a flow.

An unplugged illustration.
Design and content

Error screen illustrations

There are 6 different illustrations that you can use on an error screen. Each one has a specific use case.

Illustration usage or a construction fence
Construction fence

Use construction fence when a user isn’t allowed access to a specific feature.

Illustration usage exclamation mark
Exclamation mark

Use the exclamation mark for general warnings and for when the user needs to check something.

Illustration usage of a sand timer
Sand timer

Use the sand timer when Wise has a new feature but the user can’t access it yet. The sand timer can also be used if a transfer is pending.

Illustration usage or an electric plug
Electric plug

Use the electric plug when a user has no network connection.

Illustration usage of a tool
Tool

Use the tool when Wise is experiencing technical issues.

Illustration usage of a magnifying glass
Magnifying glass

Use the red magnifying glass if a page isn’t available or doesn't exist.

Title

Title copy should:

  • be just a few words

  • clearly explain the error — the user shouldn’t need to read the description to understand the issue

  • not have any punctuation at the end

An error screen.
An error screen.

Description

Description copy should:

  • explain the issue in more detail, and tell the user what to do next, if possible

  • reassure them their money is safe, if relevant

  • be short and sweet — one or two lines is perfect

  • have a full stop at the end

An error screen.
An error screen.

Primary button

Primary button copy should:

  • be one or two words

  • either dismiss the screen, or take the user to a logical next step

  • have no full stop

An error screen.
An error screen.
Availability

Platform

Available

Android

iOS

Web