Empty State Design for Educational App. Uxcel Brief

Nice start! Appreciated that you took time to explain your design decision process in the description. One thing I can suggest is trying different font pairing, explore more typefaces, I understand you wanted more friendly look. As for the colors, now figma support color contrast and you can double check if your text colors match the guidelines. Good job!

It's fantastic that you've put so much thought into your first UX/UI project! Your approach to empty states for the educational app sounds well-reasoned and user-centered. Here's a review and some advice based on what you've described:

Overall Strengths:

• User-Focused: You've clearly considered the user experience by aiming to make the empty states helpful and not just blank screens.
• Clear Communication: Using illustrations, concise headlines, and supporting text is a great way to guide users.
• Action-Oriented: Including clear call-to-action buttons empowers users to take the next step.
• Visual Consistency: Reusing the "Choose a course" button across both screens helps maintain a consistent user flow.
• Thoughtful Design Choices: Your color and typography choices seem appropriate for an educational context, aiming for clarity and a welcoming feel.

Areas for Consideration and Advice:

1. Contextual Consistency of the CTA: While consistency is generally good, consider if the "Choose a course" button is always the most relevant next step for the "Tests" empty state.

• Review: If tests are unlocked based on progress in specific courses, perhaps a more direct message like "Complete courses to unlock tests" or even a preview of available courses would be more helpful.
• Advice: Think about the user's mental model. If they navigate to the "Tests" section, they might be specifically looking for tests. If no tests are available yet, briefly explaining why and what they need to do to access them (which might involve taking a course) could be more direct. You could potentially have a secondary, less prominent CTA like "Explore Courses" if they haven't enrolled in any.

1. Illustration Effectiveness: Illustrations can be powerful, but it's worth reflecting on how effectively they communicate the intended message.

• Review: The "person at a desk" for courses aligns well with learning. The "person checking off boxes" for tests hints at progress, but does it clearly convey the absence of tests?
• Advice: Consider if the test illustration could be slightly more explicit about the "empty" state. Perhaps a subtle variation or a different metaphor could be explored. For example, an empty checklist or a question mark could also work. A/B testing different illustrations with users could provide valuable insights.

1. Specificity of Supporting Text: While keeping the text short is good, ensure it provides enough context.

• Review: The text for "Courses" seems clear. For "Tests," explaining when and how tests become available is good.
• Advice: Could you be slightly more specific? For example, "Tests become available after you've completed the introductory modules of a course" or "Check back here after you've progressed through your enrolled courses." This manages expectations more effectively.

1. Empty State as a Starting Point: Think beyond just informing the user about the empty state. How can these screens encourage engagement?

• Review: You've done this by including a CTA.
• Advice: Consider if there are other ways to subtly encourage exploration. For the "Courses" screen, perhaps a preview of popular or recommended courses could be included below the main message (if feasible). For "Tests," if there are practice quizzes or introductory materials related to testing in general, you could link to those.

1. Iteration and User Feedback: As this is your first project, gathering feedback is crucial.

• Review: You've explicitly asked for feedback, which is excellent!
• Advice: If possible, try to get feedback from potential users. Show them these screens and ask about their understanding and what they would do next. This real-world feedback will be invaluable for refining your designs.

1. Accessibility Considerations: While not explicitly mentioned, keep accessibility in mind for future iterations.

• Advice: Ensure sufficient color contrast between text and background. Provide alternative text for your illustrations for screen readers. Make sure your CTA buttons are easily tappable.