Empty States
Driving engagement through visual design
During my time at Wisetail, we underwent a huge redesign of the back-end administrative side of our product. This meant that new empty states were needed for two reasons: curating delightful first impressions & education/awareness of how to fill the empty data fields. The following will walk through the process of developing the visuals.
Initial Thoughts & Preliminary Illustrations
At the beginning, my gut instinct was to keep the color palette minimal (or greyscale) to reduce confusion in the interface, especially because the back-end site isn’t colorful. Another thought was to establish a common form (a circle container) to create consistency and familiarity across all illustrations and pages in the application. The subject matter was to show an instance that warrants an action, such as plugging a cord or peering into binoculars.
The following is a sample of the first round of illustrations:
Lessons Learned
Greyscale makes for pretty boring and static illustrations (especially when our interface already didn’t have much color), so this next round was a rather reluctant attempt at adding color. There was also more experimentation with breaking out of the circle containers.
Pushing Into Color
We used small moments within the application to build a color palette. Being careful to not use the exact colors of links & buttons, the subtle and engaging combos made the visuals more relatable and helpful.
Final Illustrations
The outcome has even more elements breaking out of the circle container, a color palette referencing back to the brand & interface, and ultimately aims to makes first impressions more relatable, informative, and full of humor. Questions about this project? Contact me here.
Examples of visuals within the application available upon request.