EDTECH / FINTECH
Creating a design system to support religious compliance and education
Context
The company was a US-based Islamic fintech whose screener tells you if a stock is halal. Five years in, there was still no way to teach a mostly beginner audience how compliance actually works.
Problem
The platform earns on users who stay and invest, not on one-time verdict-checkers. The difference is understanding, and nothing in the product taught it.
What I did
I built the design system the company didn't have and streamlined an inconsistent platform into one component library. Then I built the education flows on top of it. Designed it to hold up on a phone. Flagged the accessibility failures the parent site wouldn't fix.
Impact
Design system and accessible education flows delivered. Full courses staged, not yet live, so this is a delivery-and-judgment story until the screens ship.
The educational site's home screen on mobile and tablet devices
The original button didn't have enough contrast. The new one (on the right) met WCAG standards.
My role
Year
Duration
Senior UX Designer
Aug. 2025 - Mar. 2026
7 months
Halal investing is high stakes, because of religious compliance
Halal investing is the only investing option for millions of practicing Muslims. And it’s hard to figure out.
SPU's American Muslim Poll found 27% of Muslims report challenges with financial institutions, roughly double the general public.
The company’s core audience, American Muslims, were often new to investing and never held a portfolio at all.
While a lot of competitors have ‘stock-checkers’, where they can tell you if a stock is halal, the company built the whole path: screen a stock, research it, build a portfolio.
Because the stakes of building a portfolio badly aren't financial; they're religious. And compliance moves. A stock that passes this quarter can fail next, which means the user has to be able to recheck on their own.
The company had no education layer to teach that, until I joined.
Meet Adi, a new Muslim investor
Adi is a devout Muslim, new to investing. He's started saving for Hajj, the pilgrimage every Muslim is obligated to make if they can, and he's realized he can't reach his financial goal on cash alone.
Adi knows riba, interest, is strictly forbidden, like pork and alcohol. He can find halal stock checkers online. What he can't find is trust.
A checker hands him a verdict, halal or not, and tells him nothing about why. So the fear stays: he's about to fund a pilgrimage with money he can't fully vouch for, and a green checkmark he doesn't understand isn't enough to quiet that.
This isn’t just a financial worry. It’s the fear of funding a religious pilgrimage through forbidden means. A verdict he can’t interpret leaves him vulnerable to needing to donate money as a means of purification.
That's the gap education closes. Not the answer, the ability to reach the answer himself, and to know when the answer has changed.
How I built the education layer from scratch
The company had no component library and no real style guide, just styles applied differently by whoever built each section.
Here’s how I built their design system.
I streamlined what existed into one consistent set of colors, spacing, and text styles
Rather than building new components from scratch, I created a component library based on existing screens.
I created consistency when the platform kept moving
The trading platform changed throughout my time with the company, so part of the job was re-syncing each time. Being aware of changes across the organization allowed educational site to stay consistent with the main site.
I pushed for consistency across the entire organization with the design system
The parent site's greens failed basic contrast. I flagged it, escalated it to the CEO, and it was ignored, so I built the educational site to the standard the main site wasn't meeting.
I designed responsive, with the phone as a real target
The company’s main audience is on mobile. So while desktop helped to think about page structure, I checked to ensure it was accessible by mobile.
I changed lesson outlines to be mobile-first
Audiences needed the ability to watch individual lessons and access the outline of a course. I built a hide-and-show control to avoid taking up the entire screen.
Chart of some of the typography sizes, spacing, etc
Footer of the website designed to match the original site
The original site (left) with inaccessible green buttons and type and the educational site (right) with the accessible green
The mobile screen of the Articles page
The learn and lesson screens in mobile
Result: A Design system built for religious compliance
What shipped
-
A design system and component library where there had been none: one palette, one spacing scale, one type system, and components built in states rather than screens.
-
The Academy structure on top of it: homepage, course pages, mini-course flow, quiz flow, and a home for the articles and newsletters they were already publishing.
-
An accessibility standard the parent site still doesn't meet.
-
Full certified courses structured and designed, staged to launch.
Takeaway
-
The education layer was the visible deliverable. The system underneath it was the one that made the rest possible, and it's the piece that outlasts any single page.
-
Accessibility was a scope decision, not an org-wide fight I lost. I couldn't change the parent site. I could make sure the part people actually sit and read was readable, and I did.
