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

Empty State Design for Education App 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

Empty State Design for Education App 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

Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pretium platea lacinia mi et orci volutpat vulputate. Bibendum massa fusce...

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

Thank you for the feedback. I will incorporate the changes as I move forward with the project.
7
Claps
Average 3.5 by 2 people
5 claps
4 claps
3 claps
2 claps
1 claps
Create your very own Empty State Design for Education App project and get mentor feedback.
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>