Projects
VP Banking Channel
In 2021, I initiated and continue to develop a comprehensive Digital Product Design system.
I personally designed the entire Design System, including its Tokens System.
This Design System was created for a global fintech company that operates in 15 countries across Europe, North America, Asia, Africa, and the Middle East.
Overview
The organization is a global financial software provider, operating in 15 countries across Europe, North America, Asia, Africa, and the Middle East.
Product Suite:
VeriPark offers a range of integrated banking solutions, including:
• Core Banking Modules: Seamlessly integrated with Microsoft CRM for streamlined operations.
• Field Sales Tools: Mobile applications designed for efficient customer engagement.
• Branch Banking Software: A comprehensive solution for effective branch management.
• Online and Mobile Banking: Providing customers with convenient access on any device.
Product Users
Bank and Fintech IT and Operations Teams
Financial and Risk Management Teams
Customer Service Teams
Strategic and Executive Management
User Needs & Market
The banking software market is rapidly expanding, driven by several key factors:
• Enhanced customer and user experience
• Digital transformation
• Cloud adoption
• Adherence to global and local financial regulations
• Simple and fast registration processes for new users
• Scalability
• AI integration
In the last five years, the time to market (TTM) for fintech and bank mobile applications has become increasingly critical. TTM refers to the period between a product’s conception and its launch. A swift TTM can significantly impact a company’s success. Therefore, the company needs to significantly improve its software development and experience planning processes.
Challenges
The goal was to create a diverse and easily manageable structure that could cater to different countries and continents. However, several challenges emerged:
Inconsistent
User Experiences
Misaligned
Design Decisions
Regulatory
Compliance Issues
Localization
Challenges
Inefficient
Collaboration
Technical
Limitations
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.
Solutions and Action Plans
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.
Defining UX/UI Strategy
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
Problem Statement
• A fragmented UX team structure and the lack of standardized processes led to design inconsistencies and a suboptimal user experience across mobile and online platforms. The UX team was distributed with 3 designers in Turkey, 1 in Dubai, 1 in India, and 3 in Pakistan.
• Additionally, the product’s inflexible and generic architecture hindered its adaptability to diverse markets, resulting in increased development costs and delayed project timelines.
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
Examples
Lifestyle support is a collection of features integrated into a banking app, aimed at assisting customers in managing various aspects of their daily lives that can sometimes feel overwhelming. The key features include:
My Life: Lifestyle Management for Everyday Ease
My Car: Manage Your Vehicle with Ease
-
Register your vehicle to automate payments for car insurance, vehicle taxes, and receive reminders for annual services.
-
Track toll and bridge crossings with automatic payment options.
-
Get personalized offers tailored to your customer segment, such as discounts on car maintenance or fuel.
My Home: Home Management Made Simple
-
Register your home to automate recurring payments such as insurance premiums, property taxes, and annual maintenance fees.
-
Keep track of toll and bridge crossings with automated payment processing.
-
Enjoy personalized offers tailored to your needs, like discounts on home improvement services.
My Travel: Simplify Your Vacation Planning
Easily arrange flight bookings, travel insurance, and airport transfers.
Get personalized travel offers and suggestions based on your preferences and past trips.
My Health: Tailored Health Support for Your Family
Add your family members to access a wide range of health services and insurance options. Receive health insurance offers and advice tailored to meet the specific needs of your family.
Information Architecture
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