Squad overview
I worked cross-functionally between 3 departments.
I collaborated closely with Rhea to create project requirements. I also conducted a comprehensive competitive audit, engaged with customers to validate assumptions and test the MVP, and refined designs iteratively based on feedback received.
Team
Rhea Rakshit – Senior Director of Product Management
Juliet Adams – Director of Software Engineering
Tyler Maklebust – Senior Software Engineer
Zak (me) – Product Designer
Mikey Gower – Front-end Developer
Timeline
Launched in 4 months.
Supply chain view
Problem discovery
Companies needed help maintaining profitable, resilient, and compliant supply chains.
The current landscape for supply chain risk management, sourcing, sustainability, and procurement teams is burdened by labor-intensive, inaccurate, and costly methods. This sparks a critical question:
How can we provide customers access to navigate and assess risks within vast upstream supply chains, potentially encompassing thousands of results?
Our solution
An automated supplier mapping and screening tool, paired with AI-enabled product blueprint technology.
Customers can utilize the graph to visualize their upstream suppliers, while AI technology seamlessly links products with their input components, enabling customers to precisely identify what’s pertinent to their real supply chains. The results:
- Contributed to a 10% increase in company revenue post-launch
- Cut through the noise and focus on relevant supply chain risk: Teams can filter supply chain maps to surface only the suppliers and risks relevant to a specific product, leveraging Sayari’s proprietary AI-enabled product blueprints.
- Streamline the discovery of sub-tier supplier risk through automated mapping and batch screening: Teams can automatically map, screen, and monitor tens of thousands of suppliers within minutes, staying ahead of potential supply chain vulnerabilities and disruptions.
- Cut lengthy deployment timelines: Teams can deploy Sayari Map rapidly and begin pinpointing insights to mitigate risks immediately while maintaining the flexibility to integrate seamlessly with other systems of choice.
Competitive analysis
I analyzed the products offered by our competitors and organized my findings using Figjam, dividing them into three sections:
- What worked well
- Node containers clearly display the entity name and any associated risks.
- Areas for improvement
- Accessing additional information in the supply chain view needs to be streamlined.
- Implementing interaction states for nodes can help create focus and enhance usability.
- Trends
- Most supply chains are displayed horizontally.
- Filters are easily accessible and intuitive.
- Overview panels effectively display important information for quick reference.
Feedback on MVP from design partners
To validate my competitive audit findings and mitigate risks associated with product development, Rhea and I presented the live MVP to our design partners for feedback.
In order to test the AI results, we reused visual components from the flagship product, Sayari Graph to quickly get something live. Once live, customer testing revealed four main pain points:
- Customers had difficulty finding and using the filters.
- It was not clear which element was selected on the canvas, as the nodes did not allow for basic UI states.
- Customers were unable to access additional information within the supply chain view.
- Customers require additional information to understand why specific workflows have failed.
Supply chain view – MVP
MVP screenshots – filters and selected nodes
Addressing the pain points
I explored different ways to address each of the four pain points above.
After sketching out several ideas, I shared them with my squad to get initial feedback. Once everyone agreed on the proposals, I proceeded to create high-fidelity designs.
1️⃣ Filtering
Discoverability
Filtering is crucial in focusing on relevant attributes within large upstream networks. However, our customers were not benefiting from the filters because they were hidden under a side panel and not discoverable. To address this issue, I moved all filters above the canvas for easier access.
New filters
Filter clause
Several customers were using filters to exclude specific attributes. Although this was feasible in the MVP, it required some additional effort. I added an “include” and “exclude” clause within each filter dropdown to simplify the process.
Filter dropdown & clause
Filter component updates
I took this as an opportunity to update our filter dropdown component to make it more intuitive. Previously, the active state used the brand’s primary blue color and failed to display the number of selections a customer made for multi-select dropdowns.
I updated the button’s active state to a less saturated blue, as the primary blue color should only be used for CTA buttons. A less saturated blue creates a better sense of hierarchy throughout the interface. The more saturated the blue, the more emphasis should be placed on that component.
We received positive feedback on this update. Therefore, I pushed my changes to the design system and implemented these new filters across both products.
Filter component updates
2️⃣ States
Canvas components
States communicate the status of UI components to the customer. The nodes on the canvas in the MVP failed to do that – as that was not their intended purpose. I explored several ways to handle the node layout and decided to use a rectangular node that would include the supplier name and risk information, if applicable. Additionally, I wanted to create more structure in these complex supply chain visualizations, so I added the tier number information at the top, which created defined columns to help customers identify the information they need at a glance.
I also wanted to explore ways to focus on information. Customers expect to see specific route details when they select a node on the canvas. Therefore, it is beneficial to deemphasize all other information not related to their selection, as seen below:
Supplier selected – MVP
Supplier selected – final
3️⃣ Lacking additional information
Progressive disclosure of information
Customers could see overview information when selecting a route to view in the MVP. However, we learned that they must be able to see additional details for suppliers or shipments within this view to accelerate their workflows.
I explored various ways to display more information in this supply chain view, including popovers, side panels, and split-screen functionality. Eventually, I opted for a secondary side panel because it required minimal development time and provided a suitable way to provide a natural progressive disclosure of information.
Supplier selected
Supplier card selected
4️⃣ Unhappy paths
Customers need context and an alternative route when a workflow fails
To address this problem, I designed empty states that included a graphic, title, supporting copy for context, and a linked alternative solution.
I then organized a FigJam session to brainstorm more intuitive solutions for when supply chains timeout, believing there was a better approach for this instance, and invited the engineering team to join. Through this collaboration, we determined that the best UX approach would be to return partial results tier by tier instead of waiting for the entire supply chain to load.
However, this approach was blocked by a necessary Memgraph update.
Consequently, we implemented an empty state that prompts customers to filter by product, aiming to reduce the request size for complex supply chains.
Brainstorm session with engineering
Empty state – supply chain timeout
Empty state – no results found
👀 Outcomes
My experience
I enjoyed working on this project because it provided significant value to our customers and involved complex visualization design and interaction work.
As the project evolved into a second product, it not only proved valuable for the business but also continued to deliver tremendous customer and business benefits, as highlighted in the overview section.
Next steps
During our ongoing conversation with design partners, we were able to identify another pain point:
- Customers need improved clarity regarding items that AI generates.
