Making way for design system and accessibility
While working on these design projects, we occasionally ran into the issue of managing assets and design files. One major issue was that same components were not consistent in the design source files. Similar problem co-existed within the dev team too where each new UI developer would re-code the components. This resulted in the designs not only looking different from production but similar components looked different on different pages.
As a solution to the problem, we introduced a component library which helped in maintaining a level on consistency within the design team. But development inconsistency was still a problem. As we transitioned our web technology from angular to react, it gave us an opportunity to set up the design system that can be used by everyone as a single source of truth. Hence, the birth of,
OCTANE - Design System by SavvyMoney
Though the designs system is still under works, the success of the system lies in the fact that early on dev team recognized the value of the system as they added new UI developers to the projects. They were now seeing reduced development time. This not only helped in spreading awareness about the design system withing teams but get executive buy-in too. Easy!! ;)
Since SavvyMoney works directly with financial institutions, some of whom are ADA compliant, it has become implicit for SavvyMoney to be ADA compliant. The design system helped us in taking the first steps towards that. The components being built into the system follow the WCAG 2.0 guidelines with specific focus on color, contrast, target sizes and text guidelines.