CoachUp - Learning App (Empty State)
For the "My Bag" section of the app, which handles purchased courses, I've designed an engaging empty state to encourage user interaction.
- Text: When users haven’t added any courses yet, the empty state will display a friendly and motivating message with a clear call to action (CTA).The primary text will inform users that their bag is empty, while the secondary text will encourage them to explore and start adding courses.
- CTA Button: The CTA button below will direct users to browse available courses and kickstart their learning journey.
- Design Palette: The design is enhanced with a vibrant blue and yellow color palette, inspired by the licensed illustration from Adobe Stock, ensuring a visually appealing and engaging user experience.
Reviews
4 reviews
Nice job, Shivangi. The message is clear and the CTA is well-placed—makes it easy for users to know what to do next.
The color palette feels lively and fits the learning theme nicely.
Maybe try simplifying the text a bit more to keep it even more direct and friendly.
Overall, good thinking and solid execution
Nice work, Shivangi 👏 The “My Bag” empty state feels friendly and motivating, and the illustration adds a lot of warmth to the experience. The CTA is clear and well-placed, making it easy for users to know the next step. One small improvement could be simplifying the supporting text just a bit to make it feel even more direct. Overall, this is a solid and engaging design — keep refining, you’re on the right track 🚀✨
Hey Shivangi,
I like that this page is presented nicely and engaging. A few things come to mind though, from the way I see it:
• Is the alignment intentionally different between the top bar, content, and bottom bar? The top and bottom bars have the same alignment in terms of left and right margins, but the content has a wider length. I’m used to seeing everything in synergy and contained within.
• I think you can also resurface the micro illustrations (light, pause, eyes, love) that surround the person by changing their color to white or any lighter color in dark mode. They are some of the many pleasant elements that I think ought to be visible.
• Using white on top of yellow for the "Browse Courses" button might not be a good idea. AFAIK, according to the contrast principle, it’s best to differentiate between foreground and background colors, as it might not be legible for some people.
• Also, consider adding some boldness to the CTA text to make it more firm and solid in reassurance: “Yes! Let's browse some courses!”.
You're off to a strong start with the "My Bag" empty state! The friendly and motivating tone, combined with a clear CTA, helps guide users toward the next step in their learning journey. That said, there are a few areas where you can refine the design for better clarity and usability.
First, I noticed that you're using blue as the primary color in light mode and yellow in dark mode. While both colors are vibrant, switching between them can create inconsistency in brand identity and user experience. I recommend choosing one primary accent color across both modes to maintain visual harmony. If differentiation is necessary, you can adjust supporting UI elements rather than the main CTA color.
Another point is the bottom navigation bar in light mode—it's too light, making the text difficult to read. This could impact accessibility, especially for users with lower contrast sensitivity. I suggest running the design through an accessibility contrast checker to ensure readability, particularly for small labels. Darkening the text to increase the contrast would improve legibility.
Lastly, while I personally love emojis, the combination of an illustration plus emojis within the heading and subheading makes the screen feel visually cluttered. Since the illustration already adds personality, removing the emojis will create a cleaner, more focused layout while still keeping the friendly tone intact.
Keep up the great work!
You might also like

Sneak

Heuristic Evaluation - Booking.com

User persona for TikTok

Empathy Map - Revolut
![UNIVERSALTAXPROFESSIONALS WEBSITE REVAMP [ Informational Website ]](https://users-content.uxcel.com/451aa544-1b86-419f-9120-5a6ac83f023f/briefs/universaltaxprofessionals-website-revamp-informational-website-thubmnail-8090-1756604786988.jpeg)
UNIVERSALTAXPROFESSIONALS WEBSITE REVAMP [ Informational Website ]
