Nutrien Product Redesign

Redesigning a digital customer experience platform with a design-led process to improve user adoption, engagement, and satisfaction.
Product Design
UX Design
UI Design
Design System

details

Duration

16 weeks

Role

Product design, UX design, UI design, product management

Team

UX Design Lead, Product Designer, Business Analysts, Frontend Developers, Product Manager, Technical Architects

Tools

Figma, Material Design, Material UI

project

Challenge

A merger left Nutrien running on two separate systems, leaving an outdated, chaotic, and fragmented user experience. Nutrien needed help creating a new foundation for a digital customer experience platform and enhancing the user experience.

Summary

Nutrien, a multi-billion company, collaborated with small teams from IBM iX and Xerris, to design a responsive digital customer experience platform.

The team created the first iteration of a new platform which unified two legacy systems, simplified workflows, and addressed user’s needs. This platform empowers customers to stay on top of their business with up-to-date information and self-serve tools, so they can focus on growing their business.

Contributions

As a Product Designer, I helped set the foundations to accelerate the design process. This includes creating the information architecture, envisioning a big picture wireframe, and co-leading a design system. I enhanced existing features, simplified processes with new features, and led initiatives to increase team productivity.

Overview

We leveraged user insights and a future-state vision from a digital customer experience strategy.
View project
We collaborated with sales, customer success, and stakeholders, who were sponsor users that worked with customers daily and represented their needs.

Approach

We approached this challenge in two phases:

Design: establishing foundations

Validate requirements

Understand user needs and legacy system features.

Define the information architecture

Build a sitemap with new roadmap and existing legacy system features.

Ideate with wireframes

Visualize the big-picture with design patterns, content, and navigation.

Refine designs

Establish design principles and a visual design approach.

Delivery: enhancing experiences

Explore ideas

Sketch and wireframe ideas to address user needs and tasks.

Build prototypes

Envision user flows with defined UI, interactions, and content design.

Evaluate feedback

Test sponsor users with guerrilla testing to determine task effectiveness.

RESULTS

We used a design-led approach to build a new digital customer experience platform, increasing adoption, engagement, satisfaction, and business efficiency. Customers can manage their account, orders, and shipments with more control, visibility, and flexibility.

Bringing a user-centric vision to life by unifying two legacy systems with 5+ features

Designing new visual standards with a design system adapted from Google Material Design to accelerate the design process and streamline development.

Continuous feedback generated business buy-in and user excitement

Designs shared with customers, sponsor users, and stakeholders were positively received, increasing anticipation for the product’s release.
View video

design
principles

Simple and clear

Deliver relevant information to users when they want it.
We improved information discoverability, providing users a high-level overview before exploring detailed information.

Flexible and tailored

Personalize the user experience, adapted to their needs.
With the ability to customize preferences, users can efficiently find and access the information they need.

Intuitive and seamless

Provide a consistent experience with easy navigation.
We created a design language so users can quickly learn and effectively complete their tasks.

design phase

Needs assessment

Gathering requirements

I helped the Business Analyst identify features for the Minimum Delightful Experience (MDE) vision by assessing legacy system features and roadmap initiatives from the digital customer experience strategy.
Our focus was creating a personalized platform where customers have on-the-go access to Nutrien’s services, including tracking orders, shipments, and inventory.
Based on legacy system usage metrics, we identified three top features to include for MDE:
  • Orders and shipments (32%)
  • Invoices (18%)
  • Account Status & receivables (10%)

Information architecture

Building a framework

To validate research insights from the digital customer experience strategy and assumptions from the legacy systems, I created two sitemaps for initial and subsequent MDE releases.
The sitemaps represented the customer-facing experience and a corresponding sales-facing experience.
We included features customers requested in the roadmap, frequently used in the legacy systems, and recommended by user sponsors for future releases.

Wireframes

Visualizing a blueprint

The sitemap enabled us to design interactive wireframes representing a big-picture vision for the new customer experience platform.
These artifacts were foundations for building a simple, tailored, and intuitive experience.
They became living documents and accelerated the creation of the design language, components, and feature design.

Visual design

Crafting reusable components

During the wireframing stage, we also crafted visual design concepts in parallel. For design inspiration, I created a mood board and led product naming brainstorm sessions, which became Nutrien Edge.
Using the new visual design approach, I co-led a Figma design system where:
  • We applied atomic design principles to create designs with high craftsmanship.
  • We defined repeatable design patterns to accelerate design updates and idea validation.
  • We streamlined development across all products by defining a consistent design language with reusable components.
  • We created components that were easy to maintain as the product evolved.
While working with sponsor users, I established clear and consistent content guidelines by consolidating terms across the legacy systems.
As we continued working on feature design, I helped track our progress to keep things organized.
I also coordinated with frontend developers by mapping component design progress with corresponding features, creating the design system by adapting the Material UI library, and setting up design system foundations on Storybook.
This expedited design system implementation, increasing efficiency when developing features.
Carrie can take a systematic approach to UX and UI design, champion best practices and educate the client. The efforts she put towards guiding the client to setup their design system was well appreciated by both the client and our team.

Carrie also took the initiative to go above and beyond basic client requests and suggested areas of consideration such as creating content guidelines, all of which contributed to the overall success of our project.

Huiwen Ji, Collaborator

Senior UX & UI Designer at IBM iX

delivery phase

Three pairs of product designers and business analysts concurrently worked on 10+ features, identifying design requirements, user tasks, and content
We obtained user insights and documents through sponsor user discussions, legacy system features, and the digital customer experience strategy.
We started designing wireframes to determine whether features could address users’ needs.
As feature design continued, we designed design system components to accelerate the creation of high-fidelity prototypes with interactive elements, system messages, and responsive behaviours.
We shared work-in-progress and design pattern ideas in daily team meetings, conducted guerrilla testing with sponsor users, and presented weekly product demos to stakeholders.
As the project progressed, we refined the MVP definition by improving designs, storytelling ability, and stakeholder feedback quality.

