Empty States - Sewing Academy

Your design for the "Empty States - Sewing Academy" app is commendable, showcasing a clear understanding of user experience principles. Here are some observations and suggestions:

Strengths:

• Visual Hierarchy: The use of a sans-serif font enhances readability, and the strategic placement of text and CTA buttons guides users intuitively.

• Colour Palette: The combination of rust, orange, lilac, and purple conveys creativity, aligning well with the sewing theme.

• Illustrations: Custom illustrations inspired by real photographs add a personalized touch, reinforcing the app's theme and engaging users.

Areas for Enhancement:

• Empty State Messaging: Consider crafting more engaging messages to motivate users. For instance, instead of a generic prompt, you might use: "Ready to start your sewing journey? Explore beginner lessons now!" (https://uxdworld.com/best-practices-for-designing-empty-state-in-applications/)

• Visual Balance: Ensure that illustrations do not overshadow other elements. Slightly reducing their size can provide more space for text and recommendations, enhancing overall balance. (https://www.mockplus.com/blog/post/empty-state-ui-design)

• Recommendation Labels: Adding descriptive labels like "Beginner-friendly" or "Trending" can guide users' choices, making the app more user-friendly. (https://uxwritinghub.com/empty-state-examples/)

• Navigation Icons: Including text labels alongside icons can improve clarity, aiding in navigation. Additionally, using colour variations or underlines to indicate active icons provides clear feedback on the current section. (https://www.hongkiat.com/blog/mobile-app-empty-state-designs/)

• Accessibility: Ensure that text and background colour combinations meet accessibility standards (WCAG) to maintain readability for all users. Implementing visual indicators, such as focus rings, can assist users in navigating via keyboard or assistive technologies. (https://www.w3.org/WAI/tips/designing/)

• Microinteractions: Incorporating subtle animations for elements like the carousel and CTA buttons can create a more dynamic and engaging user experience. (https://supercharge.design/articles/5-tips-for-better-empty-states-in-ui-design?utm_source=chatgpt.com)

Hello Elisa,

I like your design; it looks vibrant and energetic. With just a few adjustments, it can be even more perfect:

1. Ensure that the text font size does not drop below 12 px to facilitate readability of smaller texts. The thickness of the texts also significantly impacts readability and contrast, especially for subtexts in images. You might consider setting these in medium or regular size to differentiate them from the headers.
2. There is too much space between the header and body text, making them appear disjointed. Reducing the spacing between them can make it easier to see that they are related at first glance.
3. In the navbar, the selected section does not stand out distinctly from the others. Adding a more eye-catching color can make it immediately clear which section is selected.
4. Increasing the button text size by one and making the color whiter can enhance readability.

These tweaks should help enhance the overall user experience and make your design stand out even more.

Elisa’s Empty States - Sewing Academy project is a good start but could be improved. The navigation is easy, and the CTA button is well-placed, but it could stand out more. 

The color palette and font choice are good, but they feel a bit basic adding more contrast or personality could make the design pop. 

The illustrations work, but using custom visuals instead of stock photos would make it feel more unique. 

The carousel and icons are functional, but more customization would make them fit better with the app’s theme. 

Overall, it’s a strong effort with room to improve.

Great job! I really like these empty states, they maintain a visible theme and consistency while applying the most crucial elements - an informative header, clear CTA, recommended material, and a visually pleasant graphic.

If I were to consider any potential improvements, perhaps I'd look at these few elements:

• Making the top header larger, making it higher in hierarchy than "Recommendations". Currently the top header isn't as visible as it should be off the bat. If "recommendations" is e.g. H4, then the top header should be H3.

• I'd also consider moving the description text ("Start learning to sew...") a bit closer to the main header. Currently they are a bit unnaturally separated from one another, so it would be good to place them closer, providing better visual grouping. Additionally I'd consider moving that header and description a bit lower so that it's not as high up on the page

• I'd also consider moving the course titles a bit closer to the course images. Notice how the distance from the images to "Recommendations" is the same or even smaller than the distance from the images to their titles.

• Additionally, I'd consider making the CTAs full width, this makes it easier to tap. This isn't a must-have, but it is a traditional convention for mobile design.

• Lastly, a small consideration - if this is the page that is visible to users when they tap "courses", why not consider displaying a large list with a small section for "current courses" instead. This should likely be a space where users go to find new courses and they should be incentivized to undergo multiple courses, hence having the entire library visible as a list (vertical to show more information, including e.g. difficulty, time duration, course author, etc.) could be a good option. If you'd like to allow users to very easily go back to current courses, it might be a good idea to have a separate app tab for "All courses" and "My courses" :) And if the empty state you designed is a page visible after clicking somewhere on the Courses page, then there should definitely be breadcrumbs on the top left corner / a "go back" button.

Once again, great job and good luck! If you have any questions, feel free to let me know!