From Chaos
to Clarity
Designing a Centralized Operations Platform for high-volume transaction teams.
Role
UI/UX Designer
My Role
UI/UX Designer
Team
Group Project
Platform
Enterprise Web
Tool
Figma
My contributions: Dashboard · Assigned Tasks View · Task Detail View · Action Flows (Complete & Refer)
The Problem
Imagine starting your workday by logging into four different systems. You export a report from one, copy it into a shared Excel sheet, cross-check it with an email thread, and then manually decide which tasks are urgent. By the time you’ve done all of this, it’s already 10 AM — and you haven’t actually processed anything yet.
This was the daily reality for operations teams. Their work involved manually extracting transaction data, consolidating it across shared folders, deciding priorities with no system intelligence, updating statuses by hand, and tracking SLAs through email chains.
The consequences were real: delayed processing, SLA breaches that only got noticed after the fact, leadership with no real-time visibility, and compliance teams chasing audit trails across disconnected systems.
“The tools were working against them — not for them.”
4+ systems to log into daily
2+ hours lost before real work begins
Manual Excel consolidation
Data always stale, errors common
No priority intelligence
Agents guess what to work on first
SLA tracking via email
Breaches go unnoticed until too late
No audit trail
Compliance reviews are painful
My Role
This was a group project. I was responsible for the end-to-end design of four major areas:
Dashboard — The workload overview, KPI layer, and data visualization.
My Assigned Tasks — The transaction table, filtering system, and sorting logic.
Task Detail View — The two-column detail layout, SLA timer, and status history timeline.
Action Flows — Mark as Completed (with confirmation), Refer (with inline form + validation).
I also owned the overall visual design system — the status pill color logic, typography scale, and component patterns used across all screens.
Understanding the Users
The Ops Agent
Primary user. Processes transactions daily, 6–8 hours in this tool.
Core anxiety: “Am I going to miss an SLA without knowing it?”
Needs: Clarity fast. Fewest possible clicks to take action.
The Team Lead
Bird’s-eye view user. Not processing transactions, but monitoring the team.
Core anxiety: “Where are bottlenecks forming before they become SLA breaches?”
Needs: Aggregate visibility. Team-level status at a glance.
Both users share one constraint: they cannot afford cognitive overload. When you’re processing hundreds of transactions daily, a confusing UI doesn’t just slow you down — it causes errors.
Design Goals
Show what matters at a glance
Agents should know their workload status in under 3 seconds, without scrolling or searching.
Surface SLA risk before breach
Make urgency visible through color and context, not just timestamps.
Make status changes one action away
Every extra step in an action flow is a chance for delay or error.
Build trust through transparency
Agents and leads should always know what happened, when, and by whom.
The Solution
A single platform that consolidates everything ops teams need to process transactions, track SLAs, and hand off work — with just the right amount of structure to make the complex feel simple.
Dashboard
The dashboard is the platform’s home base. When an agent logs in, the first thing they see is a clear answer to: “Where do I stand today?”
Five KPI cards at the top — Total Assigned (120), Pending (20), Completed (80), Referred (19), Overdue (01) — are the most important real estate on the screen. They’re deliberately large, numerical, and scannable. An agent should be able to read their workload status in under three seconds.
The “Overdue” card is the one you never want to be non-zero. Its placement at the far right is intentional — it’s a signal that gets noticed but doesn’t dominate the view when the number is low.
Below the KPIs, two charts give a visual layer to the numbers. The donut chart breaks down task status distribution. The bar chart shows volume by source — helping leads identify which source systems are generating the most workload that day.
My Assigned Tasks
The task list is where agents spend most of their time. The design challenge here was density without clutter — showing 12+ transaction rows with enough context for prioritization decisions, without overwhelming the eye.
Table columns: Transaction ID · Source · Priority · SLA · Status · Action. Each column carries a distinct information type — nothing is redundant.
The SLA column shows time remaining, not a raw timestamp. “-5m” in red means overdue. “1hr 20m” in green means comfortable headroom. “10m” in amber means attention needed soon. This is the detail that turns a table into a decision support tool.
Task Detail View
When an agent opens a transaction, they land on the detail view — where the actual work happens.
The layout is a deliberate two-column split. Left: Transaction Details (Customer, Amount, Priority, Status, Description) + SLA Timer. Right: Status History — a timeline of every state change with timestamps and agent names.
The Status History was one of the most important design decisions. In the old system, audit trails lived in emails and were nearly impossible to reconstruct. Here, every transition is logged automatically with a timestamp and agent name. At the bottom, the Actions section offers two clear choices: Mark as Completed or Refer. Binary. Unambiguous. No dropdown menus, no guessing.
Mark as Completed
Clicking “Mark as Completed” triggers a confirmation modal — “Are you sure you want to mark this Completed?”
This friction is intentional. In a high-volume environment, accidental completions affect SLA metrics and compliance records. One confirmation step is the right balance between speed and safety. After confirming, a toast notification appears bottom-right — immediate feedback without pulling the agent away from their context.
Referral Flow
The referral flow is more involved because it carries more information. When an agent clicks “Refer,” an inline form expands below the action buttons — no modal — so the transaction details stay visible while filling it out.
Three fields: Reason for referral (dropdown) · Refer to (dropdown — team or agent) · Comments (free text). Submitting without a reason triggers a validation toast. On success: “TRC-000-1234 referred successfully.” Status history updates immediately.
Key Design Decisions
Color-coded status pills over text labels
We could have shown status as plain text. Instead, status pills with background color create a preattentive layer — the brain reads color before it reads words. An agent scanning 12 rows doesn't need to read each status label — they spot problem rows instantly.
The dashboard table as a "hot queue"
Initially the dashboard showed only charts. But thinking about the agent's first moments in the platform, we added the transaction table to the dashboard itself. High-priority items are visible before the agent even navigates to their full task list — reducing steps to first action.
SLA as time remaining, not a timestamp
"Deadline: 23:12" means nothing unless you know the current time and do mental arithmetic. "-5m" (overdue) or "1hr 20m" (remaining) makes urgency immediately legible. A small decision with a large impact on cognitive load.
Inline referral form, not a modal
The referral form expands inline within the task detail view rather than a modal overlay. This keeps transaction details visible while the agent fills in the form — no context-switching, no memorizing details.
What I’d Do Next
Supervisor / Team Lead View
Cross-agent workload visibility. Who has the most overdue items? Which agents have capacity?
SLA Breach Notifications
Proactive alerts when a transaction approaches its SLA threshold, rather than requiring agents to spot it in the table.
Bulk Actions on the Task Table
For high-volume days, select multiple transactions and update status or priority in one step.
Mobile-Responsive Dashboard
A simplified mobile view of KPIs for leads who need a snapshot on the go.
Reflection
The most interesting challenge in this project was designing for a user who is time-pressured and highly repetitive. Every pattern that works in a consumer app — exploratory navigation, detailed onboarding, expressive motion — needs to be reconsidered here. The goal is speed, trust, and zero ambiguity.
What I’d do differently with more time: user research. The current design is grounded in the problem statement and principles, but I’d want to shadow actual ops agents for even a day to understand the specific mental models they bring. I suspect there are micro-friction points I haven’t caught yet — places where my instincts about what’s “clear” don’t match what a domain expert actually finds clear.
That humility — knowing the design is a hypothesis until real users use it — is what I take away from this project most.