Case Study: Transforming a Legacy System with Modern UI

The Challenge

Northern Trust Financial Services approached SkinsVMonkey with a complex challenge: their wealth management platform, a critical system serving thousands of clients and managing billions in assets, was built on a stable but aging architecture developed in the early 2000s. While the underlying functionality was robust and reliable, the user interface was outdated, making the system increasingly difficult to use compared to more modern competitors.

The client faced several specific challenges:

• Preservation of core functionality: The back-end systems contained complex business logic refined over many years that could not be risked in a complete rebuild.
• Minimal disruption: With thousands of daily users, any transition needed to be smooth with minimal learning curve.
• Regulatory compliance: As a financial institution, all aspects of the system needed to maintain strict compliance with industry regulations.
• Performance requirements: The new interface needed to maintain or improve performance despite adding modern features.
• Integration with legacy APIs: The modernized front-end needed to work seamlessly with existing back-end services and data structures.

Our Approach

Rather than attempting a risky "rip and replace" strategy, we proposed a methodical, phased approach that would modernize the user experience while preserving the stable core functionality. Our strategy included:

1. Comprehensive Research and Analysis

We began with a thorough analysis of the existing system, including:

• Interviews with 45 users across different roles and experience levels
• Observation sessions with power users to understand workflows
• Audit of existing documentation and training materials
• Technical assessment of the interface architecture and back-end integration points
• Competitive analysis of modern financial platforms

This research phase revealed that users had developed numerous workarounds for interface limitations and that certain core workflows could be dramatically streamlined without changing underlying functionality.

2. Collaborative Design Process

We implemented a highly collaborative design process that included:

• Creation of a design system that balanced modern aesthetics with familiarity for existing users
• Regular workshops with stakeholders to validate design directions
• Progressive wireframing and prototyping of key user journeys
• Usability testing with both experienced and new users
• Accessibility reviews to ensure WCAG 2.1 AA compliance

3. Technical Implementation Strategy

The technical implementation was carefully planned to minimize risk:

• Development of a modern front-end layer that communicated with existing APIs
• Creation of adapter services where needed to transform data between new UI expectations and legacy formats
• Implementation of feature flags to allow gradual rollout and easy rollback if needed
• Comprehensive automated testing suite to ensure functionality parity
• Performance optimization to ensure the new interface maintained or improved system responsiveness

4. Phased Rollout and Transition

To minimize disruption, we developed a phased rollout strategy:

• Initial deployment to a pilot group of power users who could provide detailed feedback
• Sequential release of modernized modules, beginning with less critical functions
• Dual-running period where users could switch between old and new interfaces
• Comprehensive training materials, including interactive guides and context-sensitive help
• Dedicated support team during transition phases to quickly address any issues

The Solution

The modernized interface maintained all the core functionality of the original system while introducing significant improvements:

Key aspects of the modernized interface included:

Information Architecture Overhaul

We reorganized the navigation and information structure to reflect how users actually worked with the system, rather than how the data was structured in the back end. This involved:

• Reducing navigation depth from up to 6 levels to a maximum of 3
• Implementing a task-based organization rather than a module-based one
• Creating contextual workspaces that grouped related functionality
• Adding breadcrumb navigation and persistent context indicators

Workflow Optimization

Without changing the underlying business logic, we streamlined common workflows:

• Reducing the number of clicks required for frequent tasks by an average of 62%
• Implementing batch operations for tasks previously requiring repetitive actions
• Adding contextual tools that appeared when relevant
• Creating "quick actions" for common operations

Modern Visual Design

The visual design was completely refreshed while maintaining brand consistency:

• Implementation of a clean, light interface with optional dark mode
• Improved typography for better readability of financial data
• Thoughtful use of color to highlight important information and status indicators
• Consistent, accessible controls and interaction patterns
• Subtle animations to provide feedback and guide attention

The Results

The project was completed on schedule and within budget, with the final phase deployed 8 months after the initial engagement. The results exceeded expectations across multiple metrics:

Other significant outcomes included:

• Improved client satisfaction: Financial advisors reported more positive client interactions when using the system during meetings.
• Reduced errors: The clearer interface and improved validation reduced data entry errors by 32%.
• Competitive advantage: The modernized platform became a selling point in client acquisition.
• Extended system lifespan: The successful UI modernization extended the projected lifespan of the core system by an estimated 5-7 years, avoiding a much costlier complete rebuild.

"The SkinsVMonkey team found the perfect balance between modernization and familiarity. Our experienced users were able to transition smoothly while new team members now require significantly less training. The system not only looks contemporary but actually helps our advisors work more efficiently."

— Rachel Morris, Chief Digital Officer, Northern Trust Financial Services

Key Learnings

This project reinforced several important principles for legacy system modernization:

1. Respect the existing workflow knowledge. Long-time users have developed significant muscle memory and system knowledge that should be leveraged rather than discarded.
2. Focus on incremental value. By prioritizing improvements based on frequency of use and impact, we were able to deliver significant benefits early in the project.
3. Maintain a consistent feedback loop. Regular user testing throughout the process ensured we were solving real problems rather than assumed ones.
4. Balance innovation with familiarity. The most successful aspects of the redesign introduced modern patterns while maintaining conceptual links to the original system.
5. Technical and design collaboration is essential. Close coordination between UI designers and developers who understood the legacy system constraints led to solutions that were both innovative and implementable.

Conclusion

The Northern Trust Financial Services case demonstrates that with the right approach, legacy systems with valuable core functionality can be successfully modernized through thoughtful UI redesign. By focusing on user needs, maintaining system stability, and implementing a phased transition strategy, we were able to deliver significant improvements while minimizing risk and disruption.

This project exemplifies SkinsVMonkey's approach to complex interface challenges: combining deep user research, collaborative design processes, and technical expertise to deliver solutions that balance innovation with practicality.