Empty State design for Educational App

Hi Coraline! I just came across your project here as well, so I decided to use the feedback I left on Discord as my first comment on a shared project. :)

I really like what you've created. The color palette is stunning, and it perfectly complements the illustrations you've selected. However, there are a few areas that could use some fine-tuning, such as the spacing and the buttons. For instance, the 'no progress saved' page seems to have slightly smaller spacing between the title, body, and button when compared to the other pages. The course cards' time section and divider line need to be more consistent throughout all the cards as it seems closer to the right on some cards compared to others. Small details like this can make your design more solid.

There needs to be more consistency on the buttons. The default state for some is pastel purple but for the 'go to homepage' buttons it's a stroke with no fill. However, it seems like the purpose of all of them is to bring the user onto a different page than the one they are on. I suggest keeping buttons consistent and removing the arrow for a cleaner look, especially if they all have the same goal! How about using the stroke only design for input fields instead?

I noticed the hover state changes the buttons into rectangles with sharp corners, drop shadows, and no fill. Though it looks cool, it might seem unnatural when considering the rest of the design details having rounded edges. I don't see any other pages employing sharp corners, so I think that might seem out of place and too strong. After all, sharpness is associated with certainty, but the hover state represents more of a questionable act. I'm trying to say that when we hover over something, we're questioning whether the button or component presented to us is clickable or brings us elsewhere and whether we would like to proceed or not. I suggest changing your approach to this hover state into a gentler, unified design. If you decide to keep the default buttons with the semi-rounded corner and pastel fill, how about making the hover state a darker shade of that color? For instance, a greyish lilac could maintain the consistency of the design while providing a clear indication of the button's clickability. Try this HEX code and play with the opacity #9794A6.

Overall, I thoroughly enjoyed navigating through your design. The effort and thought you've put into it are truly commendable, and if I were learning English for a second time, I would definitely choose this platform over others! (PS: sorry for this long msg)

Great job.

You did a great job. the isometric illustrations and key words were playful. It gave me a feeling that i am safe and i did nothing wrong.

Simple, clean and shows good hierarchy! Also a nice use of illustrations. Great work keep it up!