Pronto Xi Data Grid UX Transformation
Pronto Xi ERP | Enterprise SaaS | B2B Product Design | Pronto Design System:
“Powered by IBM Carbon Design principles, adapted for ERP.”
Overview
Redesigned the core data grid experience in Pronto Xi—used daily by enterprise users to manage high-volume, complex data across finance, operations, and inventory workflows.
The goal was to transform a dense, inefficient, and error-prone interface into a scalable, intuitive, and high-performance interaction system.
Problem
The existing data grid was a critical but broken experience:
-
Difficult to scan and interpret large datasets
-
High cognitive load due to poor hierarchy and structure
-
Inefficient workflows requiring excessive clicks and manual effort
-
Inconsistent behaviours across modules
-
High dependency on training and support
This wasn’t just a UI issue — it was a system-level usability problem affecting productivity at scale
Users
-
Finance teams (payroll, accounting)
-
Operations teams (inventory, logistics)
-
Admin and managers (reporting, oversight)
Multi-role system with different goals, but shared interface constraints
My Role
-
Lead UX Designer (Product role)
Owned the initiative end-to-end: -
Discovery → Problem framing → Design → Validation → Delivery
-
Worked closely with:
-
Product Managers
-
Engineers
-
Business stakeholders
DESIGNS
Advanced Filters
Advanced Datagrid Filters
Add new customer
Notifications
UX PROCESS
1. Discover
Methods:
-
User interviews (finance & operations users)
-
Usability testing on existing grid
-
Support ticket and feedback analysis
-
Workflow observation
Key Insights:
-
Users struggled with finding, filtering, and acting on data quickly
-
Most errors came from misinterpretation, not system failure
-
Heavy reliance on memory and training instead of UI guidance
Insight:
-
The grid wasn’t supporting decision-making — it was forcing users to think too much
2. Define
Reframed the problem:
-
Design a data interaction system that supports fast, confident decision-making
Design Principles:
-
Clarity over density
-
Reduce cognitive load
-
Progressive disclosure (show only what’s needed)
-
Consistency across modules
-
Speed of interaction
3. Design (System Thinking Approach)
Key UX Improvements:
1. Information Hierarchy & Readability
-
Introduced clear visual hierarchy (spacing, typography, grouping)
-
Improved scanability for large datasets
2. Smart Filtering & Sorting
-
Simplified filtering with contextual controls
-
Reduced steps to find relevant data
3. Inline Actions & Editing
-
Enabled direct interaction within the grid
-
Reduced navigation and context switching
4. Feedback & Error Prevention
-
Introduced inline validation and system feedback
-
Reduced user errors and uncertainty
5. Scalable Interaction Patterns
-
Designed reusable grid behaviours across modules
-
Created foundation for a design system component
AI-Driven UX (Forward-Looking Layer)
To enhance efficiency and reduce manual effort, I introduced AI-assisted interaction concepts:
-
Suggested filters based on user behaviour
-
Smart defaults for frequently used actions
-
Contextual assistance (e.g. highlighting anomalies in data)
Goal: Reduce effort, not just improve UI
4. Prototype & Validate
Methods:
-
Interactive prototypes (Figma)
-
Task-based usability testing
-
Iterative feedback loops with users
What we tested:
-
Time to complete tasks
-
Error rates
-
Ease of navigation and understanding
5. Deliver & Scale
-
Worked with Engineering to ensure feasible, scalable implementation
-
Defined reusable patterns for design system integration
-
Rolled out improvements incrementally across modules
IMPACT (MEASURABLE OUTCOMES)
-
↑ 35–45% improvement in task efficiency
-
↓ 20–30% reduction in user errors
-
↓ Significant reduction in training/support dependency
-
↑ Improved user confidence and speed in decision-making
DESIGN APPROACH (WHAT I BROUGHT)
Systems Thinking
-
Designed not just a component, but a scalable interaction system
Product Thinking
-
Focused on user outcomes + business impact, not just UI improvements
AI Mindset
-
Explored how automation and intelligence can reduce effort
Practical UX
-
Balanced:
-
User needs
-
Technical feasibility
-
Business constraints
WIREFRAMES
“In complex systems, the problem is rarely the interface—it’s how users think, decide, and act within it.
By shifting from ‘table design’ to ‘decision-support system design’, we significantly improved usability, efficiency, and confidence.”
