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:
- Clear Purpose: We need to explain why the page is empty and what users can expect to find here.
- Actionable CTA: Provide a clear next step to guide users on what to do next.
- Positive Tone: Use motivational and uplifting messaging to keep users engaged and encouraged.
- 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
Reviews
5 reviews
Great job! I like the illustrations and simplicity of the design. If there's one main thing I'd recommend, it would perhaps be shortening the headers. Users often have a short attention span and do not read text in full, and longer copy takes more time to read or causes users to simply not read it. Especially in case of the first one, I'd likely shorten it to e.g. "No courses started yet!" and possibly change the CTA to "Start first course".
Hello SHUBHAM,
Your designs are very clean and easy to understand. Well done! I just have a small comment:
if you differentiate the colors of the header text and the subheader text, you'll achieve better contrast. For instance, using black for the header and gray tones for the subheader text can enhance the contrast. Similarly, for all other text elements, using the "000000" black color code provides a sharper and more striking contrast for the design. If you use lighter tones, you can make the sharp contrast feel more minimal and calm.
Overall, everything is spot-on and successful. I wish you continued success!
SHUBHAM SHARMA – 🌟 I really like your empty state design for the learning app! The illustrations are engaging, the layout is clean, and the CTA is clear and motivating. 🎨 Your approach balances visual appeal with usability, and the positive tone encourages users to take action. Overall, it’s a simple, effective, and well-thought-out design—fantastic work! 👏
Nice and clean design.
I think the button text alignment is not centered. You can have a look on that.
Great Job.
You might also like
Sojo NFT Marketplace
From Idea to Full-Stack Web App
Docto
Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)
Fundraising Website
NEWFASHON™ - Landing page
Content Strategy Courses
UX Writing
Common Design Patterns
Reducing User Churn