The Muslim Pro app recently got a mini makeover on its Onboarding screen
For this project, I worked closely with the Product and Engineering teams to create micro-animations and transitions that enhance the user experience, making it smoother and more intuitive when setting up Prayer Time and Quran preferences.
ESTABLISHING BRAND POSITION
For the setup screen, the team decided to incorporate the watermelon symbol, a subtle yet powerful nod that aligns with our current app icon. Muslim Pro prides itself in standing in solidarity with Palestine. Having the watermelon transition into the Muslim Pro logo felt like a confident and intentional choice, visually expressing our support in a respectful and meaningful way. Upon selecting the ‘Prayer Time’ setup option, users are greeted with a transition screen inspired by the iconic pillars of the Nabawi Mosque—one of the most significant mosques in Islam.
Motion Design: Bringing Icons and USER EXPERIENCE to Life
The entire onboarding revamp leaned heavily on micro-animations and subtle motion graphics across each screen. The motion work, my main area of contribution, played a key role in giving the experience a fresh and fun feel.
A map animation to guide users through enabling their location.
A screen displaying a preview of the Adhan notification for each prayer time.
Users can listen to a sample of the Adhan, accompanied by a soundwave animation for a more immersive experience.
Once the setup is complete, users are greeted with a confirmation screen featuring a check mark
Similarly, when users begin the Quran onboarding setup, they’re greeted with a transition screen that mimics the opening of the Quran—designed to feel like the reverent experience of opening the holy book in real life.
Credits
Project Manager: Zul
Design & Animation: Atikah Daman
UX Designers: Isamuddin, Abdul Haq
Engineers: Farooq, Chunwai
Software: Adobe Illustrator, After Effects, Figma
↑Back to Top