Nutrien Ag Solutions –

Bonsai. A Design System.

Serving Nutrien Digital Hub - a suite of applications supporting growers and crop consultants.

Problem

Restructuring the Debt: We’re talking “tech debt” and “design debt” — the gaps between how an app’s features were originally built and how they’ve been coded and designed over time. For Nutrien, Version 1 (V1) was a patchwork of one-offs, workarounds, and inconsistencies that were anything but easy to fix.

Changing the app’s primary color from green to purple? Prepare for a marathon of code changes, possibly even a full software audit, just to pull off a simple global tweak.

The design side wasn’t any prettier. Our V1 design system was so tangled that even a tiny design update required an exhausting amount of work across the team’s designs and prototypes. A small change meant a whole lot of hassle.

The whole product team felt stifled, unable to iterate or scale efficiently. It was time for a design system reboot.

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.
Provide the entire product team visibility into the various building blocks that go into making the rest of the product, i.e. provide a documentation website.
Bonus: Through branding and the creation of a central destination – a design team website – raise the organization’s level of UX design maturity and bring UX design to the forefront of the larger organization’s consciousness.

Bonsai Team
1 project manager
1 UX/UI design lead <- My Role
1 to 2 UX/UI designers
1 website designer
6 developers

Activities

UX/UI design
prototyping
design direction
evangelism

About Nutrien Digital Hub –

The digital evolution of agriculture is here.
Nutrien Ag Solutions is at the forefront of
precision agriculture.

Dominant use case -

Because growers and crop consultants are often out in the field, a tablet is the go-to device.

Enter Bonsai.

Because it accommodates the needs of large-scale farmers and the crop consultants who advise them, a product like Nutrien Digital Hub must constantly evolve, so the underlying design system needs to evolve too.

Thus, the design team and I set out to create “Bonsai” - a comprehensive collection of components, patterns and templates serving developers, designers, and the greater product team.

3 Part Harmony. I proposed three distinctive elements to 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.

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. I helped the design team streamline the design stack from more than four tools down 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. 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 functional design system is highly user-centric, so I set out to uncover the actual needs of each one who would potentially interact with the design system; this involved user interviews and journey mapping. A significant discovery was the need for a tight relationship between our designed components and their corresponding coded components.

Comparative Analysis. Amongst the many existing design systems, I systematically compared similarities and differences to identify features that addressed our specific needs. I also reviewed the cost-benefits of different DS tools such as Pattern Lab and Bit. I methodically pulled the best ideas from various sources to support our unique needs.

3. 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 customizing Brad Frost's Atomic Design methodology, I have been able to effectively communicate what a design system is. To facilitate this conversation, I created the above graphic that adds an underlying grid to the analogy. This approach emphasizes that digital UI components, much like atomic units in the physical world, can be arranged in a hierarchy to form more complex "organisms." By incorporating this analogy, the graphic illustrates the modularity and flexibility of a design system, highlighting how it can be broken down into smaller, reusable components that can be easily arranged 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.

For Bonsai, these decisions are arrived at through prototyping and validated with user testing.

Prototype examples I created for the documentation site.

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. To really refine consistency, I found myself tweaking design components based on the documentation.

See it in action: www.nutrien .design

Wider Opportunities -

My side-mission and hope was that Bonsai would provide opening to raise the organization’s level of UX design maturity and bring UX design to the forefront of Nutrien’s greater 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

For

Nutrien Ag Solution

Achievements

Bonsai UI Kit - the components designed and managed in Figma that include:
+ variants
+ interactive components
Bonsai Code Kit - the coded elements. These are functioning components that match the Figma designs
The documentation website - the central hub, the one-stop-shop for all things component related.