January 13, 2025

Empty State Design for Education App

Source: The best way to learn UX/UI design. (n.d.). Retrieved from https://app.uxcel.com/design-briefs/empty-state-design-for-education-app-805

Showcase your skills in designing succinct and useful empty state pages that are in line with a brand voice and style.

Design Scenario

You’re a product designer at an educational platform. Your objective is to create engaging empty state pages that users might encounter within your product/service, ensuring these pages motivate users to engage and attempt basic tasks. Ensure the pages are not only functional but also provide necessary information.

Design Task

Your design task is to complete the following:

• Select an educational platform and the device type for your design. It could be a tutoring service, a course collection, a language learning app, or another form of educational service.
• Design informative and helpful empty state pages.
• Make the pages visually attractive and consistent with the brand’s style.
• Discuss the reasoning behind your design choices for the empty pages.
• Use the provided mobile and desktop templates to showcase your designs.

Instructions

Read the instructions to ensure your submission receives maximum visibility.

• You can edit your project at any time.
• Remember to share your submission with your community. The more reviews and views it receives, the quicker it will be seen by Uxcel Mentors.
• After submitting your project, consider reviewing others’ projects. This can enhance your project’s discoverability.
• Ensure you only submit your own work.

Evaluation criteria

Your project will be evaluated using the following criteria:

• Content — Does the content serve its purpose, have high quality, and contribute to the full functionality of the project?
• Clarity — Does the copy communicate the intended message clearly and effectively?
• Visual design — Do designs effectively engage the user through strategic use of color, typography, and imagery?
• Presentation — How effectively is the work presented, including the templates provided, the formatting of the copy, the links shared, and the explanation of the design rationale?

Empty States: Course Collection

Source: The best way to learn UX/UI design. (n.d.). Retrieved from https://app.uxcel.com/showcase/empty-states-course-collection-063

Open full project

The designer decided to create empty states for a course collection app, selecting blue as the brand color to evoke a sense of calm and concentration. For the illustrations, which are intended to enhance this effect, they utilized free vector graphics by Streamline on Figma, allowing for color modifications to align with the overall palette. The icons used in the design are sourced from the Majesticons collection. As an additional challenge, the designer also opted to create dark mode versions of the screens; while the presentation thumbnail displays one screen in light mode and one in dark mode, the full project includes both versions for all screens.

Screen #1:

This screen is designed to appear in the “Active Courses” section of the “Courses” tab whenever users do not have an active course, whether they are new to the app or have already completed their previous course. The primary text quickly informs users about the state of the page, while the secondary text aims to motivate them to start a course, offering the option to browse available courses via the CTA button below.

(Note: The “Active Courses” page is conceptualized as a sub-section of the default “Courses” tab, which the arrow would navigate back to. This explains why the “Bookmarks” page does not have one—it is designed to serve as the default state of the tab.)

Screen #2:

This screen visualizes the empty state of the “Bookmarks” tab, where users can save their favorite lessons from a course for later reference. Similar to the first screen, the text is designed to inform users about the absence of bookmarks and encourage them to add some during their learning sessions. Users are provided with a CTA button to return to the “Courses” tab and continue their learning journey. For the dark mode version, a much darker shade of the brand color was chosen, with a decrease in the saturation of other colors to maintain visual consistency.