solution

Know who customers are

Problem: Customers frequently call to obtain account information from customer success over email or fax. This requires a lot of manual effort, as information is dispersed across multiple documents and outdated systems.
Customers need to stay on top of their business with a snapshot of their accounts to understand their orders, history, and invoices.
“Any information that we can get at our fingertips, at some point is going to be helpful. It may not be used every day, but there will be a time when we’ll need it. The more info we can get to, the better” - Product Manager

Know who customers are

Solution: As the invoicing design lead, I collaborated with sponsor users and the orders design lead to centralize frequently-used documents.
This enabled users like Andrew to manage budgets, identify trends, and update accounts with timely and accurate payments.
We also shared several features, including:
  • Access documents with robust search, sort, and filter options
  • Track new invoices and upcoming due dates
  • Browse orders and invoices with associated payments, deliveries, and documents

Keep customers informed

Problem: Customers lack up-to-date information on product inventory levels and feel left in the dark when delivery issues occur.
Customers want to run their operations smoothly by tracking their warehouse logistics and product orders.
“The more we can get automated and the more we have visibility to real-time inventory or inventory in transit, that’s probably where I see the opportunities.” - Product Inventory and Procurement Manager

Keep customers informed

Solution: As the warehouses design lead, I collaborated with cross-functional subject matter experts and stakeholders and designed solutions to ensure Nutrien keeps up with product demand and maintains adequate stock.
We helped users like Len maintain product inventory levels and track shipments across several warehouses with the following features:
  • Obtain warehouse details at-a-glance with updated product inventory levels
  • Customize warehouse preferences with robust search, sort, filter, and favorite options
  • View product order availability and incoming shipments

Enable customer access

Problem: Customers rely on human-to-human interactions with Nutrien to address simple tasks, waiting for assistance instead of running their business.
Customers want to be self-sufficient while on-the-go to complete tasks such as order requests, changes, and cancellations.
“With fertilizer, you’re not working a 9-5 job. We always try to think ahead but don’t always have that ability. Being able to get those services established outside of business hours is really a need.” - Product Logistics Coordinator

Enable customer access

Solution: This highly-requested feature was new to Nutrien’s infrastructure and required several refinements to map the entire workflow.
We helped users like Len easily manage products and customer deliveries with the following features:
  • Order products to customer warehouses
  • Track incoming product deliveries
  • Reminders when delays or low product inventory levels occurs

Outcomes

During initial product reveals, customers and sponsor users shared excitement and expressed anticipation over a new digital customer experience platform that puts customers first.
A simple and clear design, empowers customers to stay on top of their business with complete control over their account and shipment information.
A flexible and tailored experience informs customers with up-to-date information, interruption alerts, and shipment tracking. They can customize their experience to manage logistics, strategize operations, and resolve issues.
An intuitive and seamless platform gives customers a consistent experience to easily self-serve on-the-go to complete tasks and workflow management, including ordering products.
Customers have on-demand, self-serve access to account and product information. During presentations, stakeholders felt engaged and involved in the user-centric design process.
Carrie's collaborative style and interest in the client's and users’ experiences really helped the project team to work better as one team, despite many challenges. She managed to influence the client with actions and active participation beyond her design role - she was the glue that kept the diverse teams on the project together!

Elmien Dicker, Account Partner

Executive Consultant at IBM iX

Reflection

Not everything went according to plan, but we did the best we could with the resources we had.

Juggling several moving parts

Project beginnings felt like a slow start, as we invited everyone to share product knowledge and align on goals. When waiting for stakeholders to make critical decisions for project advancement, we focused on the design system that would help accelerate design and development.

Leveraging existing resources

With limited customer access, we relied on sponsor users to gather requirements and conduct guerrilla tests. We presented work-in-progress in early feedback sessions but realized sponsor users expected higher-fidelity work. We adjusted our collaboration approach, prioritized design system development, and learned how to set expectations with sponsor users.

Designing with technical limitations

The resources required to phase out legacy systems led to the team postponing user-requested feature ideation and fully-designed feature development.
We could have explored incremental feature development on top of existing infrastructure, as teams have done so from Dropbox, Intuit, and American Express. With a product release, we could track metrics, address user feedback, and capitalize on the momentum gained from product demos.
Despite the situation, the project succeeded with a new design for a digital platform that received positive user reactions. We anticipated improvements in customer retention, lifetime value, acquisition costs, task completion rate, and inquiry resolution time.

Kind words

Feedback on my contributions from talented team members who I had the pleasure of working with.
Carrie’s growth journey as a designer was impressive, both at the UX and UI level. Carrie was confident and trusted enough to lead some UX work streams for various parts of the project independently and directly with client stakeholders.

Elmien Dicker, Account Partner

Associate Partner at IBM iX

Carrie is always such a delight to work with, and we were very fortunate to have her on our team. Overall, it has been an absolute pleasure working with her at Nutrien.

Huiwen Ji, Collaborator

Senior UX & UI Designer at IBM iX

Carrie’s work with Nutrien has always been nothing short of brilliant.

Bill Sykes, Account Executive

Business Development Executive at IBM

Key project contributors
Thi Vo, UX Design Lead
Huiwen Ji, Product Designer
Felipe Kajimoto, Business Analyst
Vincent Brunelle, Business Analyst
Andrew Dewar, Frontend Developer
Patrick Czeczko, Frontend Developer
Stevie Wilson, Product Manager
Abdel Boufroura, Lead Architect
Brian Lofvendahl, Technical Architect
Elmien Dicker, Account Partner

next project

Nutrien strategy