Case Study: From Legacy Code to Modern UX: Overhauling 50+ Apps for a Logistics Powerhouse

Clear Function partnered with a global logistics leader to modernize their complex Transportation Management System (TMS). With over 50 interconnected legacy apps running on outdated technologies, their system was fragmented and difficult to maintain. We completely overhauled their system, upgrading three core applications, enhancing the user experience, and unifying the look and functionality of every sub-app.

Through a phased approach, Clear Function implemented a cohesive, mobile-first design that streamlined the TMS system, improved compatibility, and met the client’s goals for a robust, user-friendly platform without interrupting service for their customers.

Our client is a global logistics company whose teams rely on a Transportation Management System (TMS).

At the core of their operations was a fragmented TMS system—a portal-like app linking over 50 “sub” apps. With a blend of technologies spanning from Classic ASP (v1) to ASP.NET (v2) webforms and a few ASP.NET MVC/Angular hybrid builds, their system had become a patchwork of outdated software that needed an upgrade. The company sought Clear Function’s expertise to unify these disparate systems, upgrade the UI/UX, and provide a cohesive product and technology roadmap that would minimize downtime and disruption.

As a global logistics company, they needed a sophisticated, responsive system to meet the demands of their client base. A seamless, modern UX was critical to improve customer experience and support their goals and growth.

Clear Function’s approach involved four strategic phases to transform the TMS system into a modern, user-friendly platform.

Phase 1: UI/UX Overhaul without Code Disruption

To give the TMS system a fresh look without a full rewrite, Clear Function updated the client’s TMS interface with a modern “skin.” We migrated from an outdated control vendor to a mobile-first solution that optimized functionality across today’s browsers. Alongside a trusted design partner, our team executed CSS changes across each application to ensure a cohesive, updated user experience.

Phase 2: Modernized Navigation System

Next, we implemented a new, intuitive menu navigation system in Angular.js, harmonizing the user experience across the TMS suite. By working closely with the design team, we transformed the navigation, aligning it with the latest UI/UX principles to make the system faster and more user-friendly.

Phase 3: A New Landing Page and Dashboard

With the navigation in place, we built a new landing page and dashboard in Angular.js to give users a single, purposeful starting point. Working from the design team’s direction, we paired a favorite-apps feature — letting each user keep the sub-apps they rely on most within immediate reach — with four KPI widgets that surface key numbers the moment someone logs into the TMS.

Phase 4: Rewriting Apps with Angular.js

Our engineers then tackled rewriting key applications in Angular.js to improve their responsiveness and functionality. We executed this rewrite across multiple apps, ensuring each was ready for seamless integration within the TMS.

For logistics experts unfamiliar with TMS jargon, here’s the bottom line: Clear Function delivered a completely reimagined, user-centered TMS experience. Our team’s expertise in transitioning legacy systems allowed us to rewrite three major apps, refresh the UI/UX of over 50 sub-apps, and ensure compatibility across devices—all while minimizing disruption for the client’s users.

This project underscored Clear Function’s commitment to sustainable, client-focused solutions. We integrated new technologies into legacy code, retrofitted 50+ existing apps with modern UX/UI, and unified the system to support our client’s operational needs while improving their client experience.

The client’s verdict? Thrilled with the outcome.