Empty States - Sewing Academy

For this project, I wanted to present two empty states for an app designed to teach sewing, a skill I am currently learning alongside UI/UX Design.

Navigation : The text is positioned where the user is most likely to look first. The CTA button is placed lower, strategically under the user’s thumbs to encourage interaction.

Visual hierarchy : I chose a sans-serif font for a better readability, helping users understand information quickly. Using only one font seemed ideal, as there are no strong brand markers to differentiate. However, hierarchy is still essential and maintained through varying font sizes and weight. Color is also a great way to communicate, this is why I chose an eye-catching orange for the CTA button’s background.

Illustrations : Inspired by real photographs, I created these illustrations to highlight the app’s theme. The recommendation images are sourced from Unsplash.

Color palette : After creating a sewing moodboard, I noticed many inspirations featuring fabrics that combined orange and lilac. So I used a palette with rust, orange, lilac and purple, colors representing (partially) the creativity required for sewing.

Icons and Carousel : I incorporated the carousel and bottom app bar from Material 3 Design Kit on Figma, but customized the bottom bar icons using Streamline Solid Icons, a Figma community resource. The recommendations aim to guide users who are unsure where to begin.

I hope you enjoy this project and that I have successfully created engaging and motivating empty states for users.

Reviews

Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pretium platea lacinia mi et orci volutpat vulputate. Bibendum massa fusce...
Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pretium platea lacinia mi et orci volutpat vulputate. Bibendum massa fusce...
Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pretium platea lacinia mi et orci volutpat vulputate. Bibendum massa
Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pretium platea lacinia mi et orci volutpat vulputate. Bibendum massa fusce...

I like the general style of the application. It has some areas of improvement still. However I haven't seen other pages so my guesses might a bit off.

I guess the lower part could use the available space a bit better – cards with images could be bigger, CTA button also could have more space and attention.

But in general, lovely job. Keep going!

Thank you for your feedback, I was also thinking about expanding the cards ! It will be done :)

Hello, Elisa, I’d love it if you could share a presentation for this empty state so I can see it more clearly. As I zoomed in, I noticed that your choice of fonts, illustrations, images, and icons all feel cohesive and perfectly aligned within the same environment. I absolutely love it—great job! 😁 (Let me know if you implemented a presentation so I can edit my ratings.)

Thank you Kyle, I'm working on it. I'll make sure to inform you of the update ! :)
30
Claps
Average 4.3 by 7 people
5 claps
4 claps
3 claps
2 claps
1 claps
Create your very own Empty State Design for Education App project and get mentor feedback.
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>