State illustrations play a vital role in maintaining positive user engagement during moments of delay or error within an application. This project aims to reimagine these moments through a series of state illustrations for a recipe app, transforming them into opportunities for warmth, empathy, and delight. Centered around an energetic living kitchen, the design brings personality and humor into otherwise static interface states. Each illustration uses playful storytelling and a friendly tone to reassure users, encouraging them to stay engaged and patient while maintaining trust in the app’s cheerful brand character.
Project background
State illustrations are crucial touchpoints that shape how users emotionally respond to system feedback. When a user encounters an unexpected error, delay, or restriction, a human-centered visual can help soften frustration and sustain engagement.
This project introduces six state illustrations for a recipe app — 404 (Page Not Found), Loading Page, Maintenance Page, No Search Results, Registration in Progress, and Restricted Page. Each design builds upon the idea of an energetic living kitchen, a place full of life, movement, and warmth. Drawing from the lively atmosphere of real kitchens, the visuals express empathy through friendly chefs, humorous scenes, and relatable metaphors. By visually narrating each state with unique character personalities, the interface becomes more human, turning technical interruptions into enjoyable, story-driven moments.
visual Narrative
The visual narrative follows the rhythm of a bustling, imaginative kitchen where each chef plays a distinct role in the user journey. Every illustration transforms a common digital state into a miniature story:
Page Not Found - An alien chef stares in confusion at a blue sad-face screen, symbolizing a missing page in a humorous and relatable way
Loading page - A mom-like chef mixes dough with care, reflecting patience and anticipation as the system prepares content
Page in Maintenance - A determined chef holding the construction elements represent the app’s behind-the-scenes work to improve user experience
No Search Results - An assistant chef looks through a magnifying glass at a question mark, playfully symbolizing curiosity and exploration
Registration in Progress - A young chef rushes with documents in hand, capturing momentum and excitement as the system sets up a new account
Restricted Page - A confident head chef holds a key and points ahead, reinforcing authority while maintaining friendliness
The moodboard draws from vibrant, ingredient-inspired colours and bold shapes found in a lively cooking environment. It features imagery of fresh vegetables, citrus fruits, spices, and wooden textures, combined with bright kitchenware and cheerful tones. The overall atmosphere feels active, warm, and approachable — reflecting both the freshness of food and the joy of creativity. The design language captures an “energetic kitchen” mood, full of character, flavour, and life.
The sketch phase focused on defining character-driven compositions and explored how kitchen experiences could be turned into expressive visual symbols that communicate specific states.
These sketches established the visual foundation for the final illustrations, ensuring consistency in style, pacing, and tone across all six states while preserving a human touch that aligns with the app’s approachable personality.
Colour theme
The colour theme is built around the idea of an energetic and living kitchen, where vibrancy and warmth evoke the sensory experience of cooking. The palette combines bright, saturated hues that suggest freshness, movement, and optimism, echoing the diverse colours of ingredients scattered across a chef’s table. This interplay of energy and softness reflects the emotional rhythm of the app — playful yet reliable, bold yet friendly. The overall palette creates a visually engaging environment that keeps users feeling positive and connected, transforming moments of interruption into opportunities for joy and engagement.
Typography was chosen to complement the app’s friendly and modern character. Poppins, a clean and geometric sans-serif, is used for titles and key messages, delivering a bold and approachable personality that aligns with the energetic tone of the visuals. Bitter, a serif typeface with warm curves, is applied to body text and descriptions, providing contrast, readability, and a touch of sophistication. Together, these typefaces create a balanced typographic hierarchy that feels both contemporary and comforting — echoing the balance of creativity and clarity found in cooking itself.
Design Implications
The design of the six state illustrations emphasizes user empathy, visual consistency, and emotional balance. Each illustration is designed to transform potential frustration into delight by using visual humor, friendly motion, and relatable metaphors drawn from kitchen life. Consistent use of color, composition, and typography ensures a unified identity across all states, helping the user recognize the brand’s personality in every interaction.
The illustrations also reinforce user engagement principles, reducing perceived wait time and improving emotional connection through storytelling. This approach demonstrates how design can extend beyond function to nurture a meaningful relationship between user and interface — reminding users that even when things go wrong, the experience can still be joyful.
Conclusion
The state illustration series transforms moments of friction into opportunities for emotional connection. By merging vibrant visuals, friendly typography, and playful storytelling, the design promotes patience, optimism, and brand trust. The energetic kitchen narrative brings warmth and humanity to the digital experience, proving that even a recipe app can make every state — from waiting to error — feel alive, inviting, and full of flavour.
See something you like? Let's connect.
I'm always excited to take on new challenges and collaborate with passionate teams. Let's discuss how I can bring your vision to life.