Empty State Design Brief
Here is my entry for an empty state mockup for mobile. I have kept it simple and clean with consistence icon use and a basic colour palette that passes WCAG AA and AAA standards.
I have opted to also show how the design could could look like in both light and dark mode presenting a clear colour balance.
Reviews
3 reviews
Robert’s empty state design is clean, minimal, and accessible ✅. Showing both light and dark modes is a strong plus.
Key takeaways / suggestions:
- Make actionable text like “See suggested reading” visually distinct to indicate clickability.
- Align title/back button with the menu or simplify the layout for clarity.
- Consider using an illustration that matches the theme (e.g., empty bookshelf) to reinforce context.
- Adjust typography for hierarchy: bolder headings, slightly lighter supporting text, maintain WCAG contrast.
- Enhance CTA readability, especially on dark mode.
- Adding labels under navigation icons improves usability and accessibility.
Overall: strong, user-friendly base that communicates the empty state clearly while remaining visually balanced 🌟.
The layout of the design was clean and minimalistic which made this page very easy to understand at a glance. I like that you showed how the page would look like in the 2 different versions. They both looked magnificent. Great Color Choice! However, I’m curious if “See suggested reading” was a clickable text. If it was, it then should be differentiated from other normal text so that users know they can perform an action on it.
After all, it's excellent work Robert!
Hey Robert,
The empty state design you provided looks great! It’s got all the essential elements, with clear copy and helpful next steps for users. I just have a few small suggestions to consider:
- Align the page title and back button with the hamburger menu. Alternatively, you might even consider removing the menu from this view for a cleaner look.
- Simplifying the title by removing “My” could make it more direct—“Saved Books” is clear and self-explanatory.
- To enhance the empty state, consider changing the illustration with maybe an empty bookshelf or something that fits the theme.
- Adjusting typography a bit could improve visual hierarchy. For instance, making the empty state heading bold (if that fits your intended style) and lightening the text beneath it slightly could help. Just be careful not to lose contrast. You might find the Figma plugin "Contrast" useful for testing readability here.
- To increase readability on the CTA button, consider making the label bolder. This is especially helpful with light text on dark backgrounds, as it tends to look thinner.
- Adding labels under the icons in the bottom navigation could improve accessibility and usability for users.
Overall, it’s looking solid! Let me know if any of this sparks new ideas, and I’d be happy to chat further.
Keep up the great work 💪
You might also like

Fundraising Website

Mobile onboarding flow

NEWFASHON™ - Landing page

HR Management App

Docto
