Empty State Design for Education App
Design Brief: Empty State Design for Education App
I have created 5 screens of empty states for the education app.
Choice of Color:
I have used Blue (#AADDFA) as the brand color. I used this color to calm the mind of the learner as blue color is known to have a soothing effect. Learning can sometimes become a stressful process, so using blue will balance the emotions and help the user to study peacefully.
Choice of Typeface:
I have used the Typeface named Sora for designing the screens. Sora, being designed using clear and legible letterforms, makes it easy to read the text in different font sizes. It also gives a modern and professional look. Being an open-source font, Sora is freely available for both personal and commercial use. This makes it an accessible option for a wide audience without licensing restrictions.
Choice of Illustrations
I tried to create a very playful mood by using illustrations with a small boy in each of them. This helps to maintain the consistency of design and users also start connecting with the character. This prevents them from being overwhelmed.
Types of empty states covered:
- No Course added yet
- Bad internet connection
- Congratulations on Module completion
- Page not found
- No Books added in Library
Message Copy
I have used ChatGPT to generate content for the screens. I gave a prompt based on the message I wanted, and the AI tool crafted nice messages for me.
Tools used
From brief
Topics
Share
Reviews
2 reviews
Prajakta, this is a thoughtful and well-rounded approach 👏. A few highlights that stand out:
✅ Consistency through character – using the same playful boy across all screens gives your design personality and helps users form a light emotional bond with the app.
✅ Blue palette – your reasoning behind using blue for calmness during learning is solid, and it ties well to the education theme.
✅ Clear typeface choice – Sora is a great pick; it balances readability and modern aesthetics.
Some opportunities to refine further:
- Contextual tone for each state → e.g., “Bad internet connection” could be more empathetic (“Looks like we lost connection — don’t worry, we’ll retry in a moment”) to reduce frustration.
- Visual hierarchy → ensure the illustration doesn’t overpower the CTA. Keeping the call-to-action dominant helps users recover quickly from empty/error states.
- Accessibility check → make sure blue contrasts well with white/gray text, especially on smaller screens.
- Completion state → “Congratulations” screens are a great idea, but you could amplify delight with subtle animations or confetti microinteractions 🎉.
Overall, you’ve clearly thought about both emotional impact and usability — great balance between playful and practical. 🚀
Good visuals
You might also like
Sojo NFT Marketplace
Heuristic Evaluation of Revolut Mobile App
Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)
From Idea to Full-Stack Web App
Docto
Fundraising Website
Content Strategy Courses
UX Writing
Common Design Patterns
Reducing User Churn