An aerospace company based in the United States launched a new analytics platform for tracking maintenance requests, predictive maintenance and reporting for airlines. The first iteration of this product used the aerospace company's already established design system for the UI. After its successful launch and the company's acquisition, the product owners wanted to give the product its own identity. The product library was created in Sketch before my involvement. When I joined the team, I used my Figma experience to migrate the Sketch files of the library over to Figma to better organize the growing library.
During this migration, I found many inconsistencies. There were no clear instructions on when and how to use the components, there were multiple instances of the same component and were all being linked throughout the product. This lead to more work when a components properties needed to be updated. It became a time consuming task to hunt down the instances in different files, removing and updating the links to the correct parent. I also wanted to utilize Figma's powerful features and set this system up to be more intuitive for future updates.
After conducting a quick audit of the interface, I decided to better organize the design files, create new instances and improve the documentation. I went through each instance, disconnected everything, made the updates, added their variants and removed any unused or incorrect component.
During the audit, I also noticed there seemed to be a disconnect between what was in the design system and what was in production. From there, I was able to make corrections on the front-end to the design elements on Storybook to correct the inconsistencies of the product and improve the experience for the user. My goal was to create a source of truth for all of the components.