top of page

Basin 

Company

Stantec

My Role

Lead, UI/UX, Design Thinking

Team

Design

Leading and maintaining a comprehensive design system and component library.

In response to evolving design practices and technology, one of my primary responsibilities at Stantec was to build and maintain its design system on Figma, elevating it into a robust and mature library for both designers and developers to use.

A few things I took into great consideration while building Basin:

  • Maintain consistency within fine details

  • Produce highly responsive components

  • Highlight best practices and modernity 

 

The design system is well-documented with detailed specs and instruction, which helps streamline collaboration between designers and developers, and allows teams to effectively build products.

Colors.png

A playground for components

Many of Basin's components come in different styles and states. To make it easy for designers and developers to navigate through every option, I utilized Figma's variants, boolean, and text properties to turn each complex item into a simple-to-use element. 

Responsiveness is key!

Nightmare happens when you try to resize a component but everything within starts to break. To prevent that from happening, I made sure that all components in Basin (including 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!

Charts.png

Designing components with our users in mind

Catering the design system to our users is what makes our products stand out. Through understanding user behaviour and needs, I was able to iterate on standard components like the navigation bar to elevate the user experience. 

v2.0

Navigation Bar v1.png

v2.1

Navigation Bar_v2.png

v2.2

Nav Bar v4.png

What changed?

We kept things simple to start and made improvements one step at a time. From updating the general look and feel to adding functional features, the latest Stantec navigation bar looks spotless and contains all the elements needed to navigate seamlessly across places, minimizing the number of clicks back and forth.

I've also ensured that the texts in each menu item meet our accessibility standards - something that we strive to enhance over time.

Extensive documentation and instruction for both designers and developers

Don't we all love when a guidebook is well-organized and descriptive? The way we establish our visual language is very important. With good communication and documentation, I minimized as much confusion as possible with the developers.

To go from design to development to deployment, I worked closely with the Basin development team to QA each component in detail, ensuring that all items align with our visual language and standards.

Pickers.png
Toasts.png

What's next for Basin?

The future of Basin is limitless. Through consistent upgrades and iterations in both a user and technical standpoint, I am confident in bringing solid foundation to Stantec's design system. 

Previous

Next

bottom of page