Day 5 of 30 Day UI/UX Design Challenge: Meditation app with Psyduck! ๐Ÿฅ

Posted
Tags
UI/UX 30 Day UI/UX Design Challenge
Share

๐ŸŽจ Today’s design task

Today was probably my most challenging task yet โ€” designing a mobile meditation app featuring Psyduck! As a former web developer, mobile apps are new territory for me, but combining meditation with one of my favourite Pokรฉmon made it exciting.

๐Ÿš€ My design process

  1. Thoroughly analysed the task requirements

  2. Sketched initial ideas on my iPad using Freedom app

  3. Researched meditation and music app layouts, as well as Psyduck’s various expressions

  4. Drew and painted Psyduck on Procreate (time-consuming but enjoyable!)

  5. Chose colours and typography

  6. Created a lo-fi design before adding colours

  7. Incorporated a breathing animation from Figma community

  8. Added Psyduck’s encouraging messages during meditation

  9. Fine-tuned font sizes and colours

๐Ÿง  Challenges and solutions

  • Struggled with mobile app layout โ€” extensive research was necessary
  • Limited personal experience with mobile apps made it challenging to gauge design completeness
  • My mentorโ€™s feedback:
    • Lighten the play bar’s grey section (implemented)
    • Differentiate active icons from inactive ones
    • Improve contrast between light blue breathing animation and yellow background
    • Improve the UX of the volume buttons โ€” maybe just one button?

๐Ÿ–ผ๏ธ The final design

For my first mobile app design, I’m pleased with the result while acknowledging room for improvement.

๐Ÿ’ก What I learned today

  • Working with yellow and blue colour scheme was challenging
  • Gained confidence in using smaller font sizes appropriate for mobile apps
  • Realised I currently prefer web design, but I’m open to exploring mobile app design further

โฐ If I had more time

  • Animate Psyduck’s expression change and add a heart icon in the alert section
  • Implement mentor’s suggested adjustments

๐Ÿ’Œ Any thoughts?

What projects are you working on? I’d love to hear your thoughts on my design or any advice! My mastodon link and email are below.

Thanks for following Day 5 of my challenge. See you on Day 6!

With love and light ๐Ÿซถ๐Ÿป
Yoshie

P.S. After a day of beach volleyball and swimming at Freibad, I was reminded of the importance of staying hydrated, taking breaks, and balancing screen time with physical activity. Let’s all remember to take care of ourselves! ๐Ÿ’š

Related articles

Day 10 of 30 Day UI/UX Design Challenge: Icon Design! โžฐ

๐ŸŽจ Today’s design task Last night, I discussed my task for today with my partner. I’m grateful for his input, as he’s always thinking about how I can upskill as a designer. ๐Ÿฅนโค๏ธ Todayโ€™s task: Itโ€™s a 2-day series focused on icon design! ๐Ÿš€ My design process Understanding the task: I started by reading the task requirements. Research: To understand how to make consistent icons, I โ€ฆ

Day 23 of 30 Day UI/UX Design Challenge: Making Accessible! ๐Ÿ‘€

๐ŸŽจ Todayโ€™s Design Task I was excited about todayโ€™s task because I got to turn the accessibility issues I identified on Day 22 into actual design improvements! ๐Ÿ› ๏ธ Today’s challenge: Choose one page or screen and create a redesign that addresses the accessibility issues: Sketch or create a digital mockup of your improved design Focus on fixing the problems you identified while maintaining the โ€ฆ

Day 29 of 30 Day UI/UX Design Challenge: Redesigning the Registration Process for Seedlang ๐ŸŒฑ

๐ŸŽจ Today’s Design Task Today, I focused on redesigning the registration process for Seedlang, a language-learning app. The current design isn’t very accessible, so my goal was to make it smoother, more engaging, and user-friendly! ๐Ÿ–ผ๏ธ The Final Design This task took me the entire day, and I felt a bit slow at times, but Iโ€™m reminding myself to be patient. I used Cari and โ€ฆ