UI Empty State Illustration System

Illustration UI Design Design Systems Visual Design Design Library

My Role

UX/UI Designer & Illustrator

Company

dunnhumby

Timeline

2019–2021

Output

4 illustrations, design library

Project Overview

Filling a gap in the design system — and turning empty moments into clear guidance

While working on new styles for the dunnhumby design library, I identified a significant gap: there were no empty state illustrations. The current design system had no visual way to communicate empty data states to users — leaving a critical part of the product experience unaddressed.

Having illustrations to convey empty data states wasn't just a nice aesthetic — it was a functional UX need. They inform the user of what's happening in the interface, reduce confusion at moments of uncertainty, and maintain trust in the product when data isn't available.

The Persona

👀

The New Platform User

First-time or infrequent user · Onboarding into a complex enterprise data tool

Encounters empty states frequently in the early stages of platform use — when filters return no results, when data hasn't loaded yet, or when a module is awaiting input. Without clear visual guidance, these moments create anxiety and erode trust. A well-designed empty state reassures the user and tells them exactly what to do next.

The Four States

Designed to cover every empty scenario in the product

After reviewing the different types of empty states the product needed to account for, I designed 4 illustrations to add to the design library:

🔍 No Search Results

Shown when a user's search or filter returns no matching data — reassuring them that the system worked but no results match their criteria.

📊 No Data Available

Shown when a module or report has no data to display yet — informing users without causing alarm or confusion.

⚙ Error / Unknown State

Shown when something has gone wrong — giving users a clear signal and next step rather than a blank or cryptic message.

📄 Upload / Action Prompt

Shown when a section is waiting for user input — guiding users to take an action to populate the space.

My Approach

Consistent, on-brand, and built for reuse

Audited all empty state scenarios across the product to ensure full coverage before designing
Developed a consistent illustration style aligned with the dunnhumby brand — distinctive enough to be immediately recognisable as a "state" rather than content
Paired each illustration with a clear headline and action prompt — removing all ambiguity about what the user should do next
Built all 4 illustrations as scalable assets integrated directly into the design library for reuse across products and teams
Ensured accessibility by not relying on illustration alone — all states include descriptive text that works without the visual

The Outcome

4 illustrations that filled a gap in the design system and improved the product experience

The empty state illustration system was adopted into the dunnhumby design library and became available for use across the product suite. The illustrations improved clarity at critical moments in the user journey and were well-received by both internal stakeholders and users.

Illustrations designed & shipped

✓

Integrated into design library

↓

User confusion at empty states

← PreviousCDT UI Redesign Next →User Personas