| Linux server27.hostingraja.org 2.6.32-954.3.5.lve1.4.93.el6.x86_64 #1 SMP Wed Oct 4 17:04:29 UTC 2023 x86_64 Path : /home/udaipurk/public_html/websites/rohitnagda.com/images/work-portfolio/ |
| Current File : /home/udaipurk/public_html/websites/rohitnagda.com/images/work-portfolio/tawkeel-ux-case-study.html |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataFlow × Tawkeel — UX Case Study</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--orange: #F05A1A;
--orange-light: #FF7A3D;
--blue: #2B4EFF;
--blue-dark: #1A35D4;
--ink: #0D0D0D;
--paper: #F7F4EF;
--warm-gray: #E8E4DC;
--muted: #8B8680;
--white: #FFFFFF;
--green: #1DB373;
--yellow: #F5C842;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--paper);
color: var(--ink);
overflow-x: hidden;
}
/* ── NOISE TEXTURE OVERLAY ── */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
opacity: 0.4;
}
/* ── NAVIGATION ── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 60px;
background: rgba(247, 244, 239, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--warm-gray);
}
.nav-logo {
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 18px;
letter-spacing: -0.5px;
}
.nav-logo span { color: var(--orange); }
.nav-links {
display: flex;
gap: 32px;
list-style: none;
}
.nav-links a {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
/* ── HERO ── */
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
overflow: hidden;
}
.hero-left {
display: flex;
flex-direction: column;
justify-content: center;
padding: 140px 60px 80px;
position: relative;
z-index: 2;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--ink);
color: var(--paper);
padding: 6px 14px;
border-radius: 100px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 32px;
width: fit-content;
}
.hero-tag .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--orange);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.7; }
}
.hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(48px, 5vw, 72px);
font-weight: 900;
line-height: 1.05;
letter-spacing: -2px;
margin-bottom: 24px;
}
.hero h1 em {
font-style: italic;
color: var(--orange);
}
.hero-mission {
font-size: 18px;
font-weight: 300;
line-height: 1.6;
color: #444;
max-width: 480px;
margin-bottom: 48px;
}
.hero-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 480px;
}
.hero-meta-item label {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.hero-meta-item span {
font-size: 14px;
font-weight: 500;
color: var(--ink);
}
.hero-right {
position: relative;
background: var(--ink);
overflow: hidden;
}
.hero-right::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, #1A35D4 0%, #F05A1A 100%);
opacity: 0.15;
}
.hero-number {
position: absolute;
bottom: -40px;
right: -20px;
font-family: 'Playfair Display', serif;
font-size: 280px;
font-weight: 900;
color: rgba(255,255,255,0.04);
line-height: 1;
user-select: none;
}
.hero-stat-cards {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
padding: 40px;
}
.stat-card {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 24px 32px;
width: 100%;
max-width: 340px;
backdrop-filter: blur(8px);
transition: transform 0.3s, background 0.3s;
animation: float 6s ease-in-out infinite;
}
.stat-card:nth-child(2) { animation-delay: -2s; }
.stat-card:nth-child(3) { animation-delay: -4s; }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.stat-card:hover {
background: rgba(255,255,255,0.1);
transform: translateY(-4px) !important;
}
.stat-card-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-bottom: 8px;
}
.stat-card-value {
font-family: 'Playfair Display', serif;
font-size: 42px;
font-weight: 900;
color: white;
line-height: 1;
}
.stat-card-value span {
font-size: 20px;
color: var(--orange-light);
margin-left: 4px;
}
.stat-card-sub {
font-size: 13px;
color: rgba(255,255,255,0.4);
margin-top: 6px;
}
/* ── SECTIONS ── */
section {
padding: 100px 60px;
}
.section-label {
display: flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 20px;
}
.section-label::before {
content: '';
width: 32px;
height: 2px;
background: var(--orange);
}
.section-num {
font-family: 'DM Mono', monospace;
color: var(--orange);
margin-right: 4px;
}
h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(36px, 4vw, 56px);
font-weight: 900;
line-height: 1.1;
letter-spacing: -1.5px;
margin-bottom: 24px;
}
h2 em {
font-style: italic;
color: var(--orange);
}
p {
font-size: 17px;
font-weight: 300;
line-height: 1.7;
color: #444;
max-width: 680px;
}
/* ── PROBLEM / SOLUTION SPLIT ── */
.problem-solution {
background: var(--ink);
color: white;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0;
}
.ps-panel {
padding: 80px 60px;
position: relative;
overflow: hidden;
}
.ps-panel::after {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0;
width: 1px;
background: rgba(255,255,255,0.1);
}
.ps-panel:last-child::after { display: none; }
.ps-icon {
width: 56px; height: 56px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 32px;
}
.ps-icon.problem { background: rgba(240,90,26,0.2); }
.ps-icon.solution { background: rgba(43,78,255,0.2); }
.ps-panel h3 {
font-family: 'Playfair Display', serif;
font-size: 28px;
font-weight: 700;
margin-bottom: 20px;
color: white;
}
.ps-panel p {
color: rgba(255,255,255,0.6);
font-size: 16px;
}
.pain-list {
list-style: none;
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.pain-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
color: rgba(255,255,255,0.7);
line-height: 1.5;
}
.pain-list li::before {
content: '✕';
color: var(--orange);
font-size: 12px;
margin-top: 3px;
flex-shrink: 0;
}
.solution-list li::before {
content: '✓' !important;
color: var(--green) !important;
}
/* ── RESEARCH / EMPATHY ── */
.research-section {
background: var(--warm-gray);
}
.persona-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 48px;
}
.persona-card {
background: white;
border-radius: 20px;
padding: 36px;
border: 1px solid rgba(0,0,0,0.06);
transition: transform 0.3s, box-shadow 0.3s;
}
.persona-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}
.persona-avatar {
width: 56px; height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: 20px;
}
.persona-card h4 {
font-family: 'Playfair Display', serif;
font-size: 20px;
font-weight: 700;
margin-bottom: 4px;
}
.persona-role {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 16px;
}
.persona-card p {
font-size: 14px;
line-height: 1.6;
color: #555;
margin-bottom: 20px;
}
.persona-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.persona-tags span {
background: var(--paper);
border: 1px solid var(--warm-gray);
padding: 4px 12px;
border-radius: 100px;
font-size: 12px;
font-weight: 500;
color: var(--ink);
}
/* ── KEY INSIGHTS ── */
.insights-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.insight-card {
border-radius: 20px;
padding: 36px;
position: relative;
overflow: hidden;
}
.insight-card:nth-child(1) { background: linear-gradient(135deg, #F05A1A 0%, #FF9B6A 100%); color: white; }
.insight-card:nth-child(2) { background: linear-gradient(135deg, #2B4EFF 0%, #6B84FF 100%); color: white; }
.insight-card:nth-child(3) { background: var(--ink); color: white; }
.insight-percent {
font-family: 'Playfair Display', serif;
font-size: 64px;
font-weight: 900;
line-height: 1;
margin-bottom: 12px;
opacity: 0.95;
}
.insight-card p {
font-size: 15px;
color: rgba(255,255,255,0.8);
line-height: 1.6;
}
.insight-bg-num {
position: absolute;
bottom: -20px;
right: -10px;
font-family: 'Playfair Display', serif;
font-size: 120px;
font-weight: 900;
opacity: 0.08;
color: white;
pointer-events: none;
}
/* ── DESIGN JOURNEY ── */
.journey-section {
background: var(--paper);
}
.journey-timeline {
position: relative;
margin-top: 64px;
padding-left: 48px;
}
.journey-timeline::before {
content: '';
position: absolute;
left: 8px;
top: 0; bottom: 0;
width: 2px;
background: var(--warm-gray);
}
.timeline-item {
position: relative;
margin-bottom: 56px;
}
.timeline-dot {
position: absolute;
left: -44px;
top: 4px;
width: 16px; height: 16px;
border-radius: 50%;
background: white;
border: 2px solid var(--warm-gray);
transition: border-color 0.3s, background 0.3s;
}
.timeline-item:hover .timeline-dot {
background: var(--orange);
border-color: var(--orange);
}
.timeline-phase {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 8px;
}
.timeline-item h4 {
font-family: 'Playfair Display', serif;
font-size: 22px;
font-weight: 700;
margin-bottom: 12px;
}
.timeline-item p {
font-size: 15px;
color: #555;
max-width: 600px;
}
.iteration-callout {
background: white;
border-left: 3px solid var(--blue);
border-radius: 0 12px 12px 0;
padding: 20px 24px;
margin-top: 16px;
max-width: 580px;
}
.iteration-callout .callout-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--blue);
margin-bottom: 8px;
}
.iteration-callout p {
font-size: 14px;
color: #444;
}
/* ── SCREENS REVEAL ── */
.screens-section {
background: var(--ink);
padding: 100px 60px;
}
.screens-section .section-label { color: rgba(255,255,255,0.4); }
.screens-section h2 { color: white; }
.screens-section > p { color: rgba(255,255,255,0.5); }
.screens-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 56px;
}
.screen-item {
border-radius: 20px;
overflow: hidden;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
transition: transform 0.4s, box-shadow 0.4s;
cursor: pointer;
}
.screen-item:hover {
transform: translateY(-8px) scale(1.01);
box-shadow: 0 40px 100px rgba(0,0,0,0.4);
}
.screen-item:first-child {
grid-column: span 2;
}
.screen-header {
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
gap: 12px;
}
.screen-dots {
display: flex;
gap: 6px;
}
.screen-dots span {
width: 10px; height: 10px;
border-radius: 50%;
}
.screen-dots span:nth-child(1) { background: #FF5F57; }
.screen-dots span:nth-child(2) { background: #FFBD2E; }
.screen-dots span:nth-child(3) { background: #28CA41; }
.screen-title-bar {
font-family: 'DM Mono', monospace;
font-size: 11px;
color: rgba(255,255,255,0.3);
}
.screen-body {
padding: 24px;
}
.screen-body img {
width: 100%;
border-radius: 12px;
display: block;
}
.screen-caption {
padding: 16px 24px 24px;
font-size: 13px;
color: rgba(255,255,255,0.4);
}
.screen-caption strong {
display: block;
font-size: 15px;
color: rgba(255,255,255,0.8);
font-weight: 500;
margin-bottom: 4px;
}
/* ── IMPACT ── */
.impact-section {
background: linear-gradient(135deg, var(--orange) 0%, #FF9B6A 50%, var(--orange) 100%);
background-size: 200% 200%;
animation: gradientShift 8s ease infinite;
color: white;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.impact-section .section-label { color: rgba(255,255,255,0.6); }
.impact-section .section-label::before { background: white; }
.impact-section h2 { color: white; }
.impact-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 56px;
}
.impact-card {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 20px;
padding: 36px 24px;
text-align: center;
backdrop-filter: blur(8px);
transition: background 0.3s, transform 0.3s;
}
.impact-card:hover {
background: rgba(255,255,255,0.22);
transform: translateY(-4px);
}
.impact-num {
font-family: 'Playfair Display', serif;
font-size: 52px;
font-weight: 900;
color: white;
line-height: 1;
margin-bottom: 8px;
}
.impact-label {
font-size: 13px;
color: rgba(255,255,255,0.8);
line-height: 1.5;
}
/* ── LEARNINGS ── */
.learnings-section {
background: var(--warm-gray);
}
.learnings-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.learning-card {
background: white;
border-radius: 20px;
padding: 36px;
border: 1px solid rgba(0,0,0,0.06);
}
.learning-icon {
font-size: 28px;
margin-bottom: 16px;
display: block;
}
.learning-card h4 {
font-family: 'Playfair Display', serif;
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
}
.learning-card p {
font-size: 14px;
color: #555;
line-height: 1.6;
}
/* ── FOOTER ── */
footer {
background: var(--ink);
color: white;
padding: 60px;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-brand {
font-family: 'Playfair Display', serif;
font-size: 24px;
font-weight: 900;
}
.footer-brand span { color: var(--orange); }
footer p {
font-size: 13px;
color: rgba(255,255,255,0.4);
max-width: none;
}
/* ── SCROLL ANIMATIONS ── */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
/* ── PASSWORD MODAL ── */
.password-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(13, 13, 13, 0.7);
backdrop-filter: blur(4px);
z-index: 10000;
opacity: 1;
transition: opacity 0.3s ease;
}
.password-modal.hidden {
opacity: 0;
pointer-events: none;
}
.password-modal-content {
background: linear-gradient(135deg, var(--paper), rgba(255, 122, 61, 0.05));
border: 1px solid var(--warm-gray);
border-radius: 16px;
padding: 60px 48px;
max-width: 420px;
width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 1px rgba(240, 90, 26, 0.2);
animation: modalSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.password-modal-title {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 12px;
text-align: center;
}
.password-modal-subtitle {
font-size: 0.95rem;
color: var(--muted);
text-align: center;
margin-bottom: 36px;
line-height: 1.6;
}
.password-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.password-input-group {
position: relative;
}
.password-input-label {
display: block;
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 10px;
}
.password-input {
width: 100%;
padding: 12px 16px;
background: var(--white);
border: 1px solid var(--warm-gray);
border-radius: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 1rem;
color: var(--ink);
transition: border-color 0.3s, background 0.3s;
}
.password-input::placeholder {
color: var(--muted);
}
.password-input:focus {
outline: none;
border-color: var(--orange);
background: rgba(240, 90, 26, 0.02);
}
.password-error {
display: none;
color: #ff6b6b;
font-size: 0.85rem;
margin-top: 8px;
text-align: center;
animation: shake 0.3s ease-in-out;
}
.password-error.show {
display: block;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
75% { transform: translateX(6px); }
}
.password-btn {
padding: 12px 24px;
background: linear-gradient(135deg, var(--orange), var(--orange-light));
border: none;
border-radius: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 0.95rem;
font-weight: 500;
color: var(--white);
cursor: pointer;
transition: transform 0.2s, opacity 0.2s, box-shadow 0.3s;
box-shadow: 0 4px 15px rgba(240, 90, 26, 0.25);
letter-spacing: 0.05em;
}
.password-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(240, 90, 26, 0.35);
}
.password-btn:active {
transform: translateY(0);
opacity: 0.9;
}
.password-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
</style>
</head>
<body>
<!-- ═══════════════════════════════════════════ PASSWORD MODAL -->
<div id="passwordModal" class="password-modal">
<div class="password-modal-content">
<h2 class="password-modal-title">Access Protected</h2>
<p class="password-modal-subtitle">This case study is password protected.<br>Please enter the password to continue.</p>
<form class="password-form" id="passwordForm">
<div class="password-input-group">
<label class="password-input-label">Password</label>
<input
type="password"
id="passwordInput"
class="password-input"
placeholder="Enter password"
autocomplete="off"
/>
<div class="password-error" id="passwordError">Incorrect password. Please try again.</div>
</div>
<button type="submit" class="password-btn">Unlock</button>
</form>
</div>
</div>
<!-- NAV -->
<nav>
<div class="nav-logo">Data<span>Flow</span> Case Study</div>
<ul class="nav-links">
<li><a href="#problem">Problem</a></li>
<li><a href="#research">Research</a></li>
<li><a href="#journey">Journey</a></li>
<li><a href="#screens">Screens</a></li>
<li><a href="#impact">Impact</a></li>
</ul>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-left">
<div class="hero-tag">
<span class="dot"></span>
UX Case Study — 2025
</div>
<h1>
From Chaos<br>to <em>Clarity</em>:<br>The Tawkeel Portal
</h1>
<p class="hero-mission">
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.
</p>
<div class="hero-meta">
<div class="hero-meta-item">
<label>My Role</label>
<span>Sr. Product Designer</span>
</div>
<div class="hero-meta-item">
<label>Timeline</label>
<span>8 Weeks</span>
</div>
<div class="hero-meta-item">
<label>Tools</label>
<span>Figma</span>
</div>
</div>
</div>
<div class="hero-right">
<div class="hero-number">39</div>
<div class="hero-stat-cards">
<div class="stat-card">
<div class="stat-card-label">Monthly Cases Handled</div>
<div class="stat-card-value">4,000<span>+</span></div>
<div class="stat-card-sub">Tawkeel agency applications</div>
</div>
<div class="stat-card">
<div class="stat-card-label">Verification Stages</div>
<div class="stat-card-value">5</div>
<div class="stat-card-sub">Screening → Result</div>
</div>
<div class="stat-card">
<div class="stat-card-label">Total Cases in Dashboard</div>
<div class="stat-card-value">39</div>
<div class="stat-card-sub">Tracked in real-time</div>
</div>
</div>
</div>
</section>
<!-- PROBLEM / SOLUTION -->
<section class="problem-solution" id="problem">
<div class="ps-panel reveal">
<div class="ps-icon problem">🔥</div>
<h3>The Problem</h3>
<p>Tawkeel, a premium agency partner, managed thousands of verification cases each month with no dedicated digital infrastructure.</p>
<ul class="pain-list">
<li>Documents shared over email and Google Drive — no audit trail</li>
<li>No real-time visibility into case statuses or verification stages</li>
<li>Manual follow-ups consuming hours of agent time per week</li>
<li>System unable to scale to projected 4,000 new cases/month</li>
<li>Risk of lost or misrouted documents causing compliance issues</li>
</ul>
</div>
<div class="ps-panel reveal reveal-delay-2">
<div class="ps-icon solution">⚡</div>
<h3>The Solution</h3>
<p>A purpose-built partner portal that replaces ad-hoc communication with structured, transparent, end-to-end case management.</p>
<ul class="pain-list solution-list">
<li>Centralized document submission with validation and format checks</li>
<li>Live dashboard with stage-by-stage status breakdown</li>
<li>Draft-saving so agents can start applications and return later</li>
<li>Insufficiency workflows that notify agents of missing documents</li>
<li>Scalable architecture approved by MOHESR for high-volume traffic</li>
</ul>
</div>
</section>
<!-- RESEARCH -->
<section class="research-section" id="research">
<div class="section-label"><span class="section-num">02</span> Empathy & Research</div>
<h2>Who Are We<br><em>Building For?</em></h2>
<p>We conducted stakeholder interviews and workflow shadowing sessions with both Tawkeel agents and DataFlow internal processors to map friction points across the verification lifecycle.</p>
<div class="persona-grid">
<div class="persona-card reveal">
<div class="persona-avatar" style="background:#FFF0E8;">👩💼</div>
<h4>Zainab Al-Suwaidi</h4>
<div class="persona-role">Tawkeel Senior Agent · Dubai</div>
<p>"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."</p>
<div class="persona-tags">
<span>High-volume</span>
<span>Status-anxious</span>
<span>Email-dependent</span>
</div>
</div>
<div class="persona-card reveal reveal-delay-1">
<div class="persona-avatar" style="background:#E8EEFF;">👨💻</div>
<h4>Arjun Mehra</h4>
<div class="persona-role">DataFlow Case Processor · Abu Dhabi</div>
<p>"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."</p>
<div class="persona-tags">
<span>Process-focused</span>
<span>Document-heavy</span>
<span>Repetition fatigue</span>
</div>
</div>
</div>
<div class="insights-row">
<div class="insight-card reveal">
<div class="insight-percent">73%</div>
<p>of agents reported losing track of case status at least once per week due to lack of a centralized dashboard.</p>
<div class="insight-bg-num">1</div>
</div>
<div class="insight-card reveal reveal-delay-1">
<div class="insight-percent">60%</div>
<p>of document re-submissions were caused by incorrect formats or missing fields — fixable with upfront validation.</p>
<div class="insight-bg-num">2</div>
</div>
<div class="insight-card reveal reveal-delay-2">
<div class="insight-percent">3×</div>
<p>faster case resolution was projected with real-time insufficiency notifications versus the current email workflow.</p>
<div class="insight-bg-num">3</div>
</div>
</div>
</section>
<!-- DESIGN JOURNEY -->
<section class="journey-section" id="journey">
<div class="section-label"><span class="section-num">03</span> The Design Journey</div>
<h2>The <em>Messy</em><br>Beautiful Middle</h2>
<p>Good design is never linear. Here's how the portal evolved from whiteboard sketches to a high-fidelity, user-tested system.</p>
<div class="journey-timeline">
<div class="timeline-item reveal">
<div class="timeline-dot"></div>
<div class="timeline-phase">Phase 1 — Discovery</div>
<h4>Mapping the Current Chaos</h4>
<p>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.</p>
</div>
<div class="timeline-item reveal">
<div class="timeline-dot"></div>
<div class="timeline-phase">Phase 2 — Ideation</div>
<h4>Lo-Fi Wireframes & Information Architecture</h4>
<p>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.</p>
<div class="iteration-callout">
<div class="callout-label">🔄 Iteration Note</div>
<p>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%.</p>
</div>
</div>
<div class="timeline-item reveal">
<div class="timeline-dot"></div>
<div class="timeline-phase">Phase 3 — Mid-Fidelity</div>
<h4>Component Library & Design System</h4>
<p>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.</p>
</div>
<div class="timeline-item reveal">
<div class="timeline-dot"></div>
<div class="timeline-phase">Phase 4 — Testing</div>
<h4>Usability Sessions & Critique</h4>
<p>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%.</p>
</div>
</div>
</section>
<!-- SCREENS -->
<section class="screens-section" id="screens">
<div class="section-label"><span class="section-num">04</span> Final Reveal</div>
<h2 style="color:white;">High-Fidelity <em style="color:var(--orange-light);">Screens</em></h2>
<p>The portal across its three core surfaces — Case Management, Application Creation, and Saved Drafts.</p>
<div class="screens-grid">
<div class="screen-item reveal">
<div class="screen-header">
<div class="screen-dots"><span></span><span></span><span></span></div>
<div class="screen-title-bar">dataflow.ae / case-management</div>
</div>
<div class="screen-body">
<img src="../../images/work-portfolio/Case-study/dasboard-tawkeel.jpg" alt="Case Management Dashboard">
</div>
<div class="screen-caption">
<strong>Case Management Dashboard</strong>
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.
</div>
</div>
<div class="screen-item reveal reveal-delay-1">
<div class="screen-header">
<div class="screen-dots"><span></span><span></span><span></span></div>
<div class="screen-title-bar">dataflow.ae / new-application</div>
</div>
<div class="screen-body">
<img src="../../images/work-portfolio/Case-study/create-application.jpg" alt="Create New Application">
</div>
<div class="screen-caption">
<strong>Create New Application</strong>
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.
</div>
</div>
<div class="screen-item reveal reveal-delay-2">
<div class="screen-header">
<div class="screen-dots"><span></span><span></span><span></span></div>
<div class="screen-title-bar">dataflow.ae / saved-drafts</div>
</div>
<div class="screen-body">
<img src="../../images/work-portfolio/Case-study/draft.jpg" alt="Saved Drafts">
</div>
<div class="screen-caption">
<strong>Saved Drafts</strong>
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.
</div>
</div>
</div>
</section>
<!-- IMPACT -->
<section class="impact-section" id="impact">
<div class="section-label"><span class="section-num">05</span> Results & Impact</div>
<h2>Design That<br><em style="color:var(--ink);">Delivers.</em></h2>
<div class="impact-grid">
<div class="impact-card reveal">
<div class="impact-num">4K+</div>
<div class="impact-label">Monthly cases the platform is architected to handle at launch</div>
</div>
<div class="impact-card reveal reveal-delay-1">
<div class="impact-num">~55%</div>
<div class="impact-label">Reduction in draft abandonment after elevating the Saved Drafts feature</div>
</div>
<div class="impact-card reveal reveal-delay-2">
<div class="impact-num">3×</div>
<div class="impact-label">Faster insufficiency resolution vs. email-based back-and-forth</div>
</div>
<div class="impact-card reveal reveal-delay-3">
<div class="impact-num">Zero</div>
<div class="impact-label">Reliance on Drive or email for document sharing post-launch</div>
</div>
</div>
</section>
<!-- LEARNINGS -->
<section class="learnings-section">
<div class="section-label"><span class="section-num">06</span> Key Learnings</div>
<h2>What This <em>Taught</em> Me</h2>
<div class="learnings-grid">
<div class="learning-card reveal">
<span class="learning-icon">🏗️</span>
<h4>Context Before Layout</h4>
<p>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.</p>
</div>
<div class="learning-card reveal reveal-delay-1">
<span class="learning-icon">🔄</span>
<h4>Critique Is a Gift</h4>
<p>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.</p>
</div>
<div class="learning-card reveal reveal-delay-2">
<span class="learning-icon">📊</span>
<h4>Status Visibility = Trust</h4>
<p>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.</p>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div>
<div class="footer-brand">Data<span>Flow</span> × Tawkeel</div>
<p style="margin-top:8px;">MOHESR Document Verification Portal · UX Case Study 2025</p>
</div>
<p>Authorized by the Ministry of Higher Education,<br>Research and Innovation · UAE</p>
</footer>
<script>
// Intersection Observer for scroll reveals
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.12 });
reveals.forEach(el => observer.observe(el));
// Password modal functionality
const CORRECT_PASSWORD = 'Krishna@1947';
const passwordModal = document.getElementById('passwordModal');
const passwordForm = document.getElementById('passwordForm');
const passwordInput = document.getElementById('passwordInput');
const passwordError = document.getElementById('passwordError');
passwordForm.addEventListener('submit', (e) => {
e.preventDefault();
const enteredPassword = passwordInput.value;
if (enteredPassword === CORRECT_PASSWORD) {
passwordModal.classList.add('hidden');
setTimeout(() => {
passwordModal.style.display = 'none';
}, 300);
passwordInput.value = '';
passwordError.classList.remove('show');
} else {
passwordError.classList.add('show');
passwordInput.value = '';
passwordInput.focus();
setTimeout(() => {
passwordError.classList.remove('show');
}, 3000);
}
});
passwordInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
passwordForm.dispatchEvent(new Event('submit'));
}
});
</script>
</body>
</html>