The Problem

While Pillars is widely trusted, several usability issues became clear:

• The navigation felt crowded and unintuitive.

• Important information (next prayer, Qibla, fasting time) didn’t have enough visual hierarchy.

• Ramadan features were functional but visually disconnected from the rest of the experience.

• The interface lacked cohesion, especially in dark mode where many users rely on the app at night.

These issues created friction during moments where users expect simplicity and focus.

The Goal

• Design a cleaner, more cohesive experience that:

  • Makes the next prayer time instantly clear.

  • Provides a more intuitive and accurate Qibla compass.

  • Streamlines Ramadan information into a calmer, more spiritual space.

  • Reduces cognitive load with improved hierarchy, spacing, and component structure.

  • Enhances dark mode readability for night-time use.

My Role

I led the full UI/UX redesign:

• Research & competitive analysis

• Information architecture

• Wireframing

• High-fidelity UI design

• Interaction design

• Visual direction & colour system (dark-first)

Design Approach

1. Prayer Times — Simpler & More Focused

I introduced:

• A redesigned prayer table with clearer spacing

• A prominent highlight for the next prayer

• Subtle illustration elements for personality without distraction

• A cleaner header displaying date, location, and countdown

This allows users to understand their day at a glance.

2. Qibla Direction — Precision With Calm

The Qibla screen is one of the most-used features, so I prioritised:

• A large, easy-to-read compass

• Soft ambient lighting and gradients to reinforce direction

• Clear labels for accuracy

• Reduced clutter around the central UI

The redesign keeps the entire view centred on a single task: “Which way is Makkah?”

3. Ramadan Hub — A More Intentional Experience

Ramadan required a more meaningful layout. I introduced:

• A “Fast Progress” visual block

• Live fasting timer

• Daily donation reminders with better hierarchy

• Cleaner cards for actions such as automating charity

• A redesigned top section inspired by spiritual themes, but kept modern and minimal

The result is an experience that supports users during the busiest spiritual period of the year.

Visual Direction

I designed a dark-first interface, focusing on:

• Deep navy and violet gradients

• Soft shadows and neumorphism-inspired depth

• High contrast for prayer times

• Purposeful iconography

• Rounded components for a calm, welcoming feel

The goal was to create a UI that feels modern but still spiritually warm.

Outcome

The redesign delivers:

• A cleaner, more consistent user experience

• Faster access to daily essentials

• Better readability in dark environments

• Stronger visual identity aligned with the purpose of the app

• A more peaceful interaction flow during prayer and Ramadan

Reflection

This project strengthened my approach to designing for spiritual and culturally specific use cases. It taught me how to balance modern UI patterns with the emotional needs of users who rely on an app throughout their daily worship.