Responsive website design displayed on phone, tablet, and desktop screens for FBN Finance offering agricultural lending solutions.

Farmers Business Network (FBN) is a farmer-to-farmer network evolving into a one-stop e-commerce platform for farming needs.

I modernized FBN's design system by aligning Figma libraries with the latest React (MUI) standards, refining foundational elements, and streamlining workflows. Through documentation, mentorship, and cross-functional collaboration, I increased adoption and improved design-to-production efficiency, creating a more cohesive and scalable product experience.

Role: Design System Manager
Years: 2022-2023

Driving Systems Adoption & Streamlining Production at FBN

4x Increase in Design System Adoption

From 20% to 80% across 14 projects in under 10 months

Centralized & Scalable System

Unified library management with a direct pipeline to engineering

Just-in-Time Documentation

Built a streamlined resource for adoption and efficiency

Company-Wide Buy-In

Secured support from engineers, PMs, and leadership

Pattern of nine yellow plus signs on black background

Building the Figma Libraries

To ensure consistency and scalability, I began with a comprehensive UI audit, identifying high-priority components based on their usage and future demand across the product. I collaborated closely with engineers to align design and code. Each component was designed to be modular and adaptable for a variety of use cases.

Enhancing Efficiency

I established guidelines and benchmarks for organizing Figma files, ensuring consistency and reducing confusion for engineers.

To drive adoption, we created comprehensive documentation covering system principles, workflows, best practices, and accessibility. Components were linked to live Storybook versions for seamless integration.

I implemented Zeroheight for Figma integration, making updates effortless and providing a central hub for styles, token names, and specifications.

Fostering Collaboration and Team Growth

I mentored the design team through regular meetings, tutorials, and a dedicated Slack channel, focusing on advanced Figma techniques like auto-layout and prototyping. To foster collaboration, I held syncs with engineering to address challenges and improve design library usage. Updates were communicated clearly via Slack, email, and detailed changelogs in Zeroheight, ensuring transparency and alignment across teams.

List of communication and collaboration methods: Team Design Review, 1:1 Meetings, Office Hours, Slack Channel, Asynchronous Comms & Tutorials, Impromptu Meetings, with rocket icon at the top.

Results

As Design System Manager at FBN, I significantly enhanced the design system, ensuring consistent and seamless user experiences across digital platforms. My efforts drove system adoption and improved cross-functional collaboration through guidance, training, and documentation.