How Ijjad built a unified design system deployed across 10+ Saudi government ministries, used by millions of citizens. 60% faster development, 100% accessibility compliant.
Case Study: National Design System for 10+ Saudi Ministries
Ijjad builds conversion-focused websites and digital products for SMEs and founders across Jordan, Saudi Arabia, and the GCC. This case study guide gives practical scope, SEO, and market context from a team that has shipped 20+ digital products.
- Ijjad serves Amman, Riyadh, Jeddah, Iraq, and the GCC.
- Every recommendation is framed around scope, conversion, and search visibility.
- Use the guide to clarify decisions before speaking with an agency.
- Talk to Ijjad when you need senior delivery, not generic templates.
When the Saudi Digital Government Authority (DGA) needed every ministry to share one trustworthy, accessible digital experience, the traditional approach — letting each ministry redesign on its own — had failed for years. This is the story of how Ijjad designed and shipped a national design system that unified 10+ Saudi ministry websites, cut development time by 60%, and put accessibility at the core of citizen-facing services for the first time.
The Challenge: A Fragmented Digital Government
Saudi Arabia's Digital Government Authority faced a problem that every large government in the world recognises: 10+ ministries, each running its own redesign, each speaking a slightly different visual language, each implementing accessibility (or not) in its own way.
For citizens, this fragmentation wasn't a design issue — it was a trust issue. When the website you visit to renew your driver's license looks completely different from the one you use to file a tax return, two questions surface immediately: Am I on a real government site? Can I rely on what I'm seeing? Those questions are bad for citizens, bad for ministries, and bad for the broader Vision 2030 push toward a fully digital state.
The mandate from DGA was clear:
- Create a unified national design system every ministry would adopt
- Hit WCAG 2.1 AA accessibility on every component
- Enable each ministry to keep its identity while conforming to the standard
- Cut the time and scope of building new ministry digital services
The Before / After at a Glance
| Dimension | Before | After (with Ijjad's Design System) |
|---|---|---|
| Visual identity | 10+ different palettes, fonts, layouts | One national language, ministry sub-themes |
| Build time per ministry | 9–12 months from scratch | 3–5 months using shared components |
| Accessibility compliance | Inconsistent, often missing | WCAG 2.1 AA enforced in CI/CD |
| Citizen recognition | "Is this really gov?" | Instant, consistent trust signal |
| Per-ministry redesign scope | Millions scope each | Fraction of legacy scope |
The Solution: Five Pillars of a National Design System
Ijjad's team — led by founder Karam Abd Al Qader, drawing on a decade of work with government and enterprise digital programmes — designed the system around five non-negotiable pillars.
1. A Unified Component Library
We shipped 100+ reusable UI components — navigation bars, forms, data tables, cards, modals, alerts, breadcrumbs, tabs, pagination, file uploaders, and more. Every component was tested across browsers, devices, and screen readers before release.
2. Government-Grade Design Tokens
Typography scales, line-heights, spacing systems, and grid structures were engineered to hold up across every ministry service — from high-density data tables to citizen-facing informational pages — without sacrificing readability or brand consistency.
3. WCAG 2.1 AA Accessibility — Built In
Color contrast ratios, keyboard navigation, screen-reader semantics, ARIA labelling, focus management, and reduced-motion support were built into the foundation, not retrofitted later. Automated axe-core testing runs in CI/CD on every pull request, blocking any regression. Citizens with visual, motor, or cognitive disabilities can now access ministry services that were previously unusable for them.
4. Ministry Theming & Customisation
Each ministry needed to maintain its identity while conforming to the national standard. We built a theming layer using CSS custom properties that lets ministries apply their brand colors, logos, and content structures without forking the underlying components. One source of truth, ten distinct ministry experiences.
5. Documentation & Developer Experience
A design system is only as good as its adoption. We shipped Storybook playgrounds, copy-paste code snippets, Figma design kits, contribution guidelines, and migration playbooks for every ministry team. Compliant pages now go from idea to live in a fraction of the previous time.
Need this kind of foundation for your own organisation? A design system isn't just for governments. Enterprises with multiple brands, products, or digital touchpoints get the same compounding benefits — faster shipping, lower plan, consistent UX. See how Ijjad approaches design systems for enterprise.
How We Hit 100% WCAG 2.1 AA Compliance
Accessibility was the single hardest engineering challenge — and the most rewarding. Here's what we built into every component:
Technical Architecture
The system was engineered for a 10-year lifespan, not a one-time launch:
- Component framework: Web Components for framework-agnostic compatibility — ministries run on different stacks (Next.js, Angular, plain HTML), and the components work in all of them
- Design tokens: JSON-based token system for colors, typography, spacing, breakpoints, and motion — exportable to CSS, SCSS, iOS, and Android
- Theming: CSS custom properties enabling per-ministry customisation without forking the source library
- Testing: Automated accessibility testing (axe-core), visual regression testing (Chromatic), and cross-browser testing (Playwright) in CI/CD on every PR
- Documentation: Storybook-based component playground with live code examples, accessibility notes, and usage guidance
The Results — One Year On
If you treat a design system as a coat of paint, you'll ship a coat of paint. We designed infrastructure — and every ministry that built on top of it shipped faster because of it.
— Karam Abd Al Qader, Founder, Ijjad · ijjad.com
What This Project Says About Ijjad
This project wasn't about producing one beautiful website. It was about building infrastructure — a foundation that ten different teams, in ten different ministries, can all build on without colliding with each other. That's a fundamentally different kind of engineering than making a brochure site, and it's the kind of thinking we bring to every engagement, no matter the scale:
- Enterprise architecture: Systems designed to scale across organisations and outlive their first launch
- Accessibility commitment: Inclusive design is built in, not added at the end when it's too late and too expensive to do well
- Developer experience: We make it easy for the next team to build on what we shipped, with documentation that's actually used
- Long-horizon thinking: Every architectural decision is judged against a 5–10 year window, not the next sprint
From understanding to shipping
You've now seen what it takes to ship a design system that 10+ government ministries can rely on. The question is whether your team wants to spend 18 months learning these lessons the hard way — or work with a team that has already shipped this exact thing, end to end, in production.
Talk to Ijjad about your projectFAQ
What is a national design system?
A national design system is a unified set of design standards, reusable UI components, accessibility rules, and development guidelines that ensure every government website and digital service shares a consistent look, feel, and user experience. Saudi Arabia's National Design System standardized digital experiences across 10+ ministries — making government services more accessible, more trustworthy, and faster to build for millions of citizens.
How long does it take to build a design system?
A government-scale design system typically takes 4–8 months for the initial release: discovery and audit (4–6 weeks), token + foundation design (4 weeks), component library build-out (8–12 weeks), documentation and Storybook setup (2–3 weeks), then a pilot ministry rollout (4 weeks). Ongoing maintenance and expansion continue indefinitely. Ijjad's team delivered the core system in phases, with each new ministry adoption adding 2–4 weeks of theming and content migration.
Can Ijjad build design systems for private companies?
Yes. The same methodology used for Saudi government ministries applies to enterprise design systems. Companies with multiple brands, products, or digital touchpoints benefit enormously from a unified design system — faster shipping, lower development plan, and consistent customer experience. Scope for enterprise design systems is scoped after discovery for a basic system, scaling based on component count and documentation depth. Get a proposal on the contact page.
How does the design system meet WCAG 2.1 AA accessibility?
Every component is engineered with accessibility built in: color contrast ratios at or above 4.5:1 for body text, full keyboard navigation, ARIA semantics, screen reader testing with NVDA and JAWS, focus management for modals and menus, and reduced-motion support. Automated axe-core testing runs in CI/CD to catch regressions before they ship. The result: Saudi citizens with visual, motor, and cognitive disabilities can access every ministry service.
Ready to build infrastructure, not just a website?
The same team that shipped Saudi Arabia's National Design System is available for your project. Whether you need a full enterprise design system, a government platform, or a custom build that has to work for years — we bring ministry-scale thinking to every engagement.
Keep exploring: Ijjad Web Design Services · Full Portfolio · Jeddah E-Commerce Case Study · Riyadh Redesign Case Study
Source note
Market context: Saudi Arabia's digital economy reached 16.0% of GDP in 2024, according to the General Authority for Statistics, published December 31, 2025. This is why Ijjad treats modern websites, SEO, e-commerce, AI MVPs, and mobile experiences as business infrastructure across Saudi Arabia, Jordan, Iraq, and the GCC.
Common Questions
Who is this case study guide for?
v
How does Ijjad approach this kind of project?
v
Does Ijjad support Arabic and English websites?
v
Can Ijjad work with Saudi and GCC businesses remotely?
v
What should I prepare before contacting Ijjad?
v
How do I start a project with Ijjad?
v
By Karam Abd Al Qader, Founder of Ijjad
