CoachUp - Learning App (Empty State)

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

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!