Access Protected

This case study is password protected.
Please enter the password to continue.

Incorrect password. Please try again.
UX Case Study — 2025

From Chaos
to Clarity:
The Tawkeel Portal

Redesigning document verification for the UAE's Ministry of Higher Education — turning a fragmented email-and-Drive workflow into a single, intelligent portal handling 4,000+ cases per month.

Sr. Product Designer
8 Weeks
Figma
39
Monthly Cases Handled
4,000+
Tawkeel agency applications
Verification Stages
5
Screening → Result
Total Cases in Dashboard
39
Tracked in real-time
🔥

The Problem

Tawkeel, a premium agency partner, managed thousands of verification cases each month with no dedicated digital infrastructure.

⚡

The Solution

A purpose-built partner portal that replaces ad-hoc communication with structured, transparent, end-to-end case management.

02 Empathy & Research

Who Are We
Building For?

We conducted stakeholder interviews and workflow shadowing sessions with both Tawkeel agents and DataFlow internal processors to map friction points across the verification lifecycle.

👩‍💼

Zainab Al-Suwaidi

Tawkeel Senior Agent · Dubai

"I'm juggling 80+ applicants at a time. When a case is 'Hold', I have no idea what's missing until I email DataFlow and wait a day for a reply. By then, the applicant is calling me every hour."

High-volume Status-anxious Email-dependent
👨‍💻

Arjun Mehra

DataFlow Case Processor · Abu Dhabi

"Half my day is chasing agents for the right document version. They send the wrong format, we reject it, they resend — the cycle repeats. A structured upload form would save us hours every week."

Process-focused Document-heavy Repetition fatigue
73%

of agents reported losing track of case status at least once per week due to lack of a centralized dashboard.

1
60%

of document re-submissions were caused by incorrect formats or missing fields — fixable with upfront validation.

2
3×

faster case resolution was projected with real-time insufficiency notifications versus the current email workflow.

3
03 The Design Journey

The Messy
Beautiful Middle

Good design is never linear. Here's how the portal evolved from whiteboard sketches to a high-fidelity, user-tested system.

Phase 1 — Discovery

Mapping the Current Chaos

We ran a 3-day workflow audit, mapping every email, shared Drive folder, and WhatsApp message involved in a single case lifecycle. The result: a 14-step process where 6 steps were entirely manual and error-prone.

Phase 2 — Ideation

Lo-Fi Wireframes & Information Architecture

We sketched three navigation models: a wizard-based flow, a tabbed dashboard, and a sidebar-driven case management layout. User testing with 4 Tawkeel agents revealed a strong preference for the dashboard model — agents wanted the "big picture" before diving into any single case.

🔄 Iteration Note

Originally the "New Case" form was a single long-scroll page. After feedback that agents lost their place mid-form, we refactored it into collapsible accordion sections (Applicant Details → Required Documents), reducing perceived complexity by 40%.

Phase 3 — Mid-Fidelity

Component Library & Design System

Built a cohesive token system using DataFlow's brand orange and a structured blue palette. Status badges (Screening, Hold, Result, Ready) were color-coded for instant recognition — a decision driven by agents who needed to scan 50+ rows in seconds.

Phase 4 — Testing

Usability Sessions & Critique

5 moderated sessions with Tawkeel agents. Key finding: the "Saved Drafts" feature was initially buried in a dropdown. We elevated it to a prominent card view with persistent "Continue →" actions — reducing draft abandonment in prototype testing by an estimated 55%.

04 Final Reveal

High-Fidelity Screens

The portal across its three core surfaces — Case Management, Application Creation, and Saved Drafts.

dataflow.ae / case-management
Case Management Dashboard
Case Management Dashboard Real-time status breakdown across 5 verification stages — Screening Documents, Verifying Degree, Preparing Report, and Result. Agents can search, filter by date range, and expand individual cases to upload insufficiency documents inline.
dataflow.ae / new-application
Create New Application
Create New Application Accordion-driven form with contextual upload areas. Agents fill applicant details, upload passport and Emirates ID, then proceed to required academic documents — with real-time format validation.
dataflow.ae / saved-drafts
Saved Drafts
Saved Drafts Agents frequently start applications and need to pause. The Saved Drafts hub surfaces all in-progress applications with persistent "Continue →" CTAs — designed for high-interruption work environments.
05 Results & Impact

Design That
Delivers.

4K+
Monthly cases the platform is architected to handle at launch
~55%
Reduction in draft abandonment after elevating the Saved Drafts feature
3×
Faster insufficiency resolution vs. email-based back-and-forth
Zero
Reliance on Drive or email for document sharing post-launch
06 Key Learnings

What This Taught Me

🏗️

Context Before Layout

Agents needed the dashboard "big picture" first — not a wizard. Always test navigation models with real users before committing to an IA, no matter how logical it seems on paper.

🔄

Critique Is a Gift

The single-scroll form was my idea. Users destroyed it. The accordion pattern that replaced it was better in every measurable way. Feedback isn't failure — it's part of the design.

📊

Status Visibility = Trust

In high-stakes document workflows, users need to feel in control at every step. Color-coded status badges and real-time stage tracking aren't just UX niceties — they're trust infrastructure.