Empty state pattern Validation messages Error pattern Error screen Help articles Notifications Progress screen Success screen TypesBest practiceDesign and contentAvailabilityAccordions 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
Success screen

Use a success screen at the end of a flow to let users know they’ve successfully completed a task.

A tick illustration.
Types

There are two types of success screen:

  • Celebration

  • Confirmation

A success screen telling the user their money has sent.
Celebration

Use celebration to mark key brand moments, like:

  • Sending money
  • Converting money
  • Ordering a new card

Celebration should always have a green background.

A success screen telling the user they've added a new team member.
Confirmation

Use confirmation for general administrative task, like:

  • Emailing a receipt
  • Adding team members to a business account

Confirmation can have either a white or green background.

Best practice
  • Only use once at the end of a flow.
  • Use the description if you need to give more details about what’s happened.
  • Use a secondary button if there’s a related next step the user could take.

Design and content

Title

Title copy should:

  • be just a few words

  • summarise what’s happened

  • not have any punctuation at the end

Success screens are moments of celebration, where we can show our personality. But it’s still important to clearly communicate to the user what’s happened.

For example, if a user has been trying to send a large amount of money abroad for a family emergency, they want to be reassured their money is there.

But if the situation is less high stakes (for example, a user has just got a digital card, or added money to a jar) then it’s ok to be a bit more playful — as long as it’s still clear.

And keep in mind how often a user might see a particular success screen. They’re going to see the send success screen a lot more than they will see the card order success screen. A moment of delight can quickly turn to dread if you see it 15 times a day.

A success screen telling a user they've sent money successfully.
A success screen telling a user they've added money to their savings.

Description (optional)

Description copy should:

  • give some further detail about what's just happened (but not repeat the exact same info)

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

  • have a full stop

A success screen telling a user they've converted money from GBP to EUR.
A success screen telling the user they've converted money from GBP to EUR.

Primary button

Primary button copy should:

  • be one or two words

  • be clear and confirmative

  • have no full stop

Because the primary button on a success screen marks an the user’s final interaction and end point of a flow, the copy should reflect this. Words like ‘OK’ and ‘Done’ are good. Whereas ‘Continue’ or ‘Next’ suggest there’s still more to come. And be careful with phrases like ‘Got it’. This can work well in some contexts, but not for things like the Send flow, as users might misinterpret it to mean their recipient has already got the money.

A success screen telling a user they've converted money.
A success screen telling a user they've converted money.

Secondary button (optional)

Secondary button copy should:

  • be one or two words

  • give an alternative but relevant next step that would take the user to another place in the app

  • have no full stop

A sent money success screen.
A send money success screen.
Availability

Platform

Available

Android

iOS

Web