Greetings folks! 🖖

Today, I want to share my latest UI design exploration, a Ramadhan mobile website design called "Ramadhan Pro". This UI design is part of Design Challenge that held by @designjam.id @league.dji on Instagram.

Ramadhan Pro is a mobile website for Muslim users to see the timetable for imsak & prayer according to where the user is located, besides that there is a collection of articles that can be read by users to make their Ramadan more meaningful.

Check out a full preview down below! 👇

Full Preview 👀

Extended Preview 🔥

Here is the detail of my design project. Check it out!

The users can see the timetable for imsak & prayer based on 'hari ini' or 'today' and calendar days. For the imsak & prayer schedule, it adjusts to where the user's location is. Users can also manually change their location by selecting a location using the location button on the hero banner. Users can also set whether they want to set an alarm for a specific timetable for imsak & prayers.

Besides the above before, there is a collection of articles that can be read by users. The provided articles are a compilation of pieces that relate to the month of Ramadan. They are grouped into three categories: the most popular articles, the latest ones, and video articles.

Last but not least, users can view the Qibla direction based on their current location. They can set their location by clicking the 'Set Location' button and recalibrate it by clicking the 'Recalibrate' button.

Mockup Preview 📱

Here’s the mockup preview of my design project. Check it out!

Well, there you have it, folks.

If you have any feedback, please let me know in the comment section below. Also, if you like this shot, just click the love button. I would very much appreciate it.

Thanks for dropping by.

Want to get in touch? You can visit and follow my Instagram account here and

Contact me at: [email protected]