MAGRABI — SIMPLIFYING INTERNAL ERROR MONITORING

Role

Product Design

Time

April – May 2026

Tools

Figma, Chatgpt, Google Stitch, Figma make

Figma, Chatgpt

Client

Magrabi e-commerce

PROJECT OVERVIEW

Magrabi’s internal systems process a large amount of data across multiple stages, making it important for teams to quickly identify and understand processing errors.

As a UI/UX Designer, I designed an internal monitoring experience to make errors, processing states, and affected records easier to track and investigate.

Goal: Create a clear monitoring interface that helps internal teams identify issues quickly, understand what went wrong, and track records through different processing states.

Problem Statement

When errors occur during data processing, users need to understand where the issue happened, which records were affected, and what state the process is currently in.

The existing workflow involved multiple processing stages and large amounts of data, which made it difficult to:

Identify failed processes quickly
Understand the current status of records
Locate affected data
Distinguish between different error states
Investigate issues without going through multiple screens

Outcome: Users needed a more structured way to monitor processing activity and investigate errors.

MY ROLE & WORKFLOW

Role	UI/UX Designer
Workflow	Translated business and technical requirements into monitoring flows and interfaces. Worked with complex processing workflows, data states, and error scenarios. Collaborated with Product and development teams to understand system behaviour and requirements. Iterated on dashboards, tables, statuses, and error states based on feedback.
Output	Monitoring Dashboard Processing & Status Tracking Error Monitoring & Management Error Details & Investigation Record-level Data Views Success, Warning & Error States Data Processing & Status Flows

UX CONSIDERATIONS

The complexity of the workflow required the interface to make important information easy to scan and understand.

Key considerations included:

Users needed an immediate overview of system activity and processing status.
Error states needed to be visually distinguishable from successful and ongoing processes.
Large data tables needed clear hierarchy and status indicators.
Users needed to move from a high-level overview to individual records when investigating an issue.
Different processing stages needed to be represented consistently across the interface.

The Results

01 — Monitoring Dashboard

A centralized dashboard provides an overview of processing activity and helps users quickly identify areas that require attention.

02 — Processing & Status Tracking

Structured tables allow users to monitor records through different stages and understand their current processing status.

03 — Error States

Error states are clearly surfaced so users can quickly identify failed records and focus their attention on issues that require investigation

04 — Record-Level Investigation

Users can move from a list of affected records into detailed information to understand the specific issue associated with a record.

05 — System States & Feedback

Success, warning, processing, and error states were designed consistently across the experience to provide clear feedback about what is happening.

DESIGN PROCESS

Requirement Analysis	Flow & Wireframes	UI Design & States	Design Handoffs & Iterations
Understood the processing workflow, system requirements, and different error scenarios.	Mapped the monitoring and investigation flows and explored different ways to structure the information.	Designed dashboards, data tables, status indicators, error states, and detailed views.	Refined the designs based on technical feedback and edge cases across different system states.

KEY LEARNINGS

Complex internal tools need strong information hierarchy to prevent users from feeling overwhelmed by data.

Status and error states need to be immediately understandable and consistent.
Designing the path from overview → problem → detailed record makes investigation more efficient.
Understanding the underlying technical workflow is important when designing enterprise products.