Empty State for iRead
Educational Platform: iRead
This is an ebook learning app that users can purchase and read ebooks.
Design Process
1. Decide which two empty states will be displayed.
2. Decide the elements used to deliver information on each screen.
3. Combine illustrations with writings to inform users about the empty state.
Design Rationale
For the “Empty Book Collection” screen: This screen is to inform users that they currently do not have any books in their collection. The copy and the CTA button are to encourage users to find books they like and start exploring.
For the “No Search Results” screen: This screen is to inform users that there is no matching search result available based on what they typed in the search bar. The copy and the CTA button are to ask users to try other words to search again, or visit homepage if needed.
Tools used
From brief
Topics
Share
Reviews
2 reviews
On the principle of empty states, good work. The illustrations reflect the context well and are in the same style on all screens!
However, it would have been great if they had been the same size and in the same positions everywhere. Ditto for the position of the action buttons and texts!
Keep practicing ! 💪🏽
There's a lot of potential in this project, I really like the illustrations used, they are cool. And they are visually consistent with the rest of colour tones of the interface.
But, I think that you should consider a little bit about the scale and proportion of the elements on the interface.
Some icons are too big for the labels. There's a little bit of inconsistency on the spacing between icons. The labels for the icons could be increase a little bit on the font size and I would remove the underlined style for selected elements instead marke it with the same colour of the selected icons.
I think you can search for some UX patterns for bottom navigation bars available online.
An example would be the bottom navigation, which it's too congested needs to breathe a little bit and have a little bit more of white space.
Some icons are bigger than others, and some of the icon line widths are different, e.g. top “return/back” icon, these are just tiny details that help the interface a little bit more appealing but also more consistent and professional.
You might also like
GoDaddy Sign-in Page Accessibility Optimization
My Bestie Nessie - Making a game in one day at the Oakland Museum of Art & Digital Entertainment
Web SaaS Sign-Up Flow
Push notifications
Samyoung Chemical
Roof Recovery – Local Roofing Contractor
Content Strategy Courses
UX Writing
Common Design Patterns
Reducing User Churn