Without a component library, we needed to spend a lot of time reviewing and correcting inconsistencies in designs so they were cohesive.
Without one place to track the final solutions, decisions were lost in team chat threads.
A design system would help us produce design work faster and more efficiently. The UX Lead and I researched the available open source options, and the team selected Chakra's React library as our base system for development.
I cross-referenced the Chakra React library to build out a Figma design system library. I structured the system using atomic design principles, with Theme elements (e.g. color, typography, grids) and Component elements (e.g. atoms, molecules, organisms).
The engineering team prioritized code documentation, positive reviews from other engineers, and flexibility in customization. The design team prioritized visual maturity, active maintenance, and a robust existing Figma resource. We landed on Chakra as the best solution for both design and engineering.
As we introduced new features, we needed to continue to update the design system. The UX Lead and I worked together to tend the design system as we added new features to the Threshold financial dashboard. We settled on a sprint schedule to coordinate our efforts.
Using the design system helped us to create new features much faster. It also helped us provide visually consistent designs to the engineering team that aligned with the React library.
When new design hires joined the team, they benefited from the documentation and could quickly get up to speed. You can see a few screens from the product below in both dark and light modes.
A core value of our team at Threshold was transparency. We often contributed to research and design efforts in the web3 space.
I published Threshold's web3 design documentation and components to GitHub as an open source design system so that other teams could either use it for reference or fork it for use in their own projects.
View Design System
