Mobile: Empty State for Learning Application

Empty state of a learning application screen containing an image, text, and a contrasting CTA button.

First, I created sketches for this challenge, aligning all the elements needed to design an empty state. I also explored examples on the web for research purposes and observed that the pattern for creating empty states is quite common. Typically, it includes a hero illustration at the top, followed by a heading, a brief description, and primary and secondary CTA buttons to guide the user toward taking action.

These are some key-takeaways I found when design a empty state:

1. Clear Purpose: We need to explain why the page is empty and what users can expect to find here.
2. Actionable CTA: Provide a clear next step to guide users on what to do next.
3. Positive Tone: Use motivational and uplifting messaging to keep users engaged and encouraged.
4. Visual Appeal: Include an engaging hero illustration that aligns with the theme and enhances the user experience.

A well-designed empty state not only informs users but also guides them toward their next step. By combining clear messaging, engaging visuals, and actionable CTAs, we can create a seamless and motivating user experience. What are your thoughts on designing effective empty states? Let’s discuss!

I also write a blog about the whole process that I take to make this you can check it via this link as well : https://medium.com/@shubham.sharma00019/designing-engaging-empty-states-for-an-educational-platform-28ccc58cd931