Empty State of an Educational App
Design elements and colors:
I decided to design empty states for a book reading app and choose blue as the primary color. It represented a peaceful and calm setting and also worked well with the illustrations. The illustrations are public domain stock images with CC0 license (not needing attribution). For the typography, narrow text is used for the status so that it is easy to read. This is contrasted with the rounded button text to give a ‘weight’ to the button.
Branding and design intent:
The design is functional, straightforward, and with minimum unnecessary distracting details. The branding is meant to convey sophistication and focus.
This screen appears when the user clicks on the ‘Books’ tab and they do not have any books saved by them. The text informs them of the status and suggests the next step which they can do by clicking the CTA button.
Tools used
From brief
Topics
Share
Reviews
4 reviews
Hey Samreen,
Great job on your submission! I really like that you included a short walkthrough along with both dark and light mode views—really cool touch!
Here are a few refinements to enhance your already strong design:
- Your design brief mentions more than one empty state—it would be great to see your style applied to a different state. Also, showcasing this in a prototype would allow users to experience the transitions more effectively.
- The empty state text can be a bit difficult to read—this could be due to the typeface or size. This is also a great opportunity to add some personality and engage users with more inviting microcopy.
- The page feels a little sparse—consider adding a title at the top of the page and defining the bottom navigation more clearly to create better structure.
- The button label isn’t centered properly and appears slightly off to the left—adjusting this will improve visual balance.
- Bottom navigation icons and labels are quite small. A useful trick is to reference iOS defaults and adjust from there for better proportioning.
- The home indicator is also undersized—ensuring the correct dimensions will enhance immersion.
- Some additional context on your platform and its purpose would help in evaluating your design and understanding the user flow.
Solid work overall—I look forward to seeing more from you!
Nice work, Samreen! 👏 The calm blue palette works well, and the layout is clean and functional. To make it stronger, I’d suggest using a higher-quality, more emotional illustration, adding warmer microcopy (e.g. “Your bookshelf is waiting for its first story”), and refining typography and button alignment for a more polished feel. Small tweaks in hierarchy and spacing could also make the page feel less sparse and more engaging. 🚀
I like your choice to use an illustration. Illustrations are great for setting a vibe and communicating the brand. However, I think the illustration you chose is of a relatively poor quality and drags down the look and feel of the design. The image seems a little rough around the edges, literally.
One observation I have about the copy is that it comes across as very matter-of-fact. I see that your intention is to create a sophisticated, focused space for reading. What I come away with is a deflated feeling. It sort of feels like I'm getting ready to read a stuffy article.
Books are creative, thoughtful and emotional; I think the design would benefit from an illustration with more emotion and accompanying copy that speaks that same language. I suggest leaning into the literary aspect of the subject matter: "Your bookshelf is waiting for its first story." I just generated that using Claude, but you can see how much different that feels. It makes the experience exciting. Pair that with some powerful imagery and you have some good brand communication.
The type you selected also reinforces sort of a clinical "I'm about to read a textbook/medical journal/peer-reviewed article" vibe. That slightly condensed look brings a governmental/industrial aspect to the design that, to me, feels quite cold. A serif typeface would communicate the literary nature of the app really well.
On the button design, navy blue feels pretty austere for something artistic like literature, whereas a brighter blue like the one you chose for the dark mode button isn't very memorable. I would definitely add at least a small radius to the buttons as well. I think a muted/tonal palette could work well for this product.
The spacing looks pretty good. It could just be more even. I would probably do something like 24px between the illustration and text, and the text and button.
You have a good sense of composition. Keep it up!
Clean, user-friendly, and effectively communicates its purpose. The use of simple illustrations and concise copy provides clear guidance, while the subtle call-to-action encourages user engagement. The minimalist design ensures focus, but adding a touch of color or animation could make it more engaging. Overall, it’s a well-executed empty state that enhances the onboarding experience. Great work!
You might also like
🧡 Empathy Map
Vantyx | Tech-fashion landing page
The Tiles app
Banking App Pay Flow Redesign
BlaBla Business Manager
Ethical and Inclusive Design (page)
Content Strategy Courses
UX Writing
Common Design Patterns
Building Content Design Systems
