CISA Business Management Platform
CISA Business Management Platform is an online tool for financial officers to increase transparency and accountabilities as well as support data-informed decision making for leaders at all levels of the CISA organization.
Duration
3 Months
Client
Department of Securty -
Cybersecurity and Infrastructure Security Agency (CISA)
Role
UI Design
UX Design
Problem
The BMP platform lacked a cohesive visual language and clear interaction patterns, which led to confusion for users and inefficiencies for the development team.
Financial officers struggled to navigate the platform due to inconsistent layouts and unclear hierarchy. At the same time, developers had no standardized components, making implementation slower and inconsistent across features.
The platform also had accessibility issues, creating barriers for some users and potential compliance risks.
Before Experience
The existing platform was inconsistent and difficult to use.
Key issues:
-
Inconsistent typography, spacing, and component styles across screens
-
Unclear visual hierarchy, making it hard to scan and prioritize information
-
Different interaction patterns for similar actions (e.g., buttons, forms)
-
Accessibility gaps such as low contrast, missing labels, and weak focus states
These issues increased cognitive load for users and created inefficiencies for developers, who had to recreate patterns without clear standards.
Goals
-
Create a consistent visual language across the platform
-
Build a scalable design system to improve efficiency
-
Ensure accessibility compliance and inclusive usability
Approach
Exploration
I started by auditing the existing platform to identify usability and accessibility issues. This included reviewing typography, spacing, layout patterns, and component behavior across multiple screens. Accessibility testing revealed gaps in contrast, labeling, and keyboard navigation, which directly impacted usability. These findings showed that the problem was not isolated to individual screens, but systemic, requiring both UI improvements and a foundational design system.
Key Trade-offs
Consistency vs. flexibility
Standardized core components while allowing enough flexibility to support complex financial workflows.
Speed vs. scalability
Focused on building reusable components that could scale across the platform, rather than quick one-off fixes.
Accessibility vs. legacy constraints
Improved accessibility within the limits of the existing system while prioritizing the most critical usability issues.
Constraints
-
Existing platform structure and legacy UI patterns
-
Need to support complex financial workflows
-
Alignment with accessibility standards and compliance requirements
Solution
Based on the audit and accessibility findings, I redesigned key screens and established a scalable design system.
Key Design Decisions
Standardized visual system
Defined consistent typography, spacing, and layout rules to create a clear visual hierarchy and improve readability.
Reusable component library
Created standardized components (buttons, forms, inputs, tables) to ensure consistent interaction patterns across the platform.
Improved interaction patterns
Aligned similar actions across screens to behave consistently, reducing user confusion and learning time.
Accessibility improvements
Enhanced contrast, labeling, and focus states to meet accessibility standards and improve usability for all users.
Interactive prototypes
Developed Figma prototypes to validate design decisions and provide clear guidance for developers during implementation.
Experience Improvement
Before
-
Inconsistent UI across screens
-
Unclear hierarchy and difficult navigation
-
Repeated patterns implemented differently
-
Accessibility issues affecting usability
After
-
Unified visual language across the platform
-
Clear hierarchy for easier scanning and decision-making
-
Consistent interaction patterns
-
Improved accessibility and usability
Designing for Clarity
I focused on improving visual hierarchy so users could quickly understand and prioritize information. Consistent spacing, typography, and layout patterns made complex financial data easier to scan and interpret.
Improving Developer Efficiency
By creating a reusable design system, I reduced ambiguity for developers. Clear component definitions and interaction patterns made implementation more predictable and reduced rework.
Designing for Accessibility
Accessibility was integrated into the design system from the start. I ensured proper contrast, clear labeling, and visible focus states, making the platform more usable for a wider range of users.
Results
The redesigned platform improved both usability and development efficiency.
Observed and expected outcomes
-
Improved task clarity and navigation for users
-
Reduced confusion caused by inconsistent UI patterns
-
Increased usability through accessibility improvements
-
Faster and more consistent implementation by developers
Impact
-
Improved platform usability with clearer visual hierarchy and consistent interactions
-
Addressed accessibility issues, ensuring compliance with accessibility standards (contrast, focus indicators, labeling)
-
Streamlined developer handoff through detailed prototypes and a design system
-
Established a scalable framework for future feature development, reducing design inconsistencies
-
Enhanced overall user experience for a wider and more inclusive audience
Learnings
This project reinforced that accessibility improvements often lead to better usability for all users. Establishing a design system early helps teams move faster and maintain consistency across complex platforms. System-level problems require system-level solutions; fixing individual screens is not enough without a strong foundation.
