IBM Empty State Illustrations
When paired with action-oriented text, these illustrations help users understand next steps
My contribution
Explored guidelines
Co-created illustrations
Contributors
Stevie J., Co-Illustrator
Andrew S., Design Lead
Ruben F., Design Lead
Year
2019
Time
2 months
Context
⚠️ Problem statement
🏆 Goal
Through clear messaging and descriptive illustrations, teach IBM Cloud users how to populate empty screens
IBM empty states lack direction. This makes it difficult for IBM users to take the necessary next steps
Iteration 1
🤔 Intent
Through illustrations, add a playful tone to the typically discouraging experience of encountering an empty screen
🧠 Stakeholder insight
While the illustration brings character to the product, it is overly playful for IBM’s enterprise users
Iteration 2
🤔 Intent
Create a delightful, yet professional, tone
🧠 Stakeholder insight
The tone of the illustration is delightful, yet professional. Its unique shape lacks standardization across multiple empty states.
Final mockups
Empty state illustrations should inject personality into the product while encouraging the user to take action. They should be designed in a way that clearly communicates and supports surrounding content.
Colors
The brand colors are light and create a feeling of emptiness, while still being accessible
Foreground
#FFFFFF
Middleground
#8897A2
Middleground
#CDD1D4
Background
#F4F7FB
Stroke
#8897A2
Results
These illustrations were shipped in Watson Studio
👩🏻💻
Result 1
Created action-oriented empty states for 10,000+ users
📈 🤗
Result 2
Humanized and brought personality to hyper-technical and data-centric products