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 30 of 30 Day UI/UX Design Challenge: Reflecting on My Journey 🌱

🎨 Today’s Task: Reflection and Review For the final day, my partner suggested I reflect on the 29 challenges I’ve completed to identify what I enjoyed most and what areas I excel in. πŸ’‘ Reviews & Redesigns Here’s a look back at what I would change now and which challenges I enjoyed the most! Day 1: Detective Conan Escape Room Booking Page Card Order: I’d reorder the difficulty levels …

Making TELL Japan Website Accessible and Decluttered 🧹

πŸ‘©πŸ»β€πŸ”¬ Accessibility Testing Insights During my review of the TELL Japan website, I identified 17 accessibility and UI/UX issues. While 7 of these issues required coding changes, I addressed the other 10 through design improvements. Here’s how I tackled them. βœ… How I Solved Accessibility and UX Issues 1. Low Color Contrast on Buttons and Text: I improved the colour contrast of text and …

Day 25 of 30 Day UI/UX Design Challenge: Redesigning a Japanese Website for Accessibility 🎌

🎨 Today’s Design Task Today’s task was both fun and a bit confusing! I focused on redesigning the Japanese website note.com to better align with their other pages and values while improving accessibility. The current website: Task Overview: Day 2: Design Improvement Apply research to create focused improvements for the chosen website. Steps: Refine Improvement Plan: Review Day 1 notes …