Cash Modernization is a redesign and transformation of the legacy CA$H desktop application into a modern, web-based platform.
The goal was to make the system accessible from anywhere, simplify complex workflows, and improve usability without compromising compliance or operational depth.
Company
СreditOne Bank
Product
Web Application
Year
2025
2024
Role
Lead UI/UX Designer
Inconsistent UI
Fragmented visual language made navigation confusing and broke the sense of continuity.
Overcomplicated Workflows
Routine actions took too many steps, causing unnecessary friction and slower task completion.
Overwhelming Data
Excessive steps made simple tasks slow and frustrating.
Limited Accessibility
Users with varying technical skills found it difficult to perform core actions efficiently.
User Interviews:
Understanding User Pain Points
I conducted focused interviews with analysts, decision-makers, and end-users to understand how they interacted with the CA$H platform day-to-day. The goal was to uncover usability gaps and pain points that slowed agents down during account management and payment processing.
We explored navigation challenges, data interpretation issues, and inconsistent workflows across modules. Many users mentioned that even simple actions required switching between multiple screens, leading to confusion and lost time.
Insights from user observations revealed exactly where people hesitated or got stuck. These findings became the foundation for simplifying the platform and improving overall efficiency.
Inconsistent UI
Simple actions like filtering data or generating reports required too many steps, slowing users down and breaking consistency.
Overwhelming Data
Dashboards displayed too much information at once, making it hard for users to focus and extract insights.
Limited Accessibility
Users with varying technical backgrounds struggled to navigate the system without prior experience or training.
Usability Audits:
Identifying Workflow Inefficiencies
To complement user interviews, I conducted a usability audit to identify interaction bottlenecks and workflow inefficiencies.
By mapping user journeys, I found where users got stuck or took unnecessary steps. Measuring time-on-task for key actions like generating reports and filtering data revealed slow points that impacted efficiency.
I also reviewed UI consistency — detecting misaligned elements, unclear labels, and inconsistent button placements. These insights helped shape a more streamlined and intuitive experience.
Fragmented Navigation
Users had to jump between multiple sections to complete a single task, leading to inefficiency.
Inconsistent UI
Misaligned UI elements, inconsistent button placements, and unclear labels created confusion and slowed down interactions.
Limited Sharing & Exporting
Important collaboration features were either missing or difficult to use, preventing users from efficiently sharing insights.
Full Project Workflow: From Research to Usability Testing
This workflow outlines the complete lifecycle
of the project — from early research and problem discovery
to the development of strategic UX foundations. Each phase builds on validated insights, ensuring that user needs, system constraints, and business objectives stay aligned throughout the process.
As the project progresses, the focus shifts toward visual design, prototyping, and iterative usability testing. This structured sequence reduces uncertainties, reveals friction early, and enables a smooth transition from concept to
a polished, user-ready solution.
Addressing UI Inconsistencies with a Systematic Approach
User research and usability audits revealed that UI inconsistencies, misaligned components, and unclear navigation created a fragmented user experience.
To address these challenges, we built a scalable design system using the Atomic Design methodology — ensuring consistency, efficiency, and long-term scalability.
Atomic Design Approach & Its Benefits
The Atomic Design structure provided clarity for scaling and maintenance. By defining visual and functional rules for each layer, we achieved modularity, reusability, and consistency — reducing design debt and accelerating implementation.
Atoms are the foundation of the system — colors, typography, icons, and numerical values.
These smallest elements define the platform’s visual and functional identity, creating a unified language for all components.
Atoms
These core elements maintain visual and functional coherence across all components of the platform.
Together they ensure long-term design consistency and simplify future scalability.
4 pt
Closely related
Not related
8 pt
24 pt
32 pt
48 pt
Standardized numerical formats, including spacing, padding, border radius, ensuring design precision and alignment.
Molecules
Molecules are simple combinations of atoms that work together as functional units. Think of a search bar (input field + icon + button) or a form label + text input — these components introduce basic interactivity and usability patterns. They establish the foundation for more complex organisms, ensuring consistency in behavior and visual rhythm across the interface.
Organisms
Organisms are more complex UI sections built from molecules and atoms. These could include navigation bars, cards, modals, or dashboard widgets — components that users interact with at a higher level. They provide structure and define how multiple elements work together as cohesive sections of the interface, ensuring clarity and usability at scale.
To maintain a structured and scalable workflow, I implemented a well-organized Figma file system that allowed designers and developers to find and update components quickly.
By categorizing elements logically — such as UI components, design patterns, and shared assets — I ensured the design system remained easy to navigate and scalable as the product evolved.
This structure improved collaboration and minimized the risk of design inconsistencies across teams.
Tokens – Key to Consistency
Tokens are the core elements that define and store reusable design values — such as colors, typography, spacing, and motion — ensuring consistency across all components and levels of the design system.
Color Tokens: define primary, secondary, and status colors (e.g., “primary-blue”), enabling quick updates across light and dark modes.
Typography Tokens: specify font families, sizes, and line heights for consistent text presentation.
Spacing Tokens: set standards for margins, padding, and layout spacing to streamline alignment.
Corner Radius Tokens: define consistent rounding for elements like buttons, cards, and modals to maintain a unified aesthetic.
By leveraging tokens, the design system remains scalable, efficient, and easy to maintain — reducing errors, speeding up updates, and preserving visual harmony across the platform.
To ensure accessibility and visual balance, the design system supports both Dark and Light themes through color tokens and shared variables.
Each mode adapts automatically, maintaining contrast ratios and preserving brand identity across environments.
By centralizing color logic in tokens, updates and refinements can be made globally — keeping the interface consistent and scalable.
Ensuring an Inclusive Experience
Accessibility is essential for creating an inclusive experience, ensuring that all users — regardless of ability — can interact with the platform efficiently. From color contrast to keyboard navigation, every design decision was made with usability in mind.
By adhering to WCAG 2.1 AA standards, we built a platform that is inclusive and usable for individuals with diverse abilities. The design system and token framework streamlined accessibility implementation, allowing consistent application of compliant styles across all components.
Key Enhancements
Color Contrast: All color tokens were tested to meet or exceed WCAG contrast ratios (minimum 4.5:1 for normal text and 3:1 for large text), ensuring readability in both light and dark modes.
Helps low-vision users and improves readability across different lighting conditions.
Prevents contrast failure in UI elements, ensuring clear visibility.
Typography and Spacing: Clear font hierarchies, sufficient line spacing, and generous padding were applied to improve legibility and usability, particularly for users with visual impairments.
Supports users with dyslexia, cognitive impairments, or vision difficulties.
Reduces strain from tight letter spacing on small fonts.
Focus States: Distinct focus styles were implemented for all interactive elements, making navigation clear for users with limited mobility or those using keyboard-only input.
Crucial for users with motor impairments or those relying on keyboard navigation.
Prevents users from getting “lost” when navigating forms, menus, and toolbars.
By combining these enhancements, the platform achieves a high level of accessibility compliance — ensuring usability, comfort, and equity for every user.
What Was Achieved?
The redesign of Cash delivered a more consistent, accessible, and scalable platform UCRM. Through the new design system, optimized user flows, and accessibility compliance, we improved clarity, reduced friction, and enhanced overall performance for all user groups.
Consistent UI
The design system unified interface components, eliminating visual discrepancies and improving navigation flow across modules.
Simplified Workflows
Streamlined user journeys reduced unnecessary steps, making key actions 40% faster and improving task completion efficiency.
Clearer Data Presentation
Refined dashboard layouts removed visual clutter, making insights easier to interpret at a glance.
Enhanced Accessibility
Improvements in contrast, focus states, and assistive technology support created a more inclusive and comfortable experience for all users.
Expanding the Design System
Continue refining and expanding the component library to support new features and ensure long-term scalability.
Continuous User Testing & Iteration
Gather ongoing user insights to refine the UX, improve workflows, and enhance usability based on real-world usage.
Enhancing Accessibility
Further improve accessibility by integrating user feedback, refining contrast adjustments, and optimizing keyboard navigation.
AI & Automation Integration
Explore AI-driven UI optimizations, personalized dashboards, or automated design improvements to further enhance user experience.
UCRM project reveals My UX thinking and design craft. Explore the Screens, interactions, and visual storytelling
behind the final interface. Every component reflect my focus on users and clean design logic.
