Education App Empty State page

Hey! I can see you have a solid foundation, but there are indeed a few things that need refinement:

👍 The illustration is friendly and communicates the empty state well

👍 The layout is clear, CTA stands out with color

👍 Mobile/desktop responsiveness is maintained

What needs improvement:

1. Hierarchy and copywriting - The heading "Looks like you haven't enrolled in any courses yet" is too long and sounds overly formal. Try something short like "No courses yet" or "Start your learning journey". Add a subtitle explaining what the user can do.
2. "Popular courses" - These tiles look random - no descriptions, titles, or any information. This doesn't work as an invitation to explore. Consider adding course names or removing this section from the empty state entirely.
3. Search bar - somehow I'm not convinced of this.This search bar with just a magnifying glass looks like an unfinished element. Either remove it completely (Browse Courses might be enough), or create a proper search field with a placeholder.

About your questions: Yes, mockups from Figma Community are good practice. You can add them to your local library in Figma (Assets menu) and use them across multiple projects.

Summary:

You have a good starting point, but the project still needs work on details and consistency. Focus on refining the copywriting, clarifying UI elements, and creating a more complete visual system - this will elevate the project quality by several levels. Good luck! 💪

Shaffiat, let's tackle this one by one, shall we?

User Interface

There are tons of courses here on Uxcel, and plenty of books and videos out there covering basic design principles, especially hierarchy and composition. You just need a bit more time to absorb those, and you’ll start to see how to refine your work. You already have a strong foundation. Right now, your design feels a bit unbalanced, things like type size, spacing, and icon stroke thickness could use more consistency.

Mockups

I’m not sure if you’re following the same process I usually use. Normally, I just go to Figma Community, find mockups, open them in Figma, and they’ll appear in my drafts. That way, I can always go back, copy, and paste mockups as needed. Or do you have a different workflow when switching between Figma Community and your files?

Each OS has its own official UI components you can use, whether it’s Android or iOS. If needed, you can copy both phone mockups and OS bars, then turn them into your own reusable template as a starting point for new projects.