Nutrien Ag Solutions
Bonsai : A Design System
ROLE:
Design Systems Lead
CONTRIBUTIONS:
UX/UI design, Prototyping, Design direction, Evangelism
DURATION:
16 months
PLATFORMS:
iOS & Android, Responsive mobile / desktop
OVERVIEW:
Bonsai is a multi-platform design system created to address tech and design debt within Nutrien Ag Solutions.
By streamlining processes for iOS, Android, and web apps, the "design-once, deploy-anywhere" approach reduced development costs and improved consistency across platforms.
As the lead designer, I directed UX/UI efforts, prototyping, and design strategy, contributing to increased UX maturity within the organization.
Context -
About Nutrien Ag Solutions
The digital evolution of agriculture is here.
Nutrien Ag Solutions is at the forefront of
precision agriculture.
Opperating in: US • CANADA • ARGENTINA • AUSTRALIA • BRAZIL • CHILE • URUGUAY
Dominant use case -
Because growers and crop consultants are often out in the field, a tablet is the go-to device.
Bonsai ~ A Design System.
Serving Nutrien Digital Hub - a suite of applications supporting growers and crop consultants.
Problem
Restructuring the Debt: We’re dealing with “tech debt” and “design debt”—the gaps between how features were originally built and how they’ve evolved. For Nutrien’s Version 1 (V1), it was a mess of one-offs, workarounds, and inconsistencies.
Changing the app’s primary color? That meant a marathon of code changes, maybe even a full audit, for a simple tweak.
The design side was no better. Even minor updates required a massive effort across all designs and prototypes.
The team felt stuck, unable to iterate or scale. A design system reboot was clearly needed.
Opportunities
Recommit our design and development process to be component-driven.
Approach the design and development of our components using an Atomic methodology.
Ensure our design and coded components are linked to their corresponding single sources of truth.
Bonus: Through branding and the creation of a central destination – a design team website – raise the organization’s level of UX design maturity .
Bonsai Team
1 project manager
1 design lead <- My Role
2 UX/UI designers
1 website designer
6 developers
My Activities
UX/UI design
prototyping
design direction
evangelism
The process.
To make a cohesive system where design informs development and development informs design, the two camps needed to work in tandem.
Modernize our tooling
This moment provided an excellent opportunity to evaluate our processes. The design team streamlined their design stack from more than four tools to one - Figma, which handles design, prototyping, file management, and version control.
Simultaneously, the development team made the daring-but-wise move away from 3 codebases to 1 – React Native, which in turn ports to iOS, Android, and desktop. Learn once, write everywhere is React Native's motto.
2. Branding
the dark approach
…or go light?
3. Conducting Research
Scoping. I started by communicating with stakeholders the value and mission of our design system ambitions. Simultaneously, I worked closely with product management to pinpoint what it would take to run a dedicated design system team (which would include developers, designers, and project management). Finally, I presented our findings and won support from upper management.
Discovery. A great design system puts users first, so we dove deep to understand the needs of everyone who might interact with it. Through journey mapping, surveys, and user interviews, we uncovered a key insight: when users visit a design system’s documentation, they’re on a mission to find specific information about a component and get back to work—fast. They’re not here for a long read, but they do want all the details at their fingertips. The challenge? Crafting documentation that is both scannable and comprehensive, providing just the right amount of detail without overwhelming the reader.
Comparative Analysis. Amongst the many existing design systems, we systematically compared similarities and differences to identify features that addressed our specific needs. We also reviewed the cost-benefits of different DS tools such as Pattern Lab and Bit. We methodically pulled the best ideas from various sources to support our unique needs.
4. Structure
To accommodate the needs of growers and crop consultants, A product like Nutrien Digital Hub is constantly evolving, so the underlying design system needs to evolve too. Enter Bonsai, Nutrien's latest design system, aiming to manage the creative and development process at scale.
3 Part Harmony. There are three distinctive elements that make up Bonsai:
Bonsai UI Kit - the components designed and managed in Figma.
Bonsai Code Kit - the coded elements. These are functioning components that match the Figma designs. We use StorybookJS to host and organize them.
The documentation website - the central hub, the one-stop-shop for all things component related.
5. Adopting an Atomic approach to component design and development
“Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.”
– Brad Frost
Communicating the Value:
By putting a spin on Brad Frost’s Atomic Design methodology, I’ve found a compelling way to explain what a design system is. To aid this conversation, I created the graphic above, which introduces an underlying grid to the analogy. This visual emphasizes that digital UI components, like atoms in the physical world, can be organized into a hierarchy to build more complex “organisms.” The graphic showcases the modularity and flexibility of a design system, demonstrating how it can be deconstructed into smaller, reusable pieces that can be easily rearranged to create new designs.
Atoms
Typography
Icons
Color
Molecules
Buttons, Chips, Snackbars, and More
Inputs, Select Menus, Cards, and More
Organisms
Templates
A design system is a centralized collection of design and code decisions.
Before these decisions are commited to Bonsia, they are prototyped and validated with user testing.
Prototype Examples: Mobile Interaction
Task
Progression.
Bottom sheets on mobile are most often used to represent what are dropdown menus on desktop. As well, they can be used for other tasks and actions, affording the user context as they progress beyond the parent screen.
The above example is a bottom sheet combined with a drawer.
Nested
Information.
An accordion allows the user to toggle the display of sectional content.
Use an accordion when:
You have a list of related topics having further details or nested content.
It’s ideal to keep the user in the same view as they explore nested information.
The nested content is concise.
Narrow
Down Choices.
Filtering and sorting help users navigate through many options or a volume of information. By allowing the user to narrow down items to a manageable number, they quickly and confidently make selections. These affordances create a positive feeling of control and choice, even in the face of overwhelming options.
Documentation -
Because it helps refine the system's intricacies, writing the documentation is almost as important as the final result.
See it in action: www.nutrien.design
Wider Opportunities -
A design system provides an opening to raise the organization’s level of UX design maturity and bring UX design to the forefront of an organization’s consciousness.
“Systems run the business and people run the systems.”
- Michael E. Gerber
Product
Bonsai -Nutrien Ag Solution’s Design System. See it here: www.nutrien.design
Role
Design System Team Lead
Achievements
Bonsai UI Kit: A comprehensive set of components designed and managed in Figma, featuring variants and interactive elements.
Bonsai Code Kit: The coded counterparts—functioning components that perfectly align with the Figma designs.
Documentation Website: The central hub and one-stop shop for everything related to components, providing easy access to all the information you need.
Activities
UX/UI design
prototyping
design direction
evangelism
Status
In active development