How to Design Success States

Denislav Jeliazkov
Denislav Jeliazkov
June 3, 2021
3
min read
When designing interfaces, we often focus only on the "flashy" elements and ignore those pesky edge cases we can make or break and experience.

When designing interfaces, we often focus only on the "flashy" elements and ignore those pesky edge cases we can make or break and experience.

 

What is a success state?

When you interact with a product, you want to achieve a specific goal, and success states inform people that they are either very close to achieving a goal or have already completed the goal.

Designing successful states can lead to a tremendous impact on the overall UX of your product.

The first newsletter I did send was quite stressful. Sending my thoughts on design to a group of people I don't know. Thankfully Mailchimp tries to alleviate the fear by offering me a high five when I click the send button.

Are they that important?

We are emotional. When we interact with digital products, we have to feel certain emotions (that's why you endlessly scroll through Instagram).

People judge a user experience based on how they felt at its peak and its end, rather than all of the averages of the experience.

By creating a big positive peak, we can better make people remember our products.


Let's look at some examples.

Completing a task

There are countless task management tools, and Asana offers a perfect example of making the success state memorable.

They have celebration creatures once you complete a task (unicorn, yeti, narwhal, and phoenix) one of these flies across your screen.

What makes it so good is that they are randomly generated and won't occur each time you complete a task.

Placing an order

Placing an order on an eCommerce website is among the ordinary things we do online. However, with a bit of imagination, it's possible to turn this exercise into something fun and delightful.

Money transferring

Transferring money shouldn't leave you wondering if this is completed or not.

Wise does this exceptionally well, and they even throw in some fun wording.

A success state can be much more than a fancy graphic, and it should combine good visuals and great copy. That's why one of my lessons in UI Learn I talk about UX writing.

Achievement unlocked

A well-designed system of rewards creates a habit loop, and the loop can keep users doing certain activities over longer periods of time.

Duolingo successfully uses this technique to encourage users to learn a new language.

When users complete certain levels, they are rewarded with experience points as well as badges.

What to remember when designing success states?

When it comes to the design of success states, it's essential to think about the following things:

  • Be sure that the message on your success states is clear to your customers.
  • Try to analyze through some research what your customers to do next. Include an element that will lead them to their next step (i.e., call to action button that triggers the following potential action).
  • There should be two types of success states most of the time - for first-time customers and for regular customers. Things that look good in a person's first interaction can get quite annoying if they often get it. It is especially true for fancy animated effects.

People are rational and emotional beings. Thus, when it comes to design, we need to create good usability (which is rational) and delightful (emotional) experiences.

The design of success states can improve both the usability and emotional impact of your design.

Learn the Essentials of Interface Design Under Two Weeks

Receive 7 actionable emails outlining best practices and techniques in order to become a better design. Regular design emails after these 7 emails. Over 4,000 subscribed. No spam. Unsubscribe anytime.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.