top of page
White Branch
Planning Board Notes

Case Study (Shows the end-to end design process)- An enterprise-grade operations system 
Presentation for Financial Client - Mashreq Bank (Dubai)

My Role as a UI/UX Designer

I have designed the front-end experience for an enterprise-grade operations system.

My responsibility is to:

  • Simplify complex operational workflows

  • Enable fast decision-making

  • Reduce cognitive load for high-volume users

  • Design role-based experiences

  • Communicate system intelligence clearly through UI

Purpose
It is a daily-use operational platform.

Business Requirements (my understanding)

1. Business Context

Operations teams currently work across multiple internal systems to process daily transactions. Today, the process involves:

  • Logging into multiple source systems

  • Manually extracting transaction data

  • Consolidating data in shared folders or spreadsheets

  • Manually prioritizing and allocating work

  • Updating transaction status manually

  • Tracking SLAs via email or reports

  • Sending periodic updates to leadership and compliance teams

2.Key Challenges

  • High manual effort

  • Delayed processing and SLA breaches

  • Limited real-time visibility

  • Dependency on Excel and email

  • Difficult audit and compliance tracking

Objective

Design a centralized operations platform that:

 

  • Automatically allocates work

  • Provides real-time visibility

  • Tracks SLAs and exceptions

  • Reduces manual coordination

  • Scales across teams and transaction volumes

3. User Personas (Must Design For)

A. Ops User 

  • Receives system-assigned transactions

  • Works on high volumes daily

  • Needs clarity on:

    • Priority

    • SLA

    • Required action

  • Can refer transactions when needed

  • Updates status frequently

B. Team Lead

  • Oversees a group of Ops Users

  • Monitors workload distribution

  • Tracks SLA risks and bottlenecks

  • Handles referrals and exceptions

  • Reviews daily performance

C. Manager / Ops Head

  • Needs a strategic and aggregated view

  • Focuses on:

    • SLA adherence

    • Backlogs

    • Risk areas

  • Consumes dashboards and reports

  • Rarely interacts at transaction level

​​​

4. Core Platform Capabilities 

  1. Automated Work Allocation

    • Rule-based assignment using:

      • Skill set

      • Workload

      • Priority

      • Availability

  2. Real-Time Data Visibility

    • Continuous inflow of new transactions

    • Near real-time status updates

  3. Centralized Dashboards

    • Role-specific dashboards

    • Actionable KPIs

  4. SLA Tracking & Alerts

    • Visual SLA indicators:

      • Within cutoff

      • Approaching breach

      • Breached

  5. Transaction Lifecycle Management

    • Pending → In Progress → Completed → Referred

  6. Referrals & Exceptions

    • Reason capture

    • Feedback loop with compliance or support teams

  7. Reporting

    • Daily summaries

    • Filters and exports

    • Audit-ready views

Design Involves​​

5. Screens to Design in Figma (High-Fidelity)

A. Ops User Screens

1. Home Dashboard

  • KPI tiles:

    • Total Assigned

    • Pending

    • Referred

    • Overdue

    • Completed

  • Task status distribution (chart)

  • Volume distribution by source/system category

2. My Assigned Tasks

A data-heavy table showing:

  • Transaction ID

  • Source category

  • Priority

  • SLA countdown

  • Current status

  • Action buttons:

    • Open

    • Refer

    • Complete

3. Transaction Detail View

  • Full transaction context

  • SLA timer

  • Status history

  • Action controls

  • Referral workflow with reason selection

B. Team Lead Screens

1. Team Dashboard

  • Team-level KPIs

  • Workload distribution

  • SLA risk indicators

2. Monitoring View

  • Live transaction list across users

  • Filters:

    • User

    • Status

    • Priority

    • SLA state

  • Visual emphasis on overdue and high-risk items

3. Reporting

  • Daily summary view

  • User-wise and category-wise insights

  • Export options

C. Manager / Ops Head Screens

1. Strategic Overview

  • Total transactions

  • SLA met percentage

  • SLA breaches

  • Pending and overdue volumes

2. Status Heatmap

  • Aggregated view showing:

    • Pending

    • Referred

    • Completed

  • Split by source/system category

3. SLA Performance View

  • Visual comparison of:

    • Within cutoff

    • Approaching breach

    • Breached

​​

6. Design Constraints

  • Desktop-first

  • Clean, neutral enterprise theme

  • Meaningful color usage (status-driven)

  • Minimal decorative elements

  • Scalable layouts (thousands of records)

7. Deliverables

Tool

A. Figma

  • High-fidelity designs

  • Separate flows for:

    • Ops User

    • Team Lead

    • Manager

  • Reusable components preferred

Covers:

  1. Problem summary (current vs proposed)

  2. User personas and pain points

  3. UX principles followed

  4. Screen walkthrough (by role)

  5. How dynamic allocation is represented in UI

  6. SLA visualization approach

  7. Referral and exception handling

  8. Design decisions and trade-offs

  9. Future UX enhancements (optional)

Product

Here's Product Glance, I have completed a designing of product - an enterprise-grade operations system tool emphasizing an end-to-end flow that improves user experience. 

Presentation

Figma _ Hi-Fi Prototype

bottom of page