Designing Illustration for Empty States.

Hastyo Listyanto
4 min readJun 15, 2021


When we talk about designing a product we tend to think about the conversion, usability, familiarity or user flow. While it’s important to think about all that, as product designer sometimes we feel that there is not much spaces to be creative with the design. We bound by some rules. That’s until I designing an empty states.

Empty states are great opportunity for designer to be more creatives!

Empty states for platform maintenance

Empty States in user interfaces

An Empty state is the moment in which regular content of a page can’t be displayed to users. Example of empty states are first use states, 404s, and error messages. These empty states are part of user journey and a great place to engage, and give user satisfying experience. Good empty states design also prevent user from disappointment or confusion.

The Concept

While designing an Apps and Websites for Santara, I have a chance to be involved in the development of all the illustration across all platform. Most of illustration I made were used in empty states. In designing the empty states our team have 4 things to keep in mind.

  • Inform the user

Empty states are great opportunities to interact with the user. Use this chance to inform the states, how to use the feature or explain the error.

  • Guide the user

User could stuck on empty states. To avoid that situation we try to always give your users a next step. Putting a relevant link or button to the next step is a clear call for users to retain on the page.

  • Entertain the user

Empty states especially the error pages are pain point for user. To ease the pain we make fun illustration and try to entertain user (appropriately).

  • Have fun with the illustration

The most important point are we always try to have fun and be creative with the illustration.

Sketching and Concepting Phases

In this phases we try to find the general feel and style of the illustration. We sketching and try a lot of style. Here is some sketch and early illustration concept.

Some early illustration we made before final stylistic decisions

Visualizing and Coloring Phases

After all the ideas were completed and agreed-upon, the sketches were converted into digital illustration. To complete the visual aesthetic we try different colors to find the most suitable color for the apps usability and their brand values.

Final Result

Below you can see the finalized versions of the illustrations for Santara apps and websites.



Hastyo Listyanto

See my user interface design portfolio here :