Banyan Infrastructure

01. Testimonial

Our designer continues to think through ways to push our design system to such high quality, exceeding our hopes and teaching new possibilities. They are curious to learn, excited about ideas wherever they come from, collaborate well with each designer, and have a keen eye for detail and design sensibility.

The Challenge

Banyan Infrastructure is an end-to-end software platform, built to simplify, scale, and streamline sustainable infrastructure finance.  It empowers banks, lenders, and developers to accelerate deal transactions, optimize portfolio outcomes, and maximize liquidity, all while promoting sustainable climate solutions.

Customer Challenge

Banyan Infrastructure faced the challenge of needing a comprehensive design system for their rapidly expanding platform but lacked the capacity to tackle the project internally due to more urgent priorities. To address this, they decided to outsource the project to our design agency. We were given a tight deadline of three months to develop an entire design system that would ensure consistency, scalability, and alignment with Banyan's unique identity and goals.

What is an
Atomic Design?

Atomic design is a structured approach to product design that organizes components into a hierarchical system based on their complexity. Introduced by Brad Frost, this method includes six levels: tokens, atoms, molecules, organisms, templates, and pages. The idea is that any alteration at one level influences all subsequent levels.

Tokens

Tokens are the most fundamental units in design, representing core values such as colors, fonts, spacing, and other properties. They serve as the building blocks that ensure consistency across a design system. These tokens are context-independent and named to convey a shared semantic meaning within a group of items.

Our Process

We kicked off by breaking the UI down into smaller, reusable pieces using atomic design. The big task was making sure everything still felt consistent while allowing Banyan Infrastructure to maintain its unique identity. Atomic design made the development simpler and let us create unique styles. We made components that Banyan can easily adjust, combining simplicity with a personal touch to support sustainable infrastructure finance.

Typography

To create Banyan's design system, the Material Design method served as an inspiration, categorizing fonts into body, label, title, headline, and display. This structured approach ensured consistency and clarity across the platform. Approximately 5-6 sizes were added in each category, making the typography highly scalable to meet Banyan's diverse needs.

Colors

The existing color palette for Banyan Infrastructure was refined, organizing an excess of blue shades into a cohesive system. During this process, it was identified that a broader range of semantic colors was needed, and the design system was lacking two additional accent colors specifically for data visualization. Furthermore, all data colors were carefully tested to ensure they passed color blindness accessibility standards.

Navigation

Seamless and streamlined navigation across Banyan's four applications is quite important to ensure an interconnected experience, so a 4-level tabbing system was essential. As designers, we created a solution that was both functional and visually appealing. This system clarified the hierarchy, making the overall user experience much smoother and more intuitive.