<?xml version="1.0" encoding="utf-8"?>
Open full project

When designing an empty state, i first understood the context, what screen is empty and why (new user, no action taken, or no data yet). Then, i focused on defining the goal of the screen: what we want the user to do next. i wrote clear, friendly microcopy that explains the state. Support it with a strong call-to-action button(Add Assignment) and, if possible, i added a simple illustration or icon to make the screen feel welcoming instead of blank. Finally, making sure the design is consistent with the app’s typography, spacing, and overall style so it feels natural in the user’s flow.

Tools used

Figma

From brief

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

5 reviews


Hi Shivani,

Thanks for your good work.

The color system, text hierarchy and illustrations in your design are awesome. And your design would be extraordinary if considering further the following points:

  1. The context and user flow: when the empty state appear, what actions are more appropriate for users in that specific context. ATM, it looks like users are searching for courses, however, the system gives the answer: no assignments yet. The question and answer seem to be mismatching
  2. the search field is prominent on the page. And the layout margin in the page is very small. This might little confuse users if the search is mobile phone native or the edu app.

Cheers.


Nice job, Shivani — the empty state feels clear, friendly, and consistent with the app’s style. I especially like the illustration and CTA. You might refine the copy to be a bit more encouraging (less repetitive), and double-check alignment/margins so the layout feels balanced on mobile screens.


I'm still thinking this through, Shivani 🤔 and I don't have any devices with me. But how might we make the search field / top bar not too close to the iPhone notch, Dynamic Island (on newer models) or the camera on an Android phone?

I think even a 15px top margin will make the search field look like it's part of the UI, not part of the phone. See if you can do more with the layout to make it feel balanced with the whole, or at least with the bottom white space.

Simple yet effective illustration! I think this makes it more human-centered, not because it'll be blank; it helps connect to common student experiences when handling assignments. We use the schedule board to keep us on track (at least that's what I did, hehe).

Now the copy. It's a bit intimidating:

  • “No Assignments Yet” (heading) = okay, understood.
  • “Looks like you don't have any *assignments yet*” (body) = again? ayyo chill...
  • “Stay Tuned” = as if I'll be happily waiting for assignments (more like deployment? 😅)

Then the CTA “Add Assignment”, so should I stay tuned or just add one myself?

People are already stressing about finishing assignments; a friendlier, more encouraging approach would be better. Quick copy I can think of rn:

“It looks like you haven't created any assignments yet. Feel free to add one whenever you're ready!”

Great job! See you on your next assignment, Shivani!


This empty state is impressively clean and communicates its message clearly to users. The design works well, but I feel it could stand out even more with a touch of interaction—perhaps some subtle animations or transitions to give it a bit of extra character. Don’t get me wrong, it’s great as is, but adding those minor enhancements could make it feel truly special.


Great effort, Shivani! 👏 I like that you started by defining the context of the empty state and used microcopy, illustration, and a clear CTA to make the screen feel approachable. The visual consistency and friendly tone are strong points. That said, watch out for mismatches between the user’s intent and what the screen communicates — for example, if the UI emphasizes search but the state is about assignments, users may feel confused. Also, tightening the copy (avoiding repetition like “no assignments yet”) and giving it a more encouraging tone could make it less intimidating for students. Overall, you’ve nailed the essentials — just refine the flow and wording, and it’ll feel even smoother! 🚀


18 Claps
Average 3.6 by 5 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>