Design Vision & Spiritual Serenity
The primary design goal for Wasilah was creating a calm, reverent digital sanctuary. By pairing deep Islamic emerald green and soft cream accents with clean geometric motifs, the interface promotes spiritual focus while delivering critical daily utilities.
Seamless Authentication & Onboarding
The onboarding experience welcomes users with beautiful Islamic geometric artwork and offers frictionless social sign-in via Google, Apple, or email, allowing fast access to personalized prayer location settings.
The Challenge & Problem Context
Many existing Islamic apps suffer from cluttered layouts, intrusive advertising, and disjointed navigation, making it difficult for users to quickly check prayer times or read daily verses during busy routines.
Research & Discovery
Explored visual design patterns for daily habit tracking and spiritual contemplation, emphasizing high-contrast typography for readability during early morning (Fajr) and evening (Isha) prayers.
Wireframing & UX Architecture
Structured a bottom-navigation architecture with Home, Settings, and Notifications, placing time-sensitive prayer cards at the top of the viewport for zero-friction access.
Design System & Visual Language
Crafted a custom design token set utilizing deep emerald green (#0a4d4e), gold highlights, soft off-white backgrounds, and SF Pro typography tailored for iOS guidelines.
The Solution & Key Design Decisions
Designed a clean, single-glance dashboard that organizes Salah schedules, prayer countdown timers, restricted prayer time warnings, and quick-access utility cards with intuitive visual hierarchy.
Key Outcomes & Takeaways
Screen Mockups & UI Showcase
Click on the preview to explore in full screen or select a mockup below.
Project Information
Explore Relevant Case Studies
AI Business ToolInquri AI — AI-Powered Business Booking Agent
Turn every call into an opportunity. An intelligent call management and business booking agent interface that captures leads, automates dispatch, and syncs calendars.
EdTech PlatformTrainLine — Code-Learning & Mentorship Portal
Programming made simple for everyone. A high-conversion landing page and interactive mentorship portal for aspiring developers and designers.
Beauty & WellnessType4Pal — Haircare & Natural Beauty Landing Page
Caring for Curls, Coils & Culture. High-impact landing page design tailored for natural hair care products backed by science and personalized recommendations.
