Empty States: Course Collection

Branding, colors, visuals:

I decided to design empty states for a course collection app and chose blue as the brand color in order to evoke a sense of calm and concentration. For the illustrations, which are meant to enhance this effect, I found some free vector graphics by Streamline on Figma that allowed me to change their color and make them fit with my palette. The icons used are from the Majesticons collection. As a bonus challenge for myself I also decided to design dark mode versions of my screens (for presentation purposes, the thumbnail only shows one of them in light mode and one in dark mode, the full project contains both screens in both versions).

Screen #1:

This screen is meant to appear in the "Active Courses" section* of the "Courses" tab whenever users don't have an active course, no matter if they're new to the app or if they already completed the course they were previously working on. The primary text quickly informs users about the state of the page, the secondary text is meant to motivate them to start a course which they can do by browsing available courses using the CTA button below.

*Note: I thought of the "Active Courses" page like a sub-section of the default "Courses" tab, which the arrow would navigate back to. That's why the "Bookmarks" page doesn't have one - it's already meant to be the default state of the tab.

Screen #2:

This screen visualizes the empty state of the "Bookmarks" tab where users can save their favourite lessons from a course for later reference. Again the text is supposed to inform users about the lack of bookmarks and encourage them to add some during their learning sessions. Users can use the CTA button to go back to the "Courses" tab and continue learning. For the dark mode, I chose a much darker shade of my brand color and decreased the saturation of the other colors.