Leicester, UK /
11:40 AM
Leicester, UK /
11:40 AM
TDRA Accessibility Compliance Manager
Scaling a digital auditing tool for the UAE Government
Scaling a digital auditing tool for the UAE Government
Client
TDRA/UAE GOV
Timeline
Weeks
date
Role
UX/UI Design
AxessAll Team
AxessAll Team
Ahmed Abdelhady
Design Director
Ahmed Abdelhady
Design Director
Arafa Gomaa
Accessibility Consultant
Ibrahim Gebreil
Project Manager
Ibrahim Gebreil
Project Manager
Abstract
Making Compliance Actionable TDRA (Telecommunications and Digital Government Regulatory Authority) needed a tool to help government entities self-assess their digital accessibility. The existing MVP worked for single pages but failed when faced with the reality of government audits: testing batches of 25+ pages at once.
Making Compliance Actionable TDRA (Telecommunications and Digital Government Regulatory Authority) needed a tool to help government entities self-assess their digital accessibility. The existing MVP worked for single pages but failed when faced with the reality of government audits: testing batches of 25+ pages at once.
The challemge (It breaks at scale)
Feedback from stakeholders highlighted three critical failures in the initial wireframes:
Volume: The UI couldn't handle the mandated 25-page audit batches.
Clarity: Non-technical admins received low scores (e.g., "60%") without knowing why.
Integrity: No safeguards prevented incomplete data submissions.
Feedback from stakeholders highlighted three critical failures in the initial wireframes:
Volume: The UI couldn't handle the mandated 25-page audit batches.
Clarity: Non-technical admins received low scores (e.g., "60%") without knowing why.
Integrity: No safeguards prevented incomplete data submissions.
Design Process
I. Discovery: Defining the Operational Constraints
We audited the existing MVP failures against the new TDRA mandate to identify why the system was breaking. The analysis highlighted a critical gap between the high technical complexity of the audit data and the non-technical capabilities of the administrators using it.
Non-Technical Users
We needed a "translation layer" to turn code into plain English tasks.
Batch
MandateWe needed a "Master-Queue" architecture to manage volume.
Data
Integritystrict UI constraints (disabled states) to enforce 100% completion.
II. Architecture: Splitting Mandate from Utility
To prevent administrative confusion and ensure integrity, the widget's workflow was fundamentally split. This created two separate mental models, allowing us to apply strict constraints to official compliance tasks while keeping the utility tool fast and flexible.
Required Submissions (Mandatory)
To complete the official, non-negotiable page audit queue mandated by the TDRA.
TDRA's official list of assigned pages (The Batch).
Strict Workflow
Instant Check
(Utility)To provide a proactive, flexible tool for quick testing during development or bug fixing.
The page currently viewed
by the user.
Flexibility
III. Visual Strategy & Design System Application
As a high-stakes government tool, the UI needed to convey absolute authority and trust. We prioritized immediate alignment with the UAE Design System and focused on creating a dedicated, professional workspace for complex data viewing.
UAE Design System 2.0
I. Discovery: Defining the Operational Constraints
We audited the existing MVP failures against the new TDRA mandate to identify why the system was breaking. The analysis highlighted a critical gap between the high technical complexity of the audit data and the non-technical capabilities of the administrators using it.
Non-Technical Users
We needed a "translation layer" to turn code into plain English tasks.
Batch
MandateWe needed a "Master-Queue" architecture to manage volume.
Data
Integritystrict UI constraints (disabled states) to enforce 100% completion.
II. Architecture: Splitting Mandate from Utility
To prevent administrative confusion and ensure integrity, the widget's workflow was fundamentally split. This created two separate mental models, allowing us to apply strict constraints to official compliance tasks while keeping the utility tool fast and flexible.
Required Submissions (Mandatory)
To complete the official, non-negotiable page audit queue mandated by the TDRA.
TDRA's official list of assigned pages (The Batch).
Strict Workflow
Instant Check
(Utility)To provide a proactive, flexible tool for quick testing during development or bug fixing.
The page currently viewed
by the user.
Flexibility
III. Visual Strategy & Design System Application
As a high-stakes government tool, the UI needed to convey absolute authority and trust. We prioritized immediate alignment with the UAE Design System and focused on creating a dedicated, professional workspace for complex data viewing.
UAE Design System 2.0
I. Discovery: Defining the Operational Constraints
We audited the existing MVP failures against the new TDRA mandate to identify why the system was breaking. The analysis highlighted a critical gap between the high technical complexity of the audit data and the non-technical capabilities of the administrators using it.
Non-Technical Users
We needed a "translation layer" to turn code into plain English tasks.
Batch
MandateWe needed a "Master-Queue" architecture to manage volume.
Data
Integritystrict UI constraints (disabled states) to enforce 100% completion.
II. Architecture: Splitting Mandate from Utility
To prevent administrative confusion and ensure integrity, the widget's workflow was fundamentally split. This created two separate mental models, allowing us to apply strict constraints to official compliance tasks while keeping the utility tool fast and flexible.
Required Submissions (Mandatory)
To complete the official, non-negotiable page audit queue mandated by the TDRA.
TDRA's official list of assigned pages (The Batch).
Strict Workflow
Instant Check
(Utility)To provide a proactive, flexible tool for quick testing during development or bug fixing.
The page currently viewed
by the user.
Flexibility
III. Visual Strategy & Design System Application
As a high-stakes government tool, the UI needed to convey absolute authority and trust. We prioritized immediate alignment with the UAE Design System and focused on creating a dedicated, professional workspace for complex data viewing.
UAE Design System 2.0
I. Discovery: Defining the Operational Constraints
We audited the existing MVP failures against the new TDRA mandate to identify why the system was breaking. The analysis highlighted a critical gap between the high technical complexity of the audit data and the non-technical capabilities of the administrators using it.
Non-Technical Users
We needed a "translation layer" to turn code into plain English tasks.
Batch
MandateWe needed a "Master-Queue" architecture to manage volume.
Data
Integritystrict UI constraints (disabled states) to enforce 100% completion.
II. Architecture: Splitting Mandate from Utility
To prevent administrative confusion and ensure integrity, the widget's workflow was fundamentally split. This created two separate mental models, allowing us to apply strict constraints to official compliance tasks while keeping the utility tool fast and flexible.
Required Submissions (Mandatory)
To complete the official, non-negotiable page audit queue mandated by the TDRA.
TDRA's official list of assigned pages (The Batch).
Strict Workflow
Instant Check
(Utility)To provide a proactive, flexible tool for quick testing during development or bug fixing.
The page currently viewed
by the user.
Flexibility
III. Visual Strategy & Design System Application
As a high-stakes government tool, the UI needed to convey absolute authority and trust. We prioritized immediate alignment with the UAE Design System and focused on creating a dedicated, professional workspace for complex data viewing.
UAE Design System 2.0
I. Discovery: Defining the Operational Constraints
We audited the existing MVP failures against the new TDRA mandate to identify why the system was breaking. The analysis highlighted a critical gap between the high technical complexity of the audit data and the non-technical capabilities of the administrators using it.
Non-Technical Users
We needed a "translation layer" to turn code into plain English tasks.
Batch
MandateWe needed a "Master-Queue" architecture to manage volume.
Data
Integritystrict UI constraints (disabled states) to enforce 100% completion.
II. Architecture: Splitting Mandate from Utility
To prevent administrative confusion and ensure integrity, the widget's workflow was fundamentally split. This created two separate mental models, allowing us to apply strict constraints to official compliance tasks while keeping the utility tool fast and flexible.
Required Submissions (Mandatory)
To complete the official, non-negotiable page audit queue mandated by the TDRA.
TDRA's official list of assigned pages (The Batch).
Strict Workflow
Instant Check
(Utility)To provide a proactive, flexible tool for quick testing during development or bug fixing.
The page currently viewed
by the user.
Flexibility
III. Visual Strategy & Design System Application
As a high-stakes government tool, the UI needed to convey absolute authority and trust. We prioritized immediate alignment with the UAE Design System and focused on creating a dedicated, professional workspace for complex data viewing.
UAE Design System 2.0
I. Discovery: Defining the Operational Constraints
We audited the existing MVP failures against the new TDRA mandate to identify why the system was breaking. The analysis highlighted a critical gap between the high technical complexity of the audit data and the non-technical capabilities of the administrators using it.
Non-Technical Users
We needed a "translation layer" to turn code into plain English tasks.
Batch
MandateWe needed a "Master-Queue" architecture to manage volume.
Data
Integritystrict UI constraints (disabled states) to enforce 100% completion.
II. Architecture: Splitting Mandate from Utility
To prevent administrative confusion and ensure integrity, the widget's workflow was fundamentally split. This created two separate mental models, allowing us to apply strict constraints to official compliance tasks while keeping the utility tool fast and flexible.
Required Submissions (Mandatory)
To complete the official, non-negotiable page audit queue mandated by the TDRA.
TDRA's official list of assigned pages (The Batch).
Strict Workflow
Instant Check
(Utility)To provide a proactive, flexible tool for quick testing during development or bug fixing.
The page currently viewed
by the user.
Flexibility
III. Visual Strategy & Design System Application
As a high-stakes government tool, the UI needed to convey absolute authority and trust. We prioritized immediate alignment with the UAE Design System and focused on creating a dedicated, professional workspace for complex data viewing.
UAE Design System 2.0
I. Discovery: Defining the Operational Constraints
We audited the existing MVP failures against the new TDRA mandate to identify why the system was breaking. The analysis highlighted a critical gap between the high technical complexity of the audit data and the non-technical capabilities of the administrators using it.
Non-Technical Users
We needed a "translation layer" to turn code into plain English tasks.
Batch
MandateWe needed a "Master-Queue" architecture to manage volume.
Data
Integritystrict UI constraints (disabled states) to enforce 100% completion.
II. Architecture: Splitting Mandate from Utility
To prevent administrative confusion and ensure integrity, the widget's workflow was fundamentally split. This created two separate mental models, allowing us to apply strict constraints to official compliance tasks while keeping the utility tool fast and flexible.
Required Submissions (Mandatory)
To complete the official, non-negotiable page audit queue mandated by the TDRA.
TDRA's official list of assigned pages (The Batch).
Strict Workflow
Instant Check
(Utility)To provide a proactive, flexible tool for quick testing during development or bug fixing.
The page currently viewed
by the user.
Flexibility
III. Visual Strategy & Design System Application
As a high-stakes government tool, the UI needed to convey absolute authority and trust. We prioritized immediate alignment with the UAE Design System and focused on creating a dedicated, professional workspace for complex data viewing.
UAE Design System 2.0
I. Discovery: Defining the Operational Constraints
We audited the existing MVP failures against the new TDRA mandate to identify why the system was breaking. The analysis highlighted a critical gap between the high technical complexity of the audit data and the non-technical capabilities of the administrators using it.
Non-Technical Users
We needed a "translation layer" to turn code into plain English tasks.
Batch
MandateWe needed a "Master-Queue" architecture to manage volume.
Data
Integritystrict UI constraints (disabled states) to enforce 100% completion.
II. Architecture: Splitting Mandate from Utility
To prevent administrative confusion and ensure integrity, the widget's workflow was fundamentally split. This created two separate mental models, allowing us to apply strict constraints to official compliance tasks while keeping the utility tool fast and flexible.
Required Submissions (Mandatory)
To complete the official, non-negotiable page audit queue mandated by the TDRA.
TDRA's official list of assigned pages (The Batch).
Strict Workflow
Instant Check
(Utility)To provide a proactive, flexible tool for quick testing during development or bug fixing.
The page currently viewed
by the user.
Flexibility
III. Visual Strategy & Design System Application
As a high-stakes government tool, the UI needed to convey absolute authority and trust. We prioritized immediate alignment with the UAE Design System and focused on creating a dedicated, professional workspace for complex data viewing.
UAE Design System 2.0
The Solution
The Required Tab: Managing the Mandate
To handle the TDRA’s 25-page audit batches, I utilized a Master-Detail layout. The left column acts as a persistent checklist, clearly distinguishing between "Pending" and "Tested" items. The right panel provides the testing context (breadcrumbs) and the primary action, ensuring the admin never loses their place in the queue.
To handle the TDRA’s 25-page audit batches, I utilized a Master-Detail layout. The left column acts as a persistent checklist, clearly distinguishing between "Pending" and "Tested" items. The right panel provides the testing context (breadcrumbs) and the primary action, ensuring the admin never loses their place in the queue.
The Utility Tab: Proactive Testing
We separated the official audit from daily work. The Instant Check tab is a flexible, history-free utility that allows developers to run quick accessibility scans on any URL without affecting the official compliance score or submission queue.
We separated the official audit from daily work. The Instant Check tab is a flexible, history-free utility that allows developers to run quick accessibility scans on any URL without affecting the official compliance score or submission queue.
The Submit Button: Enforcing Integrity
The core business constraint was data integrity. The "Submit Results" button is programmed to remain Disabled (Grey) throughout the process. It only triggers to an Active state (Primary Color) once 100% of the assigned pages in the batch have passed the audit, effectively preventing incomplete submissions.
The core business constraint was data integrity. The "Submit Results" button is programmed to remain Disabled (Grey) throughout the process. It only triggers to an Active state (Primary Color) once 100% of the assigned pages in the batch have passed the audit, effectively preventing incomplete submissions.
Future & Next steps
Building the Archive With the core workflows solved, the next phase focuses on long-term data management:
Submission History: A dedicated tab to archive past reports.
Exportable Reports: Enabling PDF/CSV downloads for offline meetings.
Building the Archive With the core workflows solved, the next phase focuses on long-term data management:
Submission History: A dedicated tab to archive past reports.
Exportable Reports: Enabling PDF/CSV downloads for offline meetings.