Nutrien’s Hub is an all-in-one management tool for the company’s employees and customers. The purpose of the redesign was to create a single application to support all of the Nutrien-owned tools and streamline workflows to make everyday tasks easier and more efficient.
Discovery
The Problem
Analytics, competitive analysis, and the UX research team were used to determine the problem areas that would provide the most value. Our team focused on the fact that managing Nutrien-related finances was difficult, confusing, and time-consuming in the digital hub, which led to incorrect payments, lost time, and abandonment of the digital hub.
The Goal
Improve the financial experience for customers and employees by reducing the time it takes to make a payment by 50%, simplify the account management tools, and provide more in-depth information on their credit status and opportunities.
Design Process
Dynamic Model
I facilitated a meeting with my product manager and engineering lead to create a dynamic model. The model enabled us to outline all the requirements and subsequently organize them to establish an intuitive information architecture. Once created, the dynamic model provided a template to start creating wireframes and granted the engineering lead the ability to start writing Jira tickets. As the project progressed, the dynamic model served as a reference point for tracking completed tasks, ensuring the fulfillment of all requirements.
Wire-Framing and Prototyping
In crafting this redesign, it underwent three distinct stages. Initially, I wire-framed with Miro to quickly transform my ideas into tangible representations. After consolidating my ideas into a cohesive flow and obtaining feedback from my product trio, I transitioned to Figma. Leveraging our company's design system, I seamlessly translated my wireframes into mid-fidelity designs. Finally, I constructed a prototype based on these designs to solicit feedback from our users.
Usability Test
I conducted a usability test for the payment flow. The objectives were to assess the effectiveness of the new flow compared to the current one, gain insights into grower payment habits, and identify potential future features. To do this, we had 5 participants complete 4 distinct payment tasks. Overall, the proposed flow achieved a higher ease-of-use score across all four tasks. The key finding from the study was that adding more detailed information such as status and descriptions significantly boosted user confidence in their payments, and reduced the completion time because of the clarity. Furthermore, the test allowed us to both confirm assumed payment habits and validate requests for future features.
Development Ready Designs
The final stage of the design process involved preparing the designs for development. Building upon insights from the user test, I incorporated additional descriptions and statuses, along with other minor tweaks. Subsequently, I meticulously revised the designs to ensure pixel perfection before seeking approval from my PM, principal designer, and the design system team. Once the designs were finalized, I collaborated with my engineering lead to organize them by Jira ticket to streamline execution for the engineers. During development, I maintained close collaboration with the team, refining tickets and conducting design reviews to ensure seamless alignment between the product and the designs.
The Final Product
Payment Flow
The payment flow was the most important feature of the redesign. Our primary objectives included reducing the time it took to make a payment from 6 minutes to 3 minutes, minimizing instances of incorrect payments, and increasing online payment utilization. From research, we discovered that unclear balances were the main cause of confusion, specifically around their current due amount. This balance is the ideal way to pay off their balance every month because of problems with statements that could not be solved in our timeline. Therefore, we clarified the definition of the balance as well as gave the customer the ability to view all the invoices tied to the balance, providing more clarity. To speed up the process, we simplified data entry by preselecting items, enabled the saving of bank account details, and compartmentalized the flow into digestible steps, ensuring that customers only had to focus on one aspect at a time. After a year of usage, our analytics show the average time to complete a payment is 55 seconds. This is an 80% reduction in time spent and way under our 3-minute goal. This reduction saves users valuable time and creates a smoother, less frustrating experience, empowering them to manage their payments more efficiently and with greater confidence.
Financial Account Management
The primary objective of financial account management was to establish a user-friendly platform for accessing all of the customer's financial information, encompassing balances, records, purchase history, and additional features. After talking with growers, we identified the biggest pain point in the previous application was the fragmented nature of information. Consequently, we created a dashboard featuring actionable items and cards to offer an overview of the various accessible areas, while also ensuring scalability for future enhancements. The cards were prioritized by importance to the user and were mostly made up of design system components. Given the abundance of data, we employed diverse components, cards, and tables across different breakpoints to optimize user experience based on their device. We also implemented fully functioning sorting and filtering capabilities to help the user find what they are looking for as fast as possible. Initial feedback from select growers has been positive, highlighting the ease and clarity of information retrieval, with anticipation for future expansions.
Npay
Npay is a long-term initiative aimed at promoting the use of Nutrien’s financial programs. The initial phase involved creating a centralized catalog comprising all Nutrien's programs, and enabling customers to conveniently view their enrolled programs online. The goal of the program catalog was to show as much information as possible in the view. To achieve this, we implemented a table layout for desktop breakpoints and collaborated with the design system team to develop a compact table for mobile devices. Each customer would only see programs that are offered to them, with the option to delve into details such as rates, products, timelines, and other pertinent information. Integration of the customer credit view seamlessly into the account dashboard provided users with an overview of their credit usage, with the ability to explore specific programs in detail. The initial phase focused on making information accessible to both customers and employees. Subsequent phases will entail enabling additional actions, such as program registration within the application and facilitating payments for individual programs.
Takeaways
Constraints
I had to work around a lot of new constraints which was both challenging and rewarding. Firstly, our company deals with a vast amount of data, which has created difficulties in accurately transferring this data to the digital realm within our designated timelines. Therefore it affects the entire design process. From the beginning, I worked with my product manager to design around the specified requirements and available data, while also consulting with engineering to ensure the feasibility of our ideas. Despite thorough preparation, we encountered unexpected roadblocks that required last-minute adjustments. These changes taught me how to adapt on the fly, and reinforced the importance of clear communication across my team and other divisions. Secondly, this was the first time I worked with an extensive design system. Initially, the design system felt like a constraint because none of my ideas fit perfectly into any of the components. However, with time, I began to embrace the design system, shifting my thought process from "How can I make this work with components?" to "Which components can I leverage to address this problem?” This shift enhanced my design efficiency. Overall, while constraints can present obstacles, they also serve as opportunities for adaptation and creative problem-solving.
Collaboration
This was my first time working with a product manager and a squad of engineers. Our company promoted the idea of a product trio(design, engineering, product) that was aligned throughout the whole product development process. Early in the process, my PM and Engineering lead tended to focus on their respective duties, inadvertently leading to overlooked feasibility constraints and discrepancies between the design and the final product. Recognizing this challenge, I took the initiative to establish a weekly trio sync, ensuring alignment among my trio on ongoing and future tasks. This approach helped us plan and design better which expedited development. Additionally, I adjusted my design review process based on insights from a retrospective with the squad. While working on the Npay feature, which required collaboration with teams across various company departments and stakeholder presentations, I encountered numerous scope changes and data requirements, necessitating frequent design updates and decisions. To effectively manage these changes, I created a design decision document to meticulously record all decisions, rationale, and responsible parties. This allowed me to easily communicate my designs across all teams. Overall, this experience emphasized the importance of communication, feedback, and collaboration within a product team. By implementing new processes to ensure alignment with my product teams, we succeeded in delivering superior products within designated timelines.
