Empty State design for Educational App

Decision Process & Rationale

I started by identifying the primary purpose of these screens: to inform the user that there’s currently no data (whether it’s mentors or saved resources) while guiding them toward the next actionable step.

My focus was on creating a positive and friendly user experience instead of letting the empty state feel frustrating or unhelpful.

To achieve this, I included a simple and welcoming illustration that visually communicates the state of the screen. This approach keeps the design clear and engaging without making it feel cluttered. The illustration also adds a sense of warmth and personality to what could otherwise be a blank, lifeless screen.

For the color palette, I used the brand’s primary color #1E3A8A as the highlight to keep the design consistent with the app’s identity. Typography choices were also aligned with the brand to maintain a clean and professional look while keeping the content easy to read.

The text content was kept short and straightforward to minimize cognitive load and clearly guide users toward the desired action — whether it’s saving a new resource or adding a mentor.

I also ensured visual and structural consistency with the rest of the app, so the transition between screens feels smooth and cohesive. Finally, the layouts were designed with responsiveness in mind, ensuring that the balance between text and visuals remains clear across different devices and screen sizes.