Case Study Revamping a CPQ legacy applicationChallengeA giant network security company was still using the legacy application for their B2B e-commerce platform. The legacy applications were created on top of the Salesforce CPQ platform by dev engineers with a developer's mindset, and this presents a challenge. It was necessary to completely rethink the application with a user-centric approach. SolutionWhen the high-fidelity design iterations are complete, we are looking to solve four major problems. The Art of the Possible, made real
Putting some of the design thinking excellence displayed as art of possible into working prototype, demonstrable front-end components. This aided in bringing what was envisioned to life, and it was put to the test in a variety of settings. The most important aspect is that the client's core development team did not get derailed from their regular schedule or lose focus on their deliverables. Updating the legacy applications
The client already had a legacy app that had been developed over the previous 20+ years. It was not possible to rebuild the same thing from scratch. Actually, this was a gaint blocker. To make use of the legacy code already in place, we must plan our strategy. The problem is that legacy code has many hardcoded dependencies linked to business logic and a lot of technical debt. The plan was for the development team to take the front end layer we built and plug it into their business logic layer. Since this should be built upon their existing code base, only a min code changes should be necessary.
We began by comprehending the layers of front-end code and creating a list of technical debt that the client's core development team needed to address. The core development team was advised on how to remove those dependencies and resolve them.
We couldn't get full access to the client's code because of agreement problems on their end, so as a workaround, we began by analysing their Web interface. based on extracting their front end code. This provided us with our team's foundation with no core team dependency. We converted the hero pages and scenarios based on our sprint cycles. Snapshot testing was done to make sure we are delivering pixel-perfect pages. The development team was able to incorporate the front-end components into their code with the help of our documentation. Given that we constructed it on top of their existing code, the core development team found it incredibly easy to integrate our work. Component Library
Different teams had developed separate "tracks" or "tools" for the legacy app, each of which had its own unique design philosophy, code implementation, and organisational scheme based on its intended use case. There were over 200 screens and interactions per app, and we were evaluating 10+ apps at once, making this a nearly impossible task. Furthermore, we were under a strict time constraint. Everyone's goal was to wrap up in the current quarter. In general, it was very difficult and under a lot of pressure. We need to look into the reusability of code and components, We have begun development on the shared Components Lib that can be used across Echo screens to provide a consistent user experience. The overall integration process ran more smoothly thanks to the components. It's beneficial for the team as a whole because it decreases their reliance on any one individual to complete the task.
It also simplified the maintenance and update processes, which aided in reducing time to market. Implementation on multiple tracks
Integrating a common style guide across all tracks proved challenging because the client app was split into multiple subapps, each hosted on its own server. We helped them create a centralised style guide and content delivery network (CDN) to make it easier to make changes once and have them take effect everywhere. Success FactorsThe migration from the old interfaces to the new ones was completed without a hitch for all legacy applications. - At the core development team's end, the art of the possible is brought to life with actual implementation.
- All legacy apps were merged under a single umbrella.
- Unified User Interface and design standards across all of our modules.
- Common Component Library that can be reused across all tracks
| 
