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 12 of 30 Day UI/UX Design Challenge: Diving into Data Design! 📊✨

🎨 Today’s design task I’m back with another exciting day of my UI/UX Design Challenge. I saw a job post on Dribbble and decided to tackle some of the requirements as my challenge for today. Task: Design the dashboard page based on the provided wireframe. (The requirement has a design of ‘Snapshot View’ page but I decided to do only At a Glance page for this challenge) 🚀 My design process I …

Day 13 of 30 Day UI/UX Design Challenge: Mobile site redesign for Juni! 🥤✨

🎨 Today’s design task Hi, everyone! Today’s challenge is redesigning a mobile website! I’ve been following Jay Shetty and his wife Radhi for a while now, and when I noticed their Juni website could use a little polish, I couldn’t wait to dive in and make it shine! The current mobile site: 🚀 My design process Initial Review: I looked at the Juni website on my mobile and listed …

Day 20 of 30 Day UI/UX Design Challenge: Smart Animation! 🪂

🎨 Today’s Design Task Today’s task was something I knew I’d have to tackle eventually, so I’m glad I took it on! See task description 🚀 My Design Process Understanding the Task: I carefully read the task to ensure I knew exactly what was required. Lo-Fi Design: I started by creating a lo-fi design of the navigation bar and hero section, adding a path for a paraglider silhouette. AI Assistance: I …