What I owned
Redesign across a 3-person team, search, accessibility, a mobile-first system, and a four-layer token architecture shipped as JSON + CSS.
Back to work03 / 05
Platform Redesign · Design System · Non-profit · 2023
95 million views. A design stuck in 1998.
Redesigning a 25-year-old Islamic platform with 95M+ views, from forum-era Bootstrap UI to a modern, accessible, mobile-first experience with a production-ready design system.
95 million views, riding on a design that hadn't moved since 1998, and a brand kit nobody had finished. I was rebuilding the house while people were still living in it.
M95M
views on the platform redesigned
preview soon
- Role
- UI/UX Designer · Team of 3
- Duration
- 2023
- Platforms
- Web · Bootstrap stack
- Industry
- Non-profit · Islamic content
The setup
Islam Online is one of the most influential Arabic Islamic platforms in the world. 95 million views. Decades of content. And a website that looked like it hadn't been touched since a forum was state-of-the-art design. The job: redesign everything, build a system developers could maintain, make it accessible, make it scale, without losing an audience that's been coming for 25 years.
Role & constraint
The constraint
A Bootstrap-only stack, an unfinished brand kit, and an audience aged 17 to 70, design for all of them at once, without losing 25 years of loyal readers.
The problems
What was actually broken.
Problem 01
Tech ceiling, Bootstrap only
No complex component frameworks. The system had to work within the stack, not around it.
Problem 02
Branding in flux
The brand kit wasn't finalized when design started. I had to build a system before knowing its final colors.
Problem 03
Massive user diversity
Visitors span every age, culture, and geography. Design for the 70-year-old scholar and the 17-year-old student, simultaneously.
Problem 04
Scale expectation
Must grow without requiring a redesign every time new content formats emerge.
How it went
From signal to shipped.
Listen
Surveyed existing users, the #1 pain was search. Everything else came second.
Prioritize
Ran a MoSCoW session with dev and management: search + accessibility = must-have, dark mode = should-have.
Build to survive change
A 4-layer token system (primitives → semantic → component → dev) that held up even before the brand was final.
The solutions
What I actually did about it.
01Solution 01 / 03
Listen first
The #1 user pain point was search. Users couldn't find what they came for. Everything else was secondary.
Surveyed existing users, then ran a MoSCoW session with dev and management to prioritize.
Search + accessibility = Must-Havedark mode = Should-Have
preview soon
02Solution 02 / 03
A 4-layer token system
Primitives → Semantic → Components → Dev. Light + dark modes, exported as both JSON and CSS for plug-and-play handoff.
Survives an unfinished brand kit
preview soon
03Solution 03 / 03
Mobile-first, accessible, shipped
Mobile-first wireframes → component library → page ownership split across a 3-person team → developer handover with full documentation.
4.22/5 UX ratingNPS 8.05/10
preview soon
By the numbers
M95M
platform views
422
UX rating ÷100 (4.22/5)
4
token system layers
yr25yr
legacy modernized
A system that outlives an unfinished brand.
Gallery
A closer look.
The screens behind the story. High-fidelity shots landing soon.
islam-online/0116:9
islam-online/024:3
islam-online/031:1
islam-online/044:3
Reflection
What I'd carry forward
I built the system before the brand was even decided, on purpose. So when the colors finally landed, theming was one config change, not a redesign. I'd rather absorb the chaos I can see coming than pretend it won't.
Next case · 04
Wandr
Two sides, zero users. A travel marketplace from nothing.