at Leonteq I was responsible for designing and developing the 'Moneypenny' Vue JS design system for our internal and client-facing applications. The design was created in Figma from scratch and developed using Vue JS, SCSS, and TypeScript.
This project began nearly six years ago, shortly after I joined Leonteq. Before this, our applications were developed with minimal designer input, leading to challenges in front-end maintenance and a significant amount of unusable legacy code.
We started by identifying all the design debt across our applications. We compiled and dissected all the components created over the years. After understanding the extent of the debt, we proposed a new project to the management team. We convinced them that a unified design system would expedite development and facilitate code maintenance across our many applications. We then received approval to develop a unified design system to uphold our corporate identity and align with the marketing team's vision.
After creating the system's main components and defining numerous patterns, we started redesigning our internal app using it, which is still ongoing. This system has also been used to create many new projects.
The process of improving and updating the design is ongoing. The Design and Front-End teams are responsible for releasing new versions and updating all our front-ends accordingly.
A significant requirement for the site was that it needed to be incredibly fast for designers or developers to find a component. As such, we introduced a quick search feature accessible through the "/" hotkey, which brings up a search dialog from anywhere on the site.
The query entered in this search will display the results in a breadcrumb style, allowing users to quickly identify the primary and sub-sections to which the component belongs.
The site provides essential documentation for developers and designers to create front ends. There is a detailed section on component usage guidelines, and Figma embeds display component design files. This feature eases the designer's transition into Figma and conveniently displays documentation created in Figma on the webpage.
Lastly, it provides Vue JS Props, slots, events, and styles for the developer's easy reference. It also includes a live code editor playground for direct component adjustment in the browser.
