Basin Design System
A design, component, and class library built for Stantec products.
My Role: Design Strategy, UI
Team: Design Team
Tools: Figma
The Brief
Taking the lead
As technology keeps evolving, one of my first tasks as a UX/UI designer at Stantec was to bring their design system from Adobe XD over to Figma.
Consistency across designs is so important. As Stantec's innovation team begins to expand, my goal not only is to migrate the design system from one platform to another, but to also ensure that each component is organized and structured in a way that can be used by anyone effectively with ease.
Since then, I've become the leader for Basin, working alongside designers and developers to deliver high quality design components.
Components & Variants
A playground for components
With icon or no icon? Icon on the left or right? Small or large?
Many of Basin's components come in different styles and states. An example would be its buttons. To make it easier for designers and developers to navigate through all these options, I utilized Figma's component properties to turn each complex item into a single simple element.
Scalability
Responsiveness is key
Nightmare happens when you try to resize a component but everything within starts to break. Well, to prevent that from happening, I made sure that most components (including these advanced charts!) are all scalable and responsive.
What does that mean? It means no matter what height or width you adjust the component to, the contents inside will stay fit!
