Application Modernization for a Leading Financial Firm

A leading financial firm wished to modernize six customer-facing applications running on four technology stacks. A comprehensive application modernization assessment delivered an actionable roadmap to the client, enabling them to use only one Angular/Ionic-based framework for all apps. This reduced development time, costs, and improved cross-functional collaboration.

Our work involved

• UX review
• System architecture modernization
• Agile transformation
• Training and support
• QA review
• Front-end roadmap

Impact

• Reduced development time and costs
• Simplified QA process
• Improved cross-functional collaboration
• Accelerated recruitment

A few years ago, one of America’s oldest financial firms began the journey of digitizing its business. They created dedicated websites for their insurance business, loans, and native mobile applications for iOS and Android. Additionally, they also had a tablet application for branch kiosks.

However, with time, the firm’s frontend frameworks and development practices became outdated. This was causing performance issues and leading to inconsistent customer experiences.

After the initial success of a security assessment that upgraded their overall security posture, the client re-engaged our team with a bigger challenge: help them modernize all of their customer-facing apps.

Understanding the problem

Modus Create’s team joined the financial firm to understand its specific challenges. The firm had six customer-facing applications that exhibited four different technical approaches. This presented several key challenges for the firm’s development team.

Mobile performance

Mobile devices with slower connections experienced poor performance due to the significant size of downloads.

Inconsistent UX

Different technical approaches meant inconsistent experience, which affected brand consistency.

Slow development

Different teams were working out of the same codebase, reducing the scope of rapid, incremental improvements.

No knowledge transfer

Different tech stacks limited knowledge transfer and skill sharing, restricting engineers from working on multiple products.

Recruitment hurdles

It was a challenge to rapidly scale the engineering team due to the specific technical requirements of each customer-facing app.

After understanding the requirements, the team suggested moving to one technology stack for all applications based on an Angular/Ionic framework.

Consolidating four tech stacks into one

However, successful application modernization is never just about technology. It should cover all three key variables of development: Product, Process, and People.

Process of product modernization

The team took a deep dive into the present state of the UX and architecture of all six customer-facing applications.

UX

There were design deviations across different applications. For example, the tablet application looked very different from the web and mobile versions. There was also considerable feature disparity between mobile and web apps. This created difficulties for customers, who complained that they had to call the office to complete transactions they expected in the mobile app, such as updating bank information.

After an exhaustive UX review, the team provided a set of actionable recommendations:

• Unify look/feel across platforms: Sync the designs across web, mobile, and tablet for easier back-and-forth access and transitions for users.
• Understand users: Utilize analytics, suggestions, and feedback from the apps to better reveal the user journey and expectations.
• Evidence-based roadmaps: Create feature roadmaps based on actual user insights from interviews, A/B testing, and surveys.
• Single Sign-on: Save user credentials for a smoother transition to wthe eb. This would ensure that users don’t have to log in twice for one interaction.
• Test responsive navigation: Test navigational paradigms and find a better methodology for mobile apps.

Architecture

Disparate frontend technologies made it difficult for the firm’s developers to share design resources, standards, and code (components). Additionally, duplication of effort slowed the pace of delivering new features and products.

Therefore, the team suggested moving from native coding in mobile to Ionic or React Native for faster development, a unified experience, and easier integration with the website.

The firm used Ruby on Rails repository “Frontend,” which provided both backend and frontend services in a single process. There are many advantages to monoliths, but they can be more difficult to test and scale. Even if one feature fails, the entire application fails rather than just the feature, unlike a microservices-based application.

The team suggested a strategic goal to refactor the API interfaces into microservices, which would provide greater flexibility in release cycles and CI/CD isolation.

Proposed technology stack architecture for the client

Over time, these API services could be implemented using NodeJS-based services. In the end, in addition to performance considerations, the financial firm would have only one technology stack serving all customer-facing apps – JavaScript.

Modernizing the process

The financial firm was already in the middle of an agile transformation. They had introduced two-week sprints and dedicated product managers for different feature lanes.

However, the agile transformation had also created a few problems. There were blind spots for the organization’s middle management that contributed to misalignment on feature prioritization. The firm was also spending excessive time in meetings to prioritize requests from different departments.

The team suggested addressing specific pain points in the collaboration workflow to help with application modernization:

• Running alignment workshops to determine the key initiatives and objectives of each feature lane.
• Effective utilization of existing tracking tools: Pivotal Tracker and Trello, so that they aren’t operating independently of each other.
• Reducing dependence on other organizational units that didn’t follow similar Agile workflows.

The most important factor of all: people

Simplifying the tech stack of the client-facing applications meant introducing new tools and frameworks. To ease the client’s transition into a new way of working, it was important to have a plan in place to upskill and coach the existing employees.

An important reason behind suggesting Angular as a web development framework was that the Kiosk app team was proficient in it. This would allow the Kiosk team to coach others in Angular. The front-end teams within the Rails app could easily adopt Angular as their tool for creating views. More importantly, this would foster a culture of cross-functional learning at the firm.

The firm was also understaffed in areas such as engineering and QA. The team’s proposed solution of a unified tech stack would help the firm fill open positions faster. It’s much easier to hire for one job description instead of six.

Results of application modernization

The assessment concluded with an actionable plan for front-end simplification. This provided the financial firm with clear next steps and priorities to implement the assessment recommendations.

Front-end app simplification roadmap

Due to application modernization, any developer at the firm can now work on any of the customer-facing applications. This encourages cross-functional collaboration, knowledge sharing, and significantly reduces total development costs.

QA testers now only have to focus on one technology stack. They can consolidate unit and end-to-end testing and reuse them across all platforms (web, mobile, kiosk)

The recruitment team only has to focus on recruiting one type of developer. They benefit from the abundance of candidates due to the extreme popularity of JavaScript. Reducing the need to hire costly specialized skill sets also decreases overall recruitment costs.

Higher popularity of Node.js means more candidates for the new tech stack

As an official partner to Ionic, Atlassian, GitHub, and other leaders in the tech space, Modus Create offers end-to-end application modernization expertise. At the end of this modernization engagement, our client was left with an actionable plan to accelerate their digital journey.

Struggling with legacy systems? Learn how our legacy system modernization approach can help you scale and innovate faster.