Projects
VeriPark Banking Channel Design System
A modular design system built to standardize banking experiences across products, markets, and teams.
Overview
Role: Senior Product Designer (UX/UI)
Scope: Design System Architecture, Design Tokens, Information Architecture, UX Process Improvement, Navigation, Onboarding
Context: Banking Ecosystem, Fintech
Year: 2020 - Ongoing
Summary
In 2020, I initiated and led the design system thinking behind VeriPark’s Banking Channel ecosystem. The goal was not only to improve visual consistency, but to build a scalable product foundation that could support multiple banking solutions across different markets, regulatory contexts, and customer needs.
This work covered system architecture, token structure, reusable UI logic, and the UX foundations needed to scale product quality across the ecosystem.
The Problem
The core problem was bigger than visual inconsistency. Different products, teams, and market needs were creating fragmentation across the experience. Localization, compliance, and technical constraints were increasing complexity, while the existing product structure was too rigid to adapt efficiently across markets.
The system needed to do three things well: create consistency, allow flexibility, and reduce product complexity without slowing teams down.
How I Solved It
I approached the problem by building a tokenized and modular design system that could support both shared consistency and local adaptability. I defined a central foundation structure, supported localized extensions through connected design layers, and helped shift the product architecture toward a more scalable model.
Beyond the system itself, I improved the UX process by introducing earlier design involvement, stronger wireframing discipline, clearer feedback loops, and more structured handoff practices.
My Role
I led the design system logic from the ground up, shaping the foundation behind a more scalable banking product ecosystem.
My contribution included defining the token structure, reusable UI logic, system architecture, information architecture improvements, and the redesign of high-impact areas such as navigation and onboarding. I also helped establish a stronger UX process across teams to improve consistency, collaboration, and delivery quality.
System Strategy
The system was built on a tokenized atomic structure to support scalability, flexibility, and long-term maintainability. It expanded the widget library with richer states and variations, supported regional content and visual differences through variables and theming, and created a stronger foundation for accessible and reusable product experiences.
A central Foundation Base Library supported multiple products, while Local Design Systems allowed banks and markets to adapt the experience without breaking the core system logic.
Solutions and Action Plans
Scope & Constraints
Management decided to develop a hybrid application instead of a native one.
The product needed to be compatible with the Payment Services Directive (PSD2) in the EU.
Defining UX/UI Strategy
Atomic Design System
Implemented a tokenized atomic design system to create a scalable and adaptable design language for development.
Widget Variations
Expanded the existing widget library to include different states and variations, enhancing flexibility.
Content Changes
Utilized Figma variables to efficiently manage content variations (e.g., currencies, address formats, terminology) across different regions in demo designs.
Visual Theming
Developed region-specific visual themes, including color palettes and imagery, based on cultural preferences and mental models.
New Information Architecture
The existing architectural structure, originally a copy of the online banking menu adapted for mobile, was overhauled. By transitioning to a mobile-first approach, the menu structure was changed from function-based to product-based.
Renewed Business Flows
Existing flows were renewed and optimized according to the mobile-first approach, enhancing the mobile user experience.
Accessibility
Given the regulated nature of the sector, the application was made accessible at the AAA level.
Establishing a UX Process
Ideation Meetings
Directly involved UX designers in early discussions to align on project goals and methodologies.
Constant Feedback
Held regular meetings with sales teams to address problems customers experienced during sales demos and to gather feedback directly from those demos.
Benchmarking & Research
Leveraged the ‘Fintech Insights’ tool to analyze competitor solutions and industry trends.
Wireframing
Introduced wireframing as a crucial step before UI design to visualize user flows and interactions.
Iterative Approval and Prototyping
Integrated approval checkpoints throughout the design process, including interactive prototypes for better stakeholder understanding.
Handoff
Streamlined the handoff process to development with clear documentation and assets.
Discover
Define
Ideate
Design
Design System
The design system architecture depicted in the image presents a modular approach, with a central ‘Foundation Base Library’ serving as the core component repository. This base library supports various products, indicated in blue.
These products are interconnected and leverage the core components from the foundation. Additionally, each product integrates with ‘Local Design Systems,’ which are tailored for specific brands or customer segments, as shown in green.
This architecture ensures consistency across products while allowing for customization and flexibility at the local level, enabling a cohesive yet adaptable user experience across different platforms and touchpoints.
Structure
Tokens
Streamlined Navigation for Improved User Experience
The existing information architecture was organized by actions, leading to an overcrowded menu that hindered usability. To address this, I conducted a benchmark analysis of 62 banks and then simplified the navigation’s information architecture, implementing progressive disclosure for easier access.
Challenges
-
Cluttered Menus: Users had to first locate the action they wanted to perform and then select the relevant product. This created a multi-step process that was inefficient and prone to errors.
-
Overwhelming Choices: Action categories were not grouped, leading to long lists of options. For example, the ‘Accounts’ category contained 24 actions, making it difficult for users to find what they needed.
-
Reorganized Information Architecture: We regrouped the entire action set and moved product-specific actions to the product detail page as a context menu. This streamlined the main navigation and allowed users to select their desired product first.
-
Progressive Disclosure: We restructured the menu to be more intuitive, reducing cognitive load.
-
Quick Actions: On the homepage, we introduced default quick actions based on the user’s selected product. This allows users to quickly perform common tasks, such as transferring money from a selected account or paying off a selected card’s balance.
Solutions
Older Version
New Version
Older Version
New Version
Transfers Menu Items
Cards Menu Items
Themes & Moods
A design system was created with variations and different themes and moods tailored to various cultures and geographies. A total of 12 distinct themes/moods were applied.
Simpler screens were designed for users in the U.S., Canada, and Europe, while more colorful screens were created for customers in the Middle East, Africa, and Asia. Three of these models were made available for demonstration in customer presentations with on-the-fly theme switching, while the others were presented as part of a catalog.
Improvements and New Flows
Optimization of Onboarding Process:
The initial onboarding process was labor-intensive, prioritizing the system’s needs over the users'. This resulted in a lengthy, detail-heavy process that felt more like a web form than a mobile-first experience.
To address this, we:
-
Applied design psychology principles
-
Reduced cognitive overload
-
Created a streamlined, mobile-friendly flow that respects the user’s time and effort
Key Improvements
-
Reduced steps
-
Simplified language
-
Visual cues
-
Prioritized information
As a result, the onboarding flow was optimized from 13 steps and 33 actions down to 6 steps and 32 actions.
New Optimized Flow
Old Flow
Enhancements and Feature Additions
As part of our improvement initiatives, we conducted extensive benchmarking and research to identify new features that could enhance the product. The following features were successfully integrated:
-
QR Code Capabilities
-
Digital Queue Management
-
KYC (Know Your Customer) Processes
-
Comprehensive Investment Module (Covering Stocks, Mutual Funds, Crypto, Bonds, Commodities, FX, and more)
-
Mobile Money Transfers (Including Money Requests and Bill Sharing)
-
Stored Value Accounts (SVA)
-
Prepaid and Gift Cards
-
Lifestyle Management Tools (Such as My Car, My Home, My Travel, My Health)
-
Personal Finance Management (PFM)
-
Equal Payment Plans (EPP)
-
Open Banking Integration
-
Carbon Footprint Monitoring
-
Siri Voice Assistant Integration
Key Advantages
Ease of Use:
Automate your recurring payments and set reminders to save valuable time and prevent any late fees.
Customization:
Enjoy personalized offers and suggestions that cater to your unique needs and preferences.
Reassurance:
Feel confident knowing that your home, vehicle, travel arrangements, and health are all well-managed.
Enhancing Conversion Rates
Utilize Attention Insight Heatmaps powered by predictive eye-tracking technology to gain insights into how users interact with your design, ultimately increasing conversion rates.
Completed Projects
ICU - Innovation Credit Union, Canada
Garanti BBVA, Romania
Ongoing Projectes
Gibaltar Bank, Gibraltar
Beem Credit Union, Canada
Outcomes
This project highlights the effectiveness of a user-centered design approach. By dedicating resources to UX research and establishing a structured process alongside a scalable design system, we accomplished the following:
-
Enhanced user satisfaction and engagement
-
Boosted sales and conversion rates
-
Improved project efficiency with quicker time to market
-
Lowered development costs by minimizing rework
-
Developed a scalable design system for future expansion
These outcomes underscore the significant influence of focusing on user needs, positively impacting both user experience and overall business success.
Lessons Learned
-
Successful UX isn’t isolated to a single person or team; it thrives when integrated across the company.
-
Collaboration with diverse teams, a deep understanding of the business model, and a focus on measurable impact are key to scaling UX and driving meaningful results.
On the design side, we addressed localization using variables, allowing us to quickly reflect changes in the design, such as differences in currency across countries.
Components
Organisms
Documentation & Guidelines
Product Guidelines serve as a vital compass, ensuring that all stakeholders understand and effectively utilize a product’s features. By establishing a shared language and vision, these guidelines foster consistency, streamline collaboration, and accelerate decision-making.
Ultimately, this leads to a more cohesive user experience, reduced development time, and a product that truly aligns with user needs and business goals.
Templates
Example of an Account Details Page Template: This page displays the details of a bank account and includes separate variations for different account types. As shown in the examples, it reflects a basic UI concept.
Ensuring Accessibility Compliance
The existing product did not meet accessibility standards across various regulations, particularly in Canada and the United States. Recognizing the critical importance of accessibility in financial applications, my manager and I initiated efforts to align our design system with WCAG 2.0 Level AAA guidelines during its development.
This comprehensive effort involved:
-
Thorough Accessibility Audit: Utilizing the Spark tool, we conducted a detailed audit to identify and prioritize accessibility issues within the product.
-
Design System Overhaul: We redesigned the design system components and patterns to adhere to WCAG 2.0 Level AAA requirements, ensuring a solid foundation for future development.
-
Collaboration and Education: I closely collaborated with the development and QA teams, providing training on Figma and accessibility principles, along with best practices. This fostered a shared understanding of the importance of accessibility and empowered the teams to create inclusive user experiences.
Information Architecture
Tasks based navigation to product base navigation Progressive Disclosure