Empty State Design for Education App
Introduction
As a UX/UI designer for an educational platform, my goal was to create engaging empty state pages for a mobile app. These pages appear when users haven’t added any courses or favorites yet.
Design Decisions
I chose bright, friendly illustrations and positive messaging to make the empty states feel inviting. Clear call-to-action buttons like "Browse Courses" guide users on what to do next. Consistency with the brand's colors and fonts ensures a cohesive look.
Final Thoughts
These designs aim to motivate users to engage with the app while providing a visually appealing and user-friendly experience. I focused on making the empty states informative and encouraging, turning a potentially frustrating moment into an opportunity for engagement.
I appreciate your feedback. Thanks :)
Reviews
3 reviews
As I explore your design, I’m impressed by the consistency and layout - every element is thoughtfully aligned, showcasing attention to detail.
Additionally, considering discoverability could further enhance user engagement. With ample screen real estate, introducing a section featuring popular courses that align with users’ interests could spark inspiration and drive activity within the app.
Lastly, I’ve noticed that active state buttons in the bottom navigation bar could be more prominent for better visual distinction. For instance, icons could become larger at 1.5x scale, while the frame could receive a subtle lift-up to create greater contrast.
Hi Dennis,
First of all, I really like the consistency and layout; everything is well-aligned, and you clearly have an eye for detail.
- One suggestion for improvement is to consider discoverability as a factor in your design. Although these are empty states for “Favourites” and “My Courses,” you could add a quick way to access other parts of the app. Given the ample empty screen space, consider adding a section for popular courses that people with similar interests have taken. This could directly enhance user activity and overall experience. It’s just a thought and not mandatory, but hopefully, it sparks some ideas for future designs.
- I also noticed that the active state buttons in the bottom navigation bar are not very prominent. You might want to change their background or tweak the UI to make them more noticeable.
Other than that, well done! 👏
ChatGPT said:
Dennis, this is a solid and well-structured approach to empty states 👏. You’ve done a good job of keeping the design friendly, consistent, and brand-aligned, which helps turn what could feel like a “dead end” into a soft invitation to engage.
A couple of areas you could take even further:
- Discoverability boost → as both reviewers mentioned, you’ve got screen real estate that could be used to surface “popular courses” or “recommended for you.” This would make the empty state feel less static and more like a springboard for action.
- Navigation clarity → making the active nav button stand out more (contrast, scale, or even a subtle elevation) would improve orientation and reduce guesswork for users.
- Microcopy refinement → your positive messaging works well, but you could experiment with copy that sparks curiosity, e.g., instead of just “Browse Courses,” try “Find your first course and start learning today.” Small tweaks like that add motivation ✨.
Overall, your design clearly shows attention to detail and user empathy. You’re not just filling space—you’re giving users a nudge in the right direction. Keep iterating; you’re definitely on the right track 🚀.
You might also like
HR Management App
From Idea to Full-Stack Web App
Docto
Fundraising Website
Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)
NEWFASHON™ - Landing page
Content Strategy Courses
UX Writing
Common Design Patterns
Reducing User Churn