CSX Centralized Dashboard

Creating a unified, responsive dashboard to consolidate data across multiple CSX applications


THE CHALLENGE

After delivering five separate applications for CSX, teams were struggling to get a clear, unified view of project data, signal site status, and key metrics. Information was scattered across multiple systems, making it difficult for stakeholders to monitor progress, identify issues, and make timely decisions. There was a clear need for a centralized dashboard that could bring critical information together in one place while maintaining consistency with CSX’s evolving design system.


THE SOLUTION

I led the design of a comprehensive, responsive dashboard that provides a single source of truth for key project and operational data. The dashboard was built to work seamlessly across desktop and mobile devices, allowing users to access and interpret important information regardless of where they are working. The design follows CSX’s new design system and color palette, ensuring visual consistency across all applications.

MY ROLE & CONTRIBUTIONS

As the lead UX designer, I took the initiative to design the dashboard from the ground up, leveraging insights from the five previously delivered applications.
My responsibilities included:

- Defining the overall information architecture and dashboard layout
- Designing responsive experiences for both desktop and mobile
- Establishing clear data hierarchy to help users quickly understand status and priorities
- Creating a set of reusable UI components specifically for this dashboard and contributed them to the official CSX Figma

DESIGN LIBRARY

Reusable Components Created to improve consistency and speed up future development, I designed and documented the following reusable components in the CSX Figma library:
- Data Cards (with multiple states: default, warning, critical)
- Status Indicators and progress trackers
- Filter & Search Bar components
- Responsive Data Tables
- Metric Summary Widgets
- Action Buttons and quick-action menus
- Empty States and loading states

These components were built following CSX’s design tokens and were made flexible enough to be reused across other internal applications.


DESIGN HIGHLIGHTS

Responsive by design - Fully functional and optimized for both desktop and mobile
Consistent with new CSX design system - Used updated colors, typography, and spacing.
Component-driven approach - Focused on scalability and maintainability through the shared Figma library.