Empty State Design for Education App
Brand Color
I chose blue-teal as the brand color because it strikes the perfect balance between trust, modernity, versatility, and psychological appeal. This color not only boosts user engagement but also positions the platform as professional, innovative, and user-centric.
WCAG is 5.73
Typeface
I’ve chosen Hanken Grotesk as the typeface for the empty states because it combines clean, modern lines with excellent readability. The versatility of Hanken Grotesk ensures that the text remains legible and user-friendly, even in smaller sizes. This makes it ideal for creating clear and concise communication in empty state scenarios, where clarity and ease of reading are key to enhancing user experience.
CTA
For CTA I've selected #005F7B for the Call-to-Action (CTA) because it offers a brighter contrast to the primary brand color, making the CTA stand out and drawing users' attention. The addition of a subtle shadow effect enhances the button’s visibility and adds a sense of depth, making it feel more interactive.
WCAG is 7.18
Illustration
I sourced the relevant illustration from Storyset.
Screen 1
When user installs the app first thing they see is this screen.
Heading: The phrase highlights the platform’s innovative approach and motivates users to start their learning journey immediately, positioning them to take action and embrace growth.
Subheading: The phrase encourages users to explore courses that align with their interests and also helps users feel empowered and eager to begin their learning journey
CTA: I’ve chosen 'Get Started' as the CTA because it’s simple, direct, and action-oriented.
Screen 2
Users will encounter this empty state in the ‘certificates’ section if they haven’t completed any courses yet.
Heading: The phrase directly addresses the user's current status in a clear and straightforward way. The phrase is personalized and specific, making it easy for users to understand that they haven’t earned any certificates yet.
Subheading: I chose this subheading to clearly communicate the next step for the user. It encourages action by highlighting the benefit of completing courses: earning certificates and showcasing skills.
CTA: This CTA is designed to motivate users to dive into the available courses immediately, enhancing their user experience by guiding them to take action without hesitation.
Featured: I’ve used 'Featured Courses' to guide users towards relevant content and encourage them to start learning. Highlighting top courses helps users quickly find options that match their interests, making it easier to take action
Reviews
CTA button needs to standout more from the other content - colorwise, change it's color to a color, that is not used on the rest of the screen
You might also like

Let’s Play and Protect - Green Adventures for your Kids

Le Khoa

Deeply - Your Mindful Companion

Kevin Hardmeier

Nike HTML5 Games

Quang Nguyen Tat

StrayCare App - Empowering Communities for Animal Welfare

Aditya Anavekar

Beauty App Noti

Quang Nguyen Tat

Design Brief: Color System

Olha Honcharenko