Banking Mobile App
We launched the first-ever banking application in the USA built with React Native. React Native is a powerful tool for mobile development, and the banking industry is increasingly embracing it due to its ability to create native-like experiences from a single codebase across different platforms.
Situation
As a Lead Experience Designer, I was brought on board in January 2017 to work on a major US banking credit card and fintech product (#2 in the market) in the Chicago area. My initial focus was a significant migration from native mobile platforms to React Native, aimed at enhancing millennial engagement through conversational UX. A key responsibility was to shape the application's experience to feel truly native on both iOS and Android, while maximizing the efficiency of a single codebase (achieving roughly 90% reusability). This required deep research and investigation into how design and user experience best adapt to a cross-platform React Native environment.
Cross-platform
One codebase for both iOS and Android, reducing development time and costs.
Rapid dev & iteration
Faster time-to-market and the ability to quickly adapt to changing user needs.
Native-like performance
Delivers smooth and responsive user experiences, essential for banking apps.
Cost-effective
Reduced development and maintenance costs compared to native development.
Task
The existing iOS and Android applications, built as hybrid native applications, presented significant performance challenges. Users experienced slow loading times, and the hybrid architecture prevented the apps from delivering a true native feel. While the performance of the native components was satisfactory, any updates to the application faced extended market release times due due to the need to develop and plan for both platforms separately.
Action & Challenges
Developing with React Native for both iOS and Android presents significant challenges due to inconsistencies in functionality, behaviors, and style implementations between the platforms. For instance, a style property like overflow is supported on iOS but not Android, and many component properties are platform-specific, as noted in the React Native documentation. Furthermore, test automation code requires distinct adjustments for each platform. Given that our initial research indicates iOS supports more features than Android, an iOS-first development approach may be strategically advantageous for a product targeting both platforms.
Design principles for RN
React Native (RN) is a popular framework for building cross-platform mobile apps. Adhering to solid design principles ensures that your RN apps are efficient, maintainable, and user-friendly. Here are some key principles:
Quality Testing
To ensure the quality of our React Native code, we aim for 100% test coverage for both unit tests and integration tests.
Result
As a result of teams working together to improve this digital application here are some of the results. We has seen the following improvements:
