CFNA Bank
-
I spearheaded the myCFNA Mobile app project for 8 months, prioritizing accessibility as a paramount requirement. Crafting a comprehensive Design System and Brand Guide library for both iOS and Android, I ensured strict adherence to accessibility standards—iOS's Human Interface Guidelines and Android's Material Design. Despite challenges like the client's insistence on gradients for icons, the team's collaboration exceeded expectations, securing a Top 10 position in the App Store. Throughout, the focus remained on delivering a clear and accessible user experience within CFNA brand guidelines and specifically targeting the USA market.
-
As the sole Senior UI Designer, my role extended beyond iOS and Android development. I not only tailored high-fidelity wireframes, managed text styles, and participated in end-to-end processes but also assumed responsibility for design QA and interaction design. Despite challenges, my unwavering dedication ensured a clear user experience within CFNA brand guidelines, navigating client preferences, particularly concerning UI controls. Accessibility remained a top priority throughout the design process.
In close collaboration with the UX lead, my responsibilities also involved active participation in core team meetings and collaboration with both front-end teams (iOS and Android). Additionally, I worked closely with the QA team, conducting design QA to ensure pixel-perfect implementation and responsiveness to the requirements and constraints of both systems.
-
Collaboration with a dedicated team resulted in the successful myCFNA Mobile app, with accessibility at its core. A US-based product owner led decision-making, supported by an Indian project manager and scrum master. A part-time US-based product manager from DMI advocated for our suggestions. Despite changes, the US-based UX Lead contributed 25-50% of their time, emphasizing accessibility. A US-based colleague aided in building the component library with a focus on accessibility. The team also included a mid-level UX designer in India, a junior UI designer in the US, and a Lead designer in London, fostering communication. The iOS (3 persons) and Android (3 persons) front-end teams and a QA team (two persons) in India ensured effective implementation with accessibility as a key consideration.
My Achievements
Guided the successful development of the myCFNA Mobile app over an 8-month span, securing a Top 10 position in the App Store. Established a robust Design System and Brand Guide library for iOS and Android, with a focus on strict adherence to accessibility standards. Overcame challenges, including addressing client preferences for UI controls, to deliver a user-friendly and accessible experience within CFNA brand guidelines.
In a notable victory, championed the retention of the contact customer support feature, supported by user tests with 15 participants. Took charge of presenting interactive prototypes for UX tests and client approval, ensuring seamless flows and screens that resonated with both user expectations and client requirements.
As the sole Senior UI Designer, led end-to-end processes, tailored wireframes, managed text styles and ensured design QA. Emphasized interaction design with a consistent integration of accessibility principles throughout the project. Collaborated seamlessly with a diverse and distributed team, effectively communicating with stakeholders across various locations, resulting in the successful realization of the myCFNA Mobile app.
Login & Home
Tap image to play/pause video
Crafting the myCFNA Mobile app's login and home page prioritized seamless accessibility and user engagement. The login interface ensures simplicity and intuitive account entry. The home page offers immediate access to essential features, prominently displaying account status, payments, and transaction monitoring. We added a dedicated Customer Support section based on user testing feedback, preventing frustration. The design, visually cohesive and user-friendly, aligns with CFNA brand guidelines and platform design standards, ensuring a pleasing and functional user experience on both iOS and Android.
Login and Home screens (iOS & Android)
Pay Bill
Add a Payment Method flow (tap to play)
The Pay Bill feature on the myCFNA Mobile app offers a seamless and customizable payment experience. Users can effortlessly add and manage payment methods, including updating and choosing preset or custom amounts. This feature grants users flexibility by allowing them to set specific payment dates and choose their preferred payment method. With the ability to tailor payments according to individual preferences, the Pay Bill feature ensures a user-friendly and personalized approach to managing financial transactions within the app.
Make a Payment flow (tap to play)
Transactions
Transactions (tap to play)
The Transactions List feature on the myCFNA Mobile app enhances user accessibility with a comprehensive dropdown menu, providing filter options such as "Activity since last statement," "Last Statement," "Previous 13 Months," and "Payment Activity." This thoughtful categorization allows users to easily navigate and filter transactions based on their preferences, from the most recent to the oldest transactions. The default selected filter is "Activity since last statement," offering users an immediate view of their recent transactions. While we initially explored implementing tabs to streamline the process, client preferences led us to adhere closely to the web bank version, ensuring consistency in user experience across platforms. This design choice ensures a familiar and efficient transaction tracking experience for users within the mobile app. Additionally, users can access detailed information for each transaction by clicking on the respective item in the list.
Scheduled Payments
Scheduled Payments Flow (tap to play)
The Schedule Payments feature on the myCFNA Mobile app offers users a streamlined and flexible approach to managing their financial transactions. Beyond the convenience of planning and scheduling payments, this intuitive feature empowers users with the ability to easily cancel or modify scheduled transactions, providing unprecedented control over their CFNA Credit Card accounts. Moreover, the app's design facilitates straightforward tracking, granting users quick access to upcoming scheduled payments directly from the home page. Originally conceived as an additional feature for MVP 1, this enhancement enhances user autonomy and contributes to a stress-free banking experience.
Cancel payments: Scenarios 2A & 2B (tap to play)
To enhance user experience in canceling scheduled payments, we proposed three scenarios, each catering to different user preferences and mobile interactions. In Scenario 1, users can cancel payments through the "Transaction Details" screen by tapping the dedicated "Cancel Payment" button in the footer. For users less familiar with mobile gestures, Scenario 2A allows them to partially slide the scheduled payment transaction item to reveal the cancel option. In Scenario 2B, users can cancel immediately by sliding the transaction item fully to the left. Recognizing the need to balance efficiency and user familiarity, we suggested implementing these scenarios gradually across releases. This approach aimed to educate users and ease them into these common mobile gesture interactions over time.
Statements
Statements Flow (tap to play)
Accessing your billing statements on the myCFNA Mobile app is quick and straightforward. In the initial MVP, the statements section featured a simple list, allowing you to view and download up to 13 months of billing statements. Statements are typically posted online 3-5 days after your statement cycle date, and if you've opted for a paperless approach, you'll receive a convenient email reminder when your statement is available online. The app provides the option to seamlessly open and download PDF files using system features, ensuring easy access to your financial information.
Account
Profile Settings (tap to play)
The Account tab in the main menu of the myCFNA Mobile app serves as a centralized hub for user account management. Here, users can access their profiles and configure Touch/Face ID settings for enhanced security. Additionally, the Card Services section allows users to activate their credit card and manage payment methods conveniently within the app. In the Contact sector, users find a list of frequently asked questions (FAQs) for quick reference. For customer service, the app provides three contact options: a user-friendly free-form email, a less emphasized call option, and a repeat FAQs link. Despite our suggestion to streamline the process, the client preferred to retain the repeat FAQs link, leading users to the CFNA bank page. The design prioritizes user convenience while accommodating the client's preferences for contact methods.
Customer Service (tap to play)
Design System
DS Pages (tap to play)
The myCFNA Mobile app's Design System, meticulously crafted from the ground up, served as the cornerstone of our design process. Comprising two key components, the Style Guide provided detailed Typography specifications tailored to iOS accessibility guidelines and Material Design accessibility guides, including layout grids and comprehensive details on styles, such as elevations, transparencies, colors, icons, illustrations, and logos. The Global Component Library featured extensive variants of design components, thoughtfully customized for both small and large device sizes for iOS and Android. This comprehensive foundation facilitated the creation of storybooks by the front-end teams, allowing precise implementation of the designs. As the lead UI designer, I played a crucial role in overseeing design quality assurance (QA), meticulously examining the staged app for pixel-perfect adherence to the designs. This collaborative effort resulted in a cohesive and finely tuned Design System, underpinning the app's visual consistency and optimal user experience across diverse device sizes.