For nearly two years, I have been a part of the UX/UI team, which consists of four designers and two front-end developers. We have been working on a B2B application that involves approximately 100 people, including designers, developers, product owners, process experts, and scrum masters.

The project is a highly intricate agile one that is constantly evolving. The company that owns the application has just introduced a Design System. We have been tasked with finding a way to integrate this design system into the portal.

Design systems, especially for large companies, have great value and can lead to cross-platform consistency that would otherwise be difficult to achieve. But what happens when we have to transition a web application with 6 years of development behind it and countless flows created with a completely different library?

The key points to consider are as follows:

After conducting various analyses and considering different proposals, it has been determined that the best course of action is to replace all the components, page by page. Sometimes this will require redesigning the pages due to outdated components or design patterns. As a result, there is a need to transition in small steps and to begin using the new library for new sections. This will prevent wasting resources on parts of the portal that are already outdated.

However, as things currently stand, this would lead to what we have called the “Frankenstein effect”. Therefore, having a portal with outdated graphics and a few new-looking pages.

It took several months of analysis and collaboration with both the business and the developers to gain this understanding. We focused on identifying important issues, potential bottlenecks, and areas that needed attention. We also acted as mediators between different project stakeholders to ensure that we fully comprehended the development challenges and could propose practical solutions that aligned with the business goals.

So we asked ourselves how we could avoid or limit this obvious visual misalignment, without impacting the various teams already overloaded with activities.

The proposal, which was later approved by the client, involved restyling the current library to closely match the design system. We focused on updating the CSS for 80% of the components while keeping the integration logic unchanged. A full extreme make-over project!

Completing this task was quite complex because we encountered a pre-existing library that had been built over the years with different variants added from time to time. These variants often didn’t directly match the UI Kit that designers had on Figma.

It became clear that collaboration between design and development was crucial for implementing the necessary style changes.

The experiment was a complete success, and both the front-end developers and I were satisfied with the work we did together. 🚀

Managing the delivery of this project taught me a lot, both technically and in terms of communication.

I want to share 7 important lessons that I learned, hoping they can be useful to designers who sometimes struggle with development, to work better and more peacefully!