What I owned
Redesign work across a cross-functional team: search, accessibility, mobile-first patterns, and a four-layer token architecture documented as JSON and CSS.
Back to work2 min read03 / 05
Islam Online · 2023Platform Redesign · Design System · Non-profit · 2023
95 million views. A design stuck in 1998.
Redesigning a 25-year-old Islamic platform with 95M+ views: an accessible, mobile-first experience and a maintainable design system for a Bootstrap stack.
95 million views, a 1998-era interface, and an unfinished brand kit. Search, accessibility, and system decisions had to work within the existing Bootstrap stack.
M95M
views on the platform redesigned
- Role
- UX/UI Designer · cross-functional team
- Duration
- ~3 months
- Platforms
- Web · Bootstrap stack
- Industry
- Non-profit · Islamic content
The setup
The brief was to update an Arabic Islamic platform with 95 million views, decades of content, a Bootstrap stack, and an unfinished brand kit. The work focused on search, accessibility, mobile-first patterns, and a system developers could maintain.
Role & constraint
The constraint
A Bootstrap-only stack, an unfinished brand kit, and an audience aged 17 to 70 across 25 years of readership.
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
A wide range of users
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.
The decisions
From evidence to a design decision.
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 handoff
Mobile-first wireframes → component library → cross-functional handoff with full documentation.
Client-reported 4.22/5 UX ratingNPS 8.05/10
preview soon
By the numbers
M95M
platform views
/54,22/5
client-reported expert and interview UX feedback
4
token system layers
yr25yr
legacy modernized
Project period: ~3 months
A system that outlives an unfinished brand.
Gallery
A closer look.
Key visuals from the project, then the individual decision screens. Full-fidelity shots of those are coming soon.
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.
Related work