Empty State Design
Overview
The empty states are designed to engage users and provide clear guidance when no content is available in specific sections of the app.
Screens Designed
Courses: This screen displays when a user has not yet enrolled in any courses. The design includes:
- A friendly illustration reinforcing the theme of learning and exploration.
- Encouraging messaging to prompt users to explore available courses.
- A call-to-action (CTA) button to navigate directly to course discovery.
Wishlist: This screen appears when the wishlist is empty. It features:
- An engaging illustration to make the screen feel lively and positive.
- A motivating message to inspire users to add courses.
- A CTA to browse and select courses to add to their wishlist
Choice of Color
I chose purple and yellow for my design because they create a vibrant and engaging contrast. Purple represents creativity and wisdom, fostering a sense of focus, while yellow adds energy and optimism, making the app feel welcoming and motivating.
And for sure my color choices meet WCAG standards for contrast and readability.
Typography
I selected Montserrat: a modern, clean sans-serif font that works perfectly for education apps. Its geometric design ensures excellent readability, making it easy for users to engage with content.
Reviews
2 reviews
Your empty state designs are really well done — I especially like how the copy strikes a friendly and motivating tone without making the user feel stuck, and the illustrations add the right level of positivity and context. The color choices feel vibrant yet balanced, and the CTAs provide clear next steps, which makes navigation intuitive. One small suggestion would be to reconsider the term “wishlist” in an educational context (something like “Saved Courses” or “My Learning List” might resonate more), and perhaps emphasize the benefits a bit more in the messaging, like highlighting flexibility or self-paced learning. Overall, these are solid, user-friendly empty states that create both clarity and engagement.
Nice work! What stands out to me right away is the copy. It strikes the right tone without making me feel bad or confused about having an empty screen. The illustrations are nice and contextual. The clear CTAs and visible bottom navigation help me understand exactly where I am and what to do next.
Just a couple of tiny thoughts though — it might be worth considering if "wishlist" is the best choice of words for an educational context (maybe "saved courses" or "my learning list"?). Also, maybe you could emphasize the benefits more with copy like "Save courses to learn at your own pace" for the saving feature. But honestly, overall these are really solid empty states that do the job!
You might also like

Fundraising Website

Mobile onboarding flow

NEWFASHON™ - Landing page

HR Management App

Docto
