Kablamo

Overview

Contributed to the frontend development of a national banking platform in Canada, delivering secure, accessible, and performant user experiences. Due to strict NDA agreements, direct screenshots cannot be shared, but this write-up details the technical and design work undertaken.

Project Context

Kablamo is a national banking application designed to provide users with a seamless, secure, and accessible digital banking experience. The platform includes critical features such as identity verification, payee management, transaction history, and account settings. My role focused on frontend development, ensuring cross-platform compatibility for iOS and Android, while maintaining high standards for accessibility and responsiveness.

Key Contributions

• Cross-Platform Development: Developed features using React Native, ensuring that screens were fully responsive and functional on both iOS and Android devices. This included dynamic forms, multi-step flows, and secure transaction screens.

• Identity Verification and Security Features: Implemented Identity Verification workflows, integrating biometric authentication and secure document uploads. Developed Payees Management, allowing users to safely add, edit, and manage their payees.

• Accessible and Internationalized Components: Created WCAG-compliant, accessible, and internationalized UI components using Storybook, ensuring that the platform was usable by all users, including those relying on assistive technologies.

• Design System Integration: Translated Figma designs into functional components and reusable design system elements. Worked closely with designers and business analysts to ensure visual fidelity and functional accuracy.

• Testing and Quality Assurance: Implemented unit and e2e tests using Jest to ensure stability, maintainability, and regression-free deployments. Focused on critical paths like user authentication, payments, and profile management.

• Animations and Interactivity: Built smooth animations using custom CSS and Reanimated 2, enhancing user engagement and providing clear feedback during interactions.

• CI/CD Optimization: Optimized GitHub Actions pipelines for linting, testing, type checking, and Chromatic visual testing. This led to faster build times and more efficient development cycles.

• Collaboration and Agile Practices: Participated in Agile sprint planning, task estimation, and scoping. Collaborated directly with business analysts to translate requirements into actionable features.

• Performance and Code Quality: Emphasized clean, modular, and maintainable code. Implemented code-splitting, lazy loading, and state management optimizations with React Query.

Challenges and Solutions

One of the key challenges was ensuring high security without sacrificing user experience. Identity verification required handling sensitive user data securely while providing a smooth and intuitive flow. By using secure storage, encrypted API calls, and real-time validation, the application maintained strong security standards.

Another challenge was accessibility. Every component had to meet WCAG guidelines, including proper color contrast, keyboard navigation, and screen reader support. Through rigorous testing and component reuse in Storybook, we ensured compliance across all screens.

Reflection

Working on Kablamo allowed me to bridge the gap between design, user experience, and technical implementation. Even without being able to share visual artifacts due to the NDA, the experience honed my skills in React Native development, accessibility, CI/CD optimization, and cross-team collaboration. It reinforced the importance of writing clean, testable, and maintainable code while keeping the user at the center of every design decision.

Overall, the Kablamo project was a rewarding experience that showcased how careful attention to security, accessibility, and performance can elevate a digital banking platform to deliver exceptional user experiences.

---

View website | Contact