INSIGHTS INTO SEED INVENTORY
Creating an Inventory Summary Dashboard to provide tangible understanding of seed quantities and its movement in and out of warehouses.
THE CLIENT:
A Global Agriculture Client
THE ROLE:
Lead UX Designer
THE TIMELINE:
5 Weeks
THE TOOLS:
Figma, FigJam, Zoom, Slack G-Suite
THE PROBLEM
A data heavy platform focused on seed inventory with no over arching information or insights.
The Company launched a new way to sell seed and track orders through its core Web-based application. A feature of the program (Logistics) allowed Seed Sellers and Seed Sales Representatives to track and manage seed inventory at their assigned warehouse. However they didn’t have any top-level information to see pertinent information including seed allocation and movement.
"Where the heck is all of my seed?!"
THE OUTCOME
A New Inventory Summary widget and dashboard that displayed high level information to its users so they could make actionable decisions regarding seed movement during the season.
A 3-Phase approach to showcasing high-level inventory insight and information at a glance. This phased approach allowed for quicker delivery to beta test before the next planting season.
The Final deliverables include:
-
Phase 1 and Phase 2 Wireframes and High Fidelity screens
-
A clickable prototype that showed expanded/collapsed functionality
-
Direction and approaches for Phase 3.
THE DETAILS
THE
OBJECTIVE
Our Stakeholders wanted the seed sellers to be able to see a summary view of the inventory page so that they can have a better understanding of their inventory by crop and the warehouse level.
This feature needed to include:
-
Key Quantity Metrics by categories
-
The ability to filter metrics by seed type
-
Dynamic data visualization
The Goals of this feature was for sellers to:
-
Have an overview of Crop Amounts at a selected warehouse
-
Help sellers better ship and plan crop levels
-
See a better synopsis of seed inventory.
The main users of the platform would be the Seed Sellers, but we also needed to make sure that the Certified Seed Advisors and Sales Specialists who were assigned so certain sellers would have access to the platform as well.
THE PROCESS
THE KICK-OFF
WORKSHOP
This was a data visualization feature and the UX Lead knew my background and experience in data visualization. She allowed me to take the lead on this feature, from the feature kick-off meeting to the final handoff.
Because this feature and area of the web application was a new concept for me, I wanted to make sure that I understood what the main stakeholder needed in the final designs. I planned a Feature Kick-Off Workshop to gather information from the client. In attendance for this session was the main stakeholder, the UX design team, and the product owners for the feature. The purpose of the workshop was to gather the following information from the client:
-
A confirmation of the user persona and feature purpose
-
An audit of the current screenshots of the platform
-
A working session of the information architecture
-
A review of the layout and possible visual direction
-
An activity to discuss the feature and data/visual prioritization.
"NEED/LIKE/DREAM"
ACTIVITY
In this hour-long workshop, I walk the participants through and discuss each section to get feedback/sign-off/confirmation of direction and plans for the final designs.
The bulk of the session was the “Need, Like, Dream” activity, which allowed our stakeholder to talk through:
THE "WHAT"
1.
-
What data information that the users needed to know, would like to know and what they would dream to know.
THE
"HOW"
2.
-
What data visualizations would the users need to see, like to see and dream to see.
The Workshop provided valuable insights and information that both the UX teams and Product teams took back and applied not only to this feature, but other parallel features being worked on at the same time. Check out the workshop summary I compiled below:
WORKSHOP FINDINGS
The main point of information that was concluded from the workshop was a 3-Phase approach to the designs and roll-out of the feature.
We also fleshed out a general idea of the information architecture and a guideline for the visual approach for each phase of the feature. Each phase would add more insights from the previous phase, while keeping consistency in layout and design. This allowed for a faster turnaround of the feature to development and UAT for a faster release to sellers and sales reps.
We only had a short time to deliver the designs to the client, while also working on other features and screens for other sections of the platform. I mapped out an outline for us to get feedback and complete iterations before the end of the client engagement.
Wireframes - 1 Week
High Fidelity Designs (Round 1) - 1.5 Weeks
High Fidelity Designs (Round 2) - 1.5 Weeks
High Fidelity Designs (Round 3 If Needed) - .5 Weeks
Final Delivery/Handoff - .5 Weeks
Based on the workload of the rest of the UX team, I handed off the design of Phase 1 to another UX designer, I owned the process for Phase 2, and we decided to keep phase 3 as a future feature that would be picked up at a later date.
THE
WIREFRAMES
FIRST ROUND
The initial designs for the wireframes merged all of the requirements for both phase 1 and 2. I worked with the other UX designer to map out the direction for phase 1, which was very similar to a feature that was completed prior on another section of the web-based platform.
Phase One needed to be a summary line with:
-
Unit totals for various categories
-
Summary by crop
-
The ability to toggle between crop views
-
The ability to view both Unit and package views
Phase Two needed to include the above but also have:
-
Additional Unit Metrics
-
Number of Growers with Orders
-
Changes over time of specific categories
-
Unit comparison visuals of various metrics
-
Percentage breakdown of various metrics
-
Condensed/snapshot view of information
-
Expanded view with more detailed information
-
More data visualization.
My approach to the wireframes was to first try to include all of the initial requirements for the design into a compacted view for the user. I designed 3 versions, with different variations of data visualization.
VERSION 1
This visualization made sure all the metrics would be displayed on the screen. Unfortunately, it didn’t allow room for the user to properly digest the information in a clean and concise manner
VERSION 2
This visualization layered in more data comparisons that the main stakeholder was excited to see. However, it was a bit confusing for the users to understand the percentage comparisons on the right.
VERSION 3
This visualization was a bit more digestible and in line with what the rest of the web-based application looked like. But it complexed the data for the user to understand how the bar chart and donut chart correlated with each other.
SECOND
ROUND-ISH
After some internal feedback from team members, we moved on with version 3, But with some major updates from both internal colleagues and the main stakeholder for the feature. We did remove a bunch of information from the Phase 2 view after our stakeholder saw the updated wireframes. I also then created 3 expanded views of the metric charts.
CHANGES OVER
TIME
The Changes Over Time is a line chart that shows the progress of Net Shipped, Ordered, and Delivered Units over the course of the current farming season.
UNIT COMPARISON
1
The Unit Comparison Chart is a Donut chart based on shipped units that showcase a percentage breakdown based on statuses, including assigned, ordered and delivered.
UNIT COMPARISON 2
The secondary Unit Comparison chart is a bar chart based on ordered units that shows the availability of Delivered UN, Ordered UN, and Available UN.
I initially thought that I hit it out of the ballpark with the updates to the Version 3 screens, but there was a few iterations that needed to be created to make sure the user experience was correct, while being acceptable for both the stakeholders and the product team responsible for this feature.
Some updates that were made included:
-
Replacing the “Transfer UN” Metric with the “Available U” metrics
-
Shifting the Corn/Soybean Toggle to a global position, in which is will affect the entire views on the page, not just the metrics
-
Adding in a flow for the user to select a month to date view in the Changes over Time expanded chart.
-
Updating the Unit Comparison chart to be a ring chart vs a donut chart.
-
Updating the Second Unit Comparison chart to showcase Unit Availability, which shows Available units and Returned units in the warehouse for a specific seed.
PHASE 2
APPROVED
WIREFRAMES
MOBILE
WIREFRAMES
With the approval of the XL side wireframes, I was also able to think through the mobile view of this feature. While working on the Mobile views, my colleague was able to flesh out the Large and Medium screen sizes, which would account for table screen sizes in both landscape and portrait mode. The key differentiators between the mobile view and the XL view include:
-
Reorganization of the Key Metrics.
-
Removing the Expanded views from the mobile view.
-
Showcasing one metric at a time on the mobile screen.
-
Adding in pagination for the metrics.
THE
HIGH FIDELITY DESIGN
THE COLOR
PALETTE
Once the final wireframes were approved by the stakeholders, I was able to move into high fidelity designs. This particular feature is only offered in the web-based platform (for the time being) and this platform only uses a dark mode interface. The brand also released a new color into the color palette, and I wanted to use that color as a part of the interface.
My initial thought was to use 2 separate color palettes; one for each seed, to help the user be able to separate the metrics views by color. I used colors already included in the foundational UI library for the initial mockups of the UI designs. I also wanted to label each metric value with a unique color to be carried through the various data visualizations. I felt that this would help the user digest the information with consistency across the dashboard.
CORN
COLORS
The Corn Color palette took inspo from the color of corn, and the brands orange primary color. I also layered in some new colors to help differentiate the metrics while fitting into the color palette.
SOYBEAN
COLORS
The Soybean Color palette took inspo from the plant itself, Green, and the cool colors also found in the global brand color palette. I also had the opportunity to layer in the new Brand color with this color palette while only using Foundational UI Colors.
HIGH
FIDELTY
DESIGNS
The stakeholder loved the idea of the color differentiation, but sent it to the Global marketing team for review. They suggested new colors for each section. I was able to adjust the colors, but I also suggested a new color based on 2 labels having the same color code.
CORN
COLOR
UPDATE
SOYBEAN
COLOR
UPDATE
THE FINAL DESIGN
Within the last week of my time on the project, I was able to turn over these final designs for the client. The user now had a new view of inventory insights that could help them sell and manage seed levels more efficiently.
Here is how I met the goals for this particular feature:
SEED OVERVIEW
1.
-
Have an overview of selected seed and seed orders at a warehouse
-
The user could now see a metric summary of various crop amounts based on the seed journey throughout the farming season.
-
The Line graph showS the progress of the movement of seeds over time. By the end of the season, the lines should meet to a collective point showcasing to the sellers the completion of a successful selling season.
CROP
LEVELS
2.
-
Help sellers better ship and plan crop levels
-
The user could now compare units inside the warehouse versus allocated seed units based on grower assigned units and delivered units.
-
The Ring Chart showcases the percentage breakdown of various metrics based on the net shipped units. This allows the sellers to be able to ship units and plan crop levels more accurately.
INVENTORY
SYNOPSIS
3.
-
See a better synopsis of seed inventory.
-
The user now has a better overall view of seed inventory at a particular hub, and can visually see updates and changes as the season progresses.
-
The Unit Availability chart actively showcases to the seller the available units left for sell or potential growers, and also tracked the rate of seed returns during the selling season.
THE
FEEDBACK
The main stakeholder was very impressed with the final designs. Even while working on this feature, The engineers were able to start work on Phase 1 for a fast turnaround to be able to deploy to eager users.
"
“Franklin, Thanks so much for your work on this. These are great and our users are going to love this!”
-
Main Stakeholder
"
“The Inventory Summary work has been great. Very Happy!”
-
Additional Stakeholder
MY
FINAL
THOUGHTS
I loved working on this feature for this client. I did have to navigate the stakeholder being on vacation during a large chunk of the design iterations, but I'm happy that i was able to provide something informative and delightful to the users.
I wish I was able to work with the client for a bit longer to get some user feedback, but the main stakeholder felt that this new feature would be a game changer. I’m grateful for the opportunity to lead a feature from conception to final handoff, and be a part of a team that helped build a better platform for seed sellers and farmers.
