<?xml version="1.0" encoding="utf-8"?>

Visual Language & Color

I wanted the interface to feel like a quiet room you'd actually want to sit in and study. The warm neutrals - off-white, charcoal, deep brown - weren't just a stylistic choice, they were a direct response to the client's ask to move away from the loud, decorative aesthetic common in Islamic platforms. Nothing competes for your attention here. Everything just settles.

Islamic Identity Without Decoration

I didn't want Islam to feel like a theme applied on top of the interface. Instead, I embedded it into the functional layer - a greeting that feels personal, a Hijri date that orients the student in their own calendar. It's there, but it doesn't announce itself.

Islamic E-Learning Platfrom Dashboard 1

Streak Over Score

This was probably the most deliberate decision. Religious learning isn't about performance - no one should feel judged for how fast they're moving through the journey. What matters is whether you kept showing up. A weekly streak tracks exactly that. Consistency over achievement.

Layout & Hierarchy

I kept the hierarchy simple and the space generous. The active journey sits at the center because that's what the student is here for. Everything else - live classes, quick actions, stats - supports it without pulling focus.

Islamic E-Learning Platfrom Dashboard 2

Microcopy

Every label was written with the same intention. "Continue Learning" instead of anything that sounds like a transaction. The student is a seeker here, not a customer, and the words needed to reflect that.

Some of the constraints that i had to work with:

  • Color palette was already decided.
  • Typography was fixed by the client.
  • Client didnt want any islamic cliche illustrations or artworks.

Looking back at these decisions I made as a whole, what stands out to me is that the most meaningful choices weren't about aesthetics at all - they were about understanding who the student is and why they're here. Someone opening this dashboard isn't looking for motivation or gamification. They're showing up, again, to learn something that matters to them. I simply tried to honor that with my design.

Tools used

Figma
FigJam
Claude

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

1 review


This is a really nice, polished UI. The elements are cleanly designed and the layout / visual hierarchy is very clear.

The only thing I would suggest is including some more of the research you did and some more of the process (sketches, low fidelity wireframes, etc.)

Keep up the good work!


4 Claps
Average 4.0 by 1 person
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